LogIn Form Animation
About this project
This project turns a simple login form into an interactive scene built around a pull cord lamp. The SVG lamp sits next to a glassmorphic login card that stays hidden until the lamp gets switched on. Users drag the cord bead down past a threshold to trigger the toggle. GSAP's Draggable plugin tracks the pointer movement and constrains it to a vertical range so the cord only moves up and down. Once the drag crosses the release point the lamp state flips, the background shifts to a warmer dark tone, the shade brightens with a glow filter, and the login form animates into view with a spring easing effect. Letting go of the cord snaps the bead back to its resting position with a bouncy return animation. A CSS custom property tracks the on and off state so the glow overlay behind the lamp can fade in smoothly without touching JavaScript for the visual transition itself.
What you will learn
Building this project teaches you how to combine SVG shapes with CSS variables to create a themeable UI element that reacts to state changes. You'll get hands-on practice with GSAP's Draggable plugin, including setting drag bounds, reading the drag position inside onDrag, and triggering logic based on a threshold in onRelease. The project also covers coordinating multiple animation systems at once, since GSAP handles the cord physics while CSS transitions handle the glow and form reveal, and understanding how to keep those in sync through a shared state attribute on the body tag matters a lot here. You'll also see how attribute animation works in GSAP, since the cord line's y2 coordinate gets animated directly as an SVG attribute rather than a transform.
Understand the code
Read a plain-language overview or a file-by-file breakdown. Ask questions about the project below the overview.
This project creates an interactive web page featuring a login form that appears and disappears with a lamp animation. The primary purpose is to demonstrate dynamic UI changes and animations triggered by user interaction, specifically by "pulling" a lamp cord. When the lamp is "on," a login form slides into view, the background darkens, and a subtle light glow emanates from the lamp. When "off," the form retracts, the glow fades, and the background lightens.
The HTML structure defines a container holding two main elements: a lamp represented by an SVG and a login form. The lamp SVG includes various shapes for the shade, base, and a pull cord with a draggable "hit area." The login form contains standard input fields for username and password, along with a submit button. The body element uses a data-on attribute to manage the overall state.
<body data-on="false">
<div class="container">
<div class="lamp-wrapper">
<!-- SVG lamp elements -->
</div>
<div class="login-form">
<h2>Welcome</h2>
<!-- Form content -->
</div>
</div>
</body>This snippet shows the main structural elements, including the data-on attribute on the body which is key for state management.
CSS styles the layout, the lamp components, and the login form. Crucially, the login form is initially hidden using opacity: 0, pointer-events: none, and a transform to position it off-screen. A radial gradient ::before pseudo-element on the body creates the light glow effect, with its opacity controlled by a CSS variable --on. Styles for the lamp shade and an inner glow also change based on the data-on="true" attribute on the body.
.login-form {
opacity: 0;
pointer-events: none;
transform: translateY(30px);
transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.login-form.active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}This CSS demonstrates how the login form is initially hidden and then smoothly revealed by adding the active class.
The JavaScript, utilizing the GSAP animation library, handles the interactivity. The Draggable plugin is used to make the lamp's pull cord interactive, allowing users to drag it vertically. When the cord is released after being dragged past a certain point, the toggleLamp function is called.
Draggable.create(hitArea, {
type: "y",
bounds: { minY: 0, maxY: 60 },
onRelease() {
if (this.y > 30) {
toggleLamp();
}
// ... animation to return cord ...
},
});This JavaScript snippet illustrates how the lamp cord's drag functionality is implemented and how it triggers the toggleLamp function.
The toggleLamp function is the core logic, switching the isOn state, playing a sound, and updating the body's data-on attribute. This attribute change, along with setting the --on CSS variable, triggers the visual transformations defined in the CSS, such as the lamp's glow and the login form's visibility. GSAP is also used to animate the background color of the body for a smooth transition.
function toggleLamp() {
isOn = !isOn;
clickSound.play();
body.setAttribute("data-on", isOn);
root.style.setProperty("--on", isOn ? 1 : 0); // Controls CSS variable for glow
if (isOn) {
loginForm.classList.add("active");
gsap.to(body, { backgroundColor: "#1c1f24", duration: 0.6 });
} else {
loginForm.classList.remove("active");
gsap.to(body, { backgroundColor: "#121417", duration: 0.6 });
}
}This toggleLamp function orchestrates all the visual and functional changes when the lamp's state is toggled.
Ask about this project
Have a question about how this project works? Ask below and get an answer based on the project code.
Code Breakdown
Structured technical breakdown for beginners.
No breakdown yet. Generate one to see a file-by-file explanation.
Comments
No comments yet. Sign in to leave a comment.
Sign in to leave a comment.