Staggered (3D) Grid Animations with Scroll-Triggered Effects

A playful concept where we use scroll-based animations to create 3D grid effects and other transitions.

By Manoela Ilic in Playground on October 16, 2024

Demo Code

From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.

I’ve been wanting to explore more staggered grid animations, and this time I wanted to experiment with perspective, filters and typography. So today, I’m excited to share this little experiment with you. There are endless possibilities, and honestly, I’m struggling to find the right words to describe it… language can feel so limiting sometimes 🙂

We’ve explored scroll-based layout animations before, and also played around with perspective effects. This time, I wanted to use both concepts somehow in grids and on typography. The heart of this demos is the cylinder like 3D effect that the two columned grid has. It’s really interesting to think what kind of animations actually look harmonic when given a number of columns (or rows).

Check out the demo, it’s a bit smoother than this video 😉

A playfull staggered animation on typography and a grid, without 3D.

Anyway, I hope you like it! Feel free to explore the code and use this!

Note that in this demo, I’m using the GSAP’s SplitText plugin, available with GSAP Plus. In the repo, you’ll find the trial version included for you to explore. If you want to build on these effects or use them on a live website, make sure you are in the GSAP Club!

Thanks for checking by!

Manoela Ilic

Dynamic Tooltip Reveal Animations

Repetition Image Hover Effects

FBO Particles with Three.js

Stay in the loop: Get your dose of frontend twice a week