DEV Community

Cover image for Day 6: Text Animation with GSAP – A Split Letter Magic! 🎨✨
Ashish prajapati
Ashish prajapati

Posted on

Day 6: Text Animation with GSAP – A Split Letter Magic! 🎨✨

#gsap #javascript #beginners #tutorial

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:

  1. The first half animates with a positive stagger.
  2. The second half animates with a negative stagger.

The result? A beautiful wave effect as the text enters the screen. 🌊

📋 Key Concepts Used

  1. Text Splitting: Breaking down text content into individual letters and wrapping them in <span> tags for precise control.
  2. GSAP Animations: Leveraging stagger and skewY to create dynamic and layered movement.
  3. Ease Effects: Adding smoothness with easing options like power2.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>
Enter fullscreen mode Exit fullscreen mode

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 });
Enter fullscreen mode Exit fullscreen mode

How It Works

  1. 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, first and second, based on the midpoint of the text.

  2. Animating with GSAP:

    • The from method is used to animate the starting state of the elements.
    • For the first half:
      • Letters drop in sequence (stagger: 0.3).
    • For the second half:
      • Letters follow an inverse sequence (stagger: -0.3).
    • Easing and Skew: These effects add smoothness and a realistic wave motion.

🎥 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: Tweaking duration and stagger values helped fine-tune the effect.
  • Easing Mastery: Experimenting with different easing effects like elastic and power enhanced 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

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! 🚀

Top comments (0)