Tourist Scrapbook using ScrollTrigger, TextPlugin

[leejaew]

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!

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

[Rodrigo]

Good work! Looks really nice 🥳

 

Thanks for sharing! 💚