Framer X - Scroll Interactions

Parallax module

Project file is in this page too:

Key points

  • Parallax non-coding usage: Just drag and drop components and customize on the properties panel
  • Code overrides: a lot more power and flexibility, slightly more learning required, but much more fun (agree?)
  • You can make these scroll interactions yourself too! (agree?)
  • No magic here. Functions like overrides.scroll() just return a JS object. You can use the object wherever it makes sense. For example, combine it with another object with the spread operator (the “…overrides.scroll(props)” stuff).


What parameters can you use with modulate? Rotation, X, Y?

It supports all the props that can take an Animatable value. I explained it here.

I know modulate from Framer Classic; is it similar?

I just took the name from the Utils module in FC. The concept is similar, as it allows you to convert an input range into an output range. The usage is different. This modulate converts a scroll position range into a property value in the specified output range, plus setting up code overrides etc that make the scroll interaction work. In comparison, Utils.modulate is a low level function that just converts values.

Can we use the Parallax component together with the Framer Page component?

It depends on your use case. You can hook it up with a Page component with code overrides. For example, you can switch to a page when scrolling into a specific range. If this is not what you are trying to do, email me your detailed use case.

© 2020 jimu Labs, Inc.