Search the Community
Showing results for tags 'showcase'.
Found 4 results
-
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)
-
Happy to share this with you and hear from experts and fellow enthusiasts in the field. Visit Website
-
Hi people, I've been trying to enhance my skills regarding GSAP and SVG animations. Inspired by the beautiful [Toggl's web app](toggl.com) I've tried to reproduce a neat effect available there, but using a slightly different approach. I've grabbed a great little monster SVG from a collection and took the challenge of animating the eye of this monster reactive to the mouse hover event on the parent container. I've had first tracked down all the min and max values to translate X and Y axis in order to roll out all the monster's eye globe and then applied a calculation to transform the 0%-100% from the mouse position on the container to the min/max values to Y and X possible translations. The result was satisfying. This is my first sharing post and any feedback regarding best practices, best performance, or simply a better way to achieving that would be very much appreciated. @Edit: For some reason the pen is not being correctly loaded, so here is the link: https://codepen.io/junglebadger/pen/dLXrew
-
Hi all, I tried creating a new preloader using GSAP. And it turns out good... I just wanted to share this here... Thank you Cheers!!!
