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

What is Framer? Join the Community
Return to index
Rhys Merritt
Posted Sep 04 - Read on Facebook

If I wrap a superLayer in a scrollComponent, am I able to define separate scroll speeds for different layers within the superLayer?
An example of this would be trying to achieve a parallax effect when scrolling vertically.

7 Comments

Rich Zarick

You can absolutely get the desired effect by referring to whichever element is actually doing the scrolling, and using that as a variable in a Events.Scroll function to reposition any element. Sorry I can't post an example, but many people have used Utils.modulate to achieve this effect successfully!

Rhys Merritt

Thanks for the reply Rich! I will keep an eye out for any examples.. And I'll have a go at doing it over the weekend

Jordan Robert Dobson

I've also seen people do something similar with using the z axis, preserve 3d and perspective to do parallax in CSS only.

Rich Zarick

Ooo dimensional parallax sounds fun

Jordan Robert Dobson

Yep. You basically just simulate a camera by declaring all the positions and let the code do the work for you. I'll try and dig up the codepen example when I get back home.

Jordan Robert Dobson

Here's the post... you could easily apply the same ideas to framer: http://keithclark.co.uk/articles/pure-css-parallax-websites/

Jordan Robert Dobson

Also check out the debug option on this one: http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/

Read the entire post on Facebook