Search the Community
Showing results for tags 'responsivedesign'.
Found 1 result
-
Sneaker Brand Timeline using ScrollTrigger and ScrollToPlugin from GSAP
leejaew posted a topic in GSAP
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-
- 1
-
-
- scrolltrigger
- scrolltoplugin
- (and 6 more)