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.
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.
Thanks a lot Benjamin, really good explanation!
Nice one Benjamin Den Boer