Sneaker Brand Timeline using ScrollTrigger and ScrollToPlugin from GSAP

[leejaew]

Just finished building an interactive sneaker timeline featuring sequential animations, parallax effects, and smooth scroll navigation! Here's how I implemented key GSAP features:

 

ScrollTrigger for Timeline Progression

ScrollTrigger.create({
    trigger: '.timeline-container',
    start: "top center",
    end: "bottom bottom",
    onUpdate: (self) => {
        const progress = self.progress;
        timelineLine.style.height = `${progress * 100}%`;
    }
});

 

Sequential Content Reveals

gsap.to(shoeDate, {
    opacity: 1,
    y: 0,
    duration: 0.6,
    ease: "power2.out",
    onComplete: () => {
        // Chain next animation
        gsap.to(shoeName, {
            x: 0,
            opacity: 1,
            duration: 1,
            ease: "power2.out"
        });
    }
});

 

ScrollToPlugin Navigation

document.addEventListener('keydown', (e) => {
    if (e.code === 'Space') {
        gsap.to(window, {
            duration: 1.2,
            scrollTo: {
                y: targetShoe,
                offsetY: 100
            },
            ease: "power2.inOut"
        });
    }
});

 

Smooth Parallax Effects

gsap.to(".parallax-bg", {
    scrollTrigger: {
        scrub: true
    },
    y: 100,
    scale: 1.1,
    ease: "none"
});

 

Interactive Letter Animations

letters.forEach((letter, index) => {
    tl.to(letter, {
        color: '#e10600',
        duration: 0.3,
        ease: "power2.inOut"
    }, index * 0.15);
});

 

 

Other Features:

• Spacebar navigation between shoes
• SoundCloud audio integration
• Fully responsive design
• Dynamic image loading with loading state

See the Pen ZYGmpjj by leejaew (@leejaew) on CodePen.