🎥 Code-Driven Animation with GSAP 🚀

date

Mar 23, 2025

slug

recreated-code-driven-animation

author

status

Public

🎨 Setting Up the Scene

First, we start with a dark-themed background and a minimalistic font (Montserrat). This sets the stage for our animated text cube. 🏗️


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Code-Driven Animation</title>
    <script src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');

        html, body {
            margin: 0;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #000;
            font-family: "Montserrat", sans-serif;
            font-weight: 900;
            overflow: hidden;
        }
    </style>
</head>

🛠 Building the 3D Cube

We define a cube with four faces, each containing text like CODE, DRIVEN, ANIMATION, and GSAP. The cube is placed inside a perspective container to achieve a 3D effect. 🧊


<body>
    <div class="pov">
        <div class="tray">
            <div class="cube-container">
                <div class="cube">
                    <div class="face front">CODE</div>
                    <div class="face back">DRIVEN</div>
                    <div class="face right">ANIMATION</div>
                    <div class="face left">GSAP</div>
                </div>
            </div>
        </div>
    </div>
</body>

⚡ Animating with GSAP

Here comes the fun part! 🎉 We use GSAP to: ✅ Rotate the cube on the Y-axis ✅ Change text colors dynamically ✅ Create a smooth looping effect ✅ Add slight movement to make it feel organic 🎭


const n = 30; // Number of cubes
const rots = [
    { ry: 270, a: 0.5 },
    { ry: 0, a: 0.85 },
    { ry: 90, a: 0.4 },
    { ry: 180, a: 0.0 }
];

// Set initial positions
gsap.set(".face", {
    z: 200,
    rotateY: i => rots[i].ry,
    transformOrigin: "50% 50% -201px"
});

// Create and animate cubes
for (let i = 0; i < n; i++) {
    let die = document.querySelector('.cube-container');
    let cube = die.querySelector('.cube');

    if (i > 0) {
        let clone = die.cloneNode(true);
        document.querySelector('.tray').appendChild(clone);
        cube = clone.querySelector('.cube');
    }

    gsap.timeline({
        repeat: -1,
        yoyo: true,
        defaults: { ease: 'power3.inOut', duration: 1 }
    })
    .fromTo(cube, { rotateY: -90 }, { rotateY: 90, duration: 2 })
    .to(cube.querySelectorAll('.face'), {
        color: (j) => `hsl(${(i/n*75+130)}, 67%, ${100 * [rots[1].a, rots[2].a, rots[3].a][j]}%)`
    }, 1)
    .progress(i/n);
}

🎬 Final Touches

To add a bit more life to the animation, we animate the tray containing the cubes. This gives a floating illusion, making the effect even more mesmerizing. 🌊


// Add tray animations
gsap.timeline()
    .from('.tray', { yPercent: -3, duration: 2, repeat: -1, yoyo: true })
    .fromTo('.tray', { rotate: -15 }, { rotate: 15, duration: 4, repeat: -1, yoyo: true })
    .to('.tray', { scale: 1.2, duration: 2, repeat: -1, yoyo: true });

🚀 Why Use GSAP for Animations?

✅ Performance-Optimized – Runs smoothly even on lower-end devices 📱 ✅ Timeline Control – Easy to create sequences ⏳ ✅ Intuitive Syntax – No complex math required! 🧮

🎉 Conclusion

With just a few lines of GSAP-powered JavaScript, we created a stunning, smooth, and infinite animation. If you love visual magic powered by code, this is your playground! 🎮

👉 Try tweaking the colors, speeds, and effects to create your own version!

Let me know what you think in the comments! 💬🔥

Full source code here : https://codepen.io/rahul-sahni/pen/dPyKNXp

🔗 Stay tuned for more coding magic!