Today marks Day 6 of my GSAP journey, and I explored the wonderful world of text animations! The goal was to create a visually striking animation where each half of the text moves dynamically into view, creating a delightful entrance effect. Let's dive into how I achieved this step-by-step. 🚀
🛠️ Project Overview
This animation splits a heading into two groups of letters:
- The first half animates with a positive stagger.
- The second half animates with a negative stagger.
The result? A beautiful wave effect as the text enters the screen. 🌊
📋 Key Concepts Used
Text Splitting: Breaking down text content into individual letters and wrapping them in<span>tags for precise control.
GSAP Animations: LeveragingstaggerandskewYto create dynamic and layered movement.
Ease Effects: Adding smoothness with easing options likepower2.out.
🌟 Code Breakdown
HTML Structure
A simple setup with a single <h1> tag for the text:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Day-6 Text-Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Day-6-GSAP</h1>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" crossorigin="anonymous"></script>
<script src="script.js"></script>
</html>
JavaScript: Splitting and Animating Text
Here’s where the magic happens!
var h1 = document.querySelector("h1");
// Split text into individual letters
var letters = h1.textContent.split("");
h1.textContent = ""; // Clear original content
var cluter = ""; // To store formatted HTML
halfValue = Math.floor(letters.length / 2); // Split point
letters.forEach(function (letter, idx) {
if (idx < halfValue) {
cluter += `<span class="first">${letter}</span>`;
} else {
cluter += `<span class="second">${letter}</span>`;
}
});
// Rebuild the heading with span-wrapped letters
h1.innerHTML = cluter;
// GSAP Animations
gsap.from("h1 .first", {
duration: 0.6,
y: 50,
opacity: 0,
ease: "power2.out",
skewY: 7,
stagger: 0.3, // Positive stagger for the first half
});
gsap.from("h1 .second", {
duration: 0.6,
y: 50,
opacity: 0,
ease: "power2.out",
skewY: 7,
stagger: -0.3, // Negative stagger for the second half
});
How It Works
Splitting the Text:
- The text content of the
<h1>is split into an array of letters.
- Each letter is wrapped in a
<span>for individual control.
- The letters are divided into two groups,
firstandsecond, based on the midpoint of the text.
- The text content of the
Animating with GSAP:
- The
frommethod is used to animate the starting state of the elements.
- For the
firsthalf:
- Letters drop in sequence (
stagger: 0.3).
- Letters drop in sequence (
- For the
secondhalf:
- Letters follow an inverse sequence (
stagger: -0.3).
- Letters follow an inverse sequence (
Easing and Skew: These effects add smoothness and a realistic wave motion.
- The
🎥 Visual Impact
Imagine the text dropping from above, letter by letter, skewing as it lands in place. The staggered animation creates a mesmerizing wave effect, perfect for adding flair to headings and titles. ✨
💡 Challenges & Lessons Learned
Precision in Text Splitting: Making sure the text splits evenly for animations was key.
Timing with GSAP: Tweakingdurationandstaggervalues helped fine-tune the effect.
Easing Mastery: Experimenting with different easing effects likeelasticandpowerenhanced the animation's appeal.
🌈 What’s Next?
- Experiment with scroll-triggered text animations for interactive web pages.
- Combine this effect with color gradients or shadows for added depth.
🔗 Links
Live Demo:
This project proves how simple text can be transformed into an eye-catching animation with GSAP. Give it a try, and let your imagination flow! 🚀
SOCIAL SHARE CARD GENERATOR