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/
Having the same issue. I hope you get an answer :)
Hey Arvi, how's this?http://share.framerjs.com/ky1klyaiaik6/
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/
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]"
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?
Yes. I assume 200 is the y coordinate?
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.
Thanks for the explanation, George. I think I understand utils now :)