Control on scroll animation in a grid

I’m trying to figure out the best way to create an animation I prototyped in Figma.

I know I can’t control the grid using Webflow’s native animations. But is there a way to do this with custom JS or TS?

Here is the Figma prototype. It’s the 3rd section starting with “We’re a…”

Here is my public share link to Webflow

Hi @Keithen

I think this may be what you’re looking for. Go to my site here:

I did something similar on the home page. Is this along the same line?

I think that looks pretty dope! Could I get the read-only link to see how you did it?

I don’t think it’s on the same track as what I’m trying to do since I’m trying to get boxes to change sizes and layout as the page scrolls. On Figma, I did this by making it a hover effect just to get the idea working. But I want it to be an “On Scroll” animation if possible.

Yeah you should be able to do it with interactions. Each one would have it’s own origin point but they would scale independently. Here’s my read only… let me create a new one…

https://preview.webflow.com/preview/garymichaeldesign?utm_medium=preview_link&utm_source=designer&utm_content=garymichaeldesign&preview=85527342ca8a9d4fdfb93b62619c441a&workflow=preview