Grow & Scatter Grid Animation

In this lesson of the Mastering GSAP Interactions in Webflow series, we’re building a fully CMS-powered grow and scatter animation using GSAP Interactions, Variables, Variable Modes, and a bit of surprisingly powerful custom CSS. Images first grow from the center of the screen in a staggered fashion… …and then beautifully scatter into their corresponding positions inside a responsive CSS Grid layout. Along the way, we’ll explore: ✔ How to center grid items mathematically using custom CSS ✔ How to animate an entire layout using a single variable ✔ How to combine CMS fields with nth-child targeting ✔ How to create staggered GSAP animations inside Webflow ✔ How to make the entire setup responsive using Variable Modes ✔ How to build reusable interaction systems using custom attributes This project is also a great example of how Webflow Variables, GSAP Interactions, and custom CSS can work together as a unified animation system. 👉 Watch on YouTube: