Search the Community
Showing results for tags 'vanilla-js'.
Found 1 result
-
Dubai Scrapbook, a GSAP powered interactive story. This demo turns a long list of tourist highlights into a playful “scrapbook” you can scroll through. What GSAP does here: 1. Hero ScrambleText – TextPlugin fakes a hacker-style scramble before landing on each lyric line. 2. Intro pop – the main title animates in with a simple fromTo on scale/rotation using back.out ease. 3. Scroll-driven page reveals – Every .photo-page card slides, rotates and scales into place via ScrollTrigger. 3. Stickers, washi-tape strips and photo frames each get their own staggered timelines inside the same trigger. 4. Per-word fade for descriptions – A helper splits the paragraph into <span> words and lets a small timeline (stagger: 0.08) fade them in as you reach the card. 5. Confetti explosion on button click – GSAP throws emoji with random x, y, rotation and opacity fades. 6. Micro-interactions – mouseenter / mouseleave handlers give buttons and photo frames a quick scale-tilt effect (power2.out). 7. Parallax extras – Floating emojis in the background scrub vertically with the page (scrub: 1) for extra depth. It’s basically a cookbook of little GSAP tricks. Feel free to copy-and-paste the parts you need. Enjoy!
- 1 reply
-
- 1
-
-
- scrambletext
- textplugin
- (and 7 more)
