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

What is Framer? Join the Community
Return to index
Tommy Vincent Mathieu
Posted Apr 26 - Read on Facebook

Hello guys, I am new to Framer and to coding in general but I have a lot of fun learning coffeescript. I searched through similar questions but never found the clear answer. Is there a simple way to create a vertical parallax effect similar to this example : http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/

in framer ? I tried giving different .speedY to layers inside a scrollcomponent wrap. I tried to understand the utils.Modulate but I didn't get it.

I would also love to be able to create events based on a certain scroll height..etc.

Any help would be appreciated.

3 Comments

Benjamin Den Boer

Hey Tommy Vincent Mathieu — there is! It's indeed possible using the modulate utility. I've created a simple little example for you:
https://share.framerjs.com/zqsnt4xiyamx/

So first, we're storing the current y position of each layer in variables. Then, we're changing the y property within the scroll event, using modulate. Our modulate utility has 3 arguments: an input, a first range and a second range. The input is the current scrolling position: scroll.scrollY. Our first range is the distance of the scroll. I'm taking the height of the screen (1334), because within this example, you cannot scroll beyond it much. Then, the final range is the output — this is where we can translate the values of the first range, and set unique ones for each layer. Try it out by dragging the screen up and down, and see how each layer moves a little differently.

Tommy Vincent Mathieu

Thanks a lot Benjamin, really good explanation!

Jordan Robert Dobson

Nice one Benjamin Den Boer

Read the entire post on Facebook