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

What is Framer? Join the Community
Return to index
Arvi Raquel-Santos
Posted Feb 06 - Read on Facebook

Any tips or examples out there on how to revers an animation based on scroll position? Trying to doing something like Twitter profile photos. Here's where I am — http://share.framerjs.com/kv111cufhy4d/

8 Comments

Matt Bogado

Having the same issue. I hope you get an answer :)

Matt Wujek
George Kedenburg III

here's one thats tied directly to the scroll instead of just triggering a preset animation (a little more like the twitter one) http://share.framerjs.com/xfwt8y6dj9x2/

Arvi Raquel-Santos

George and Matt this is great, thanks!

George, I had a feeling it had something to do with the Utils.modulate. Can you tell me what these values mean?

"[0 , 200], [1, .625]"

George Kedenburg III

Sure! So basically modulate converts an input from range A to range B. Those values are the two ranges we're converting between. Range A (0,200) tells framer this is the range our input is coming in as. We want the range to start at 0 and end at 200 (thats the point where the oval is fully animated). The second range is what we want to convert it to. So we're essentially telling framer when canvas.y is 0 output 1 and when its 200 output .625. The magic of modulate is that it just automatically figures out all the numbers in between. Did that make sense?

Arvi Raquel-Santos

Yes. I assume 200 is the y coordinate?

George Kedenburg III

Yep, that was just an arbitrary number I picked. It's telling framer that when canvas.y is 200, the oval should be at .625. If you wanted it to be fully animated earlier or later, you could change 200 to any other number.

Matt Bogado

Thanks for the explanation, George. I think I understand utils now :)

Read the entire post on Facebook