Hey there, welcome to our blog! Today, we’re diving into an exciting topic—how to create Form using Tailwind CSS, and GSAP (GreenSock Animation Platform). We’ll break it down so it’s easy to follow and show you how simple animations can take your web design to the next level.
Create Form using Tailwind CSS
This project uses Tailwind CSS for styling and GSAP for smooth animations. We also added custom Google Fonts to give the form a clean, unique look. Here’s what you’ll learn:
- Creating the structure of the login form with HTML.
- Styling the form using Tailwind CSS, a utility-first CSS framework.
- Animating the form with GSAP for fun, eye-catching interactions.
Let’s break down the code bit by bit so you can follow along easily.
Setting Up the HTML
We begin by structuring the form using basic HTML elements. Here’s what it includes:
• A title (<h2>) for “Login“.
• Two input fields—one for email and one for password.
• A Remember me checkbox and a Forgot Password link.
• A Sign In button to submit the form.
Styling with Tailwind CSS
Tailwind CSS helps you create professional-looking forms quickly. We use utility classes like text-3xl, bg-white, and shadow-xl to style the form and make it look modern. Some highlights include:
- Rounded borders: The form and inputs are styled with rounded-lg for smooth corners.
- Spacing: Tailwind’s px-4, py-3, and space-y-6 are used to control padding and spacing between elements.
- Transitions: We’ve added smooth hover effects using transition-all and duration-300 for subtle changes when interacting with the form.
Adding Animations with GSAP
Now, the fun part—animations! We use GSAP to animate the form when it loads and to add interactivity when users focus on input fields.
Staggered Form Load Animation: As soon as the page loads, the form title and input fields appear with a staggered effect. GSAP’s stagger method adds a delay between each element, making the form load smoothly.
Interactive Animations: We added animations to the input fields, making them grow slightly when focused. This gives the form a dynamic feel. When users focus on an input field, it scales up using GSAP’s scale and gets a glowing shadow effect:
Hover Animations on the Button: The “Sign In” button grows when hovered over, giving users feedback that the button is clickable.
Source code
If you like this dashboard design, then feel free to use it. Copy the code by clicking on Copy button provided below. First, you have to create two files. One of them is HTML, and the other is JS after creating these files, paste the code provided below.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Code by: www.codeinfoweb.com -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Animated Login Form | By Code Info</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- GSAP CDN -->
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"
defer
></script>
<style>
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:[email protected]&display=swap");
body {
background: linear-gradient(to right, #667eea, #764ba2);
font-family: "Space Grotesk", sans-serif;
}
input:focus {
outline: none;
}
</style>
</head>
<body class="flex items-center justify-center min-h-screen bg-gray-50">
<div id="login-form" class="w-full max-w-md">
<div class="bg-white shadow-xl rounded-xl p-10">
<!-- Title -->
<h2
id="form-title"
class="text-3xl uppercase font-bold text-center mb-8 text-gray-800"
>
Login
</h2>
<form action="#" method="POST" class="space-y-6">
<!-- Email Input -->
<div id="email-input">
<label for="email" class="block text-sm text-gray-600 mb-2"
>Email</label
>
<input
type="email"
id="email"
name="email"
required
class="w-full px-4 py-3 border border-gray-200 rounded-lg shadow-sm transition-all duration-300"
placeholder="Enter your email"
/>
</div>
<!-- Password Input -->
<div id="password-input">
<label for="password" class="block text-sm text-gray-600 mb-2"
>Password</label
>
<input
type="password"
id="password"
name="password"
required
class="w-full px-4 py-3 border border-gray-200 rounded-lg shadow-sm transition-all duration-300"
placeholder="Enter your password"
/>
</div>
<!-- Remember me and Forgot Password -->
<div class="flex justify-between items-center">
<label
class="flex items-center text-sm text-gray-600"
id="remember-me"
>
<input
type="checkbox"
class="form-checkbox h-4 w-4 text-teal-600 border-gray-300 rounded transition duration-200"
/>
<span class="ml-2">Remember me</span>
</label>
<a
href="#"
id="forgot-password"
class="text-sm text-teal-600 hover:underline"
>Forgot Password?</a
>
</div>
<!-- Sign In Button -->
<div id="sign-in-button">
<button
type="submit"
class="w-full py-3 bg-teal-600 text-white text-lg rounded-lg hover:bg-teal-700 transition duration-300 ease-in-out shadow-lg"
>
Sign In
</button>
</div>
</form>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
JS Code
window.addEventListener("load", () => {
// Grouping elements for stagger animation
const elementsToAnimate = [
"#form-title",
"#email-input",
"#password-input",
"#remember-me",
"#forgot-password",
"#sign-in-button",
];
// Applying stagger with GSAP
gsap.from(elementsToAnimate, {
opacity: 0,
y: -30,
duration: 0.6,
ease: "power2.out",
stagger: 0.2,
});
// Input fields animation on focus
document.querySelectorAll("input").forEach((input) => {
input.addEventListener("focus", () => {
gsap.to(input, {
scale: 1.05,
boxShadow: "0px 4px 20px rgba(0, 128, 128, 0.4)",
duration: 0.3,
ease: "power2.out",
});
});
input.addEventListener("blur", () => {
gsap.to(input, {
scale: 1,
boxShadow: "0px 0px 0px rgba(0, 0, 0, 0)",
duration: 0.3,
ease: "power2.in",
});
});
});
// Forgot Password link animation on click
const forgotPasswordLink = document.querySelector("#forgot-password");
forgotPasswordLink.addEventListener("click", (e) => {
e.preventDefault();
gsap.to(forgotPasswordLink, {
color: "#ff6347",
duration: 0.3,
ease: "power2.out",
yoyo: true,
repeat: 1,
});
});
// Button hover animation
const signInButton = document.querySelector("button");
signInButton.addEventListener("mouseenter", () => {
gsap.to(signInButton, {
scale: 1.1,
boxShadow: "0px 4px 20px rgba(0, 128, 128, 0.4)",
duration: 0.3,
ease: "power2.out",
});
});
signInButton.addEventListener("mouseleave", () => {
gsap.to(signInButton, {
scale: 1,
boxShadow: "0px 0px 0px rgba(0, 0, 0, 0)",
duration: 0.3,
ease: "power2.in",
});
});
});
Conclusion
By combining Tailwind CSS for sleek design and GSAP for eye-catching animations, you can create an engaging login form that leaves a lasting impression on users. Play around with the colors, animations, and styles to make it your own! We hope you enjoyed this tutorial and feel inspired to add animations to your next project.
I hope you liked this snippet. If so, please share the blog and follow us in our social media profiles and stay connected with this blog. Thank you for visiting.
