This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Josh Ackerman
Posted Jan 03 - Read on Facebook

What is the best way to achieve the following scroll effect (see attached image)? I tried a few different ways, the closest being using Utils.modulate to map scroll.scrollY to a number in [1,0] whenever the user scrolls. The issue with this method was that every layer in the grid would change position, and I only need to top row to do so. Adding a conditional statement to solve this broke the effect altogether. Any suggestions?


Jordan Robert Dobson

I would start with just having a function that looks at all your rows... I would group them by row... And looks to see if the row's y position is at the top (maybe with screenFrame) and then scale it using modulate.

Jordan Robert Dobson

You probably also want to keep track of the scale values in an array. That way you can choose to skip a row if it's already scaled appropriately.

George Kedenburg III
Marc Krenn

Thanks George for sharing! Made some modifications to your file:

* fixed y-postition of the top row
* added marginVert, layerWidth, and colCount and a dynamic horMargin
* reformatted to match personal taste
* ze colors

Arron J Hunt

Great examples guys :) Marc Krenn looks like the squares still get clipped on the top

Josh Ackerman

I apologize if this is a silly question but how can I get this effect working both directions (scrolling up and scrolling down)?

Read the entire post on Facebook