Hey team! Loving using Framer, but have a question that I'm not sure about how to answer.
Creating a website mockup for a client, and want to have certain animations fire off based on the scroll position of the page.
How would you go about accomplishing this in Framer? I've tried creating an "if then" statement, but because it's not attached to anything, it's creating a problem.
You want to listen to either an onMove, onScroll, onDrag, on "change:y" or similar to fire the events.
Inside those event listeners you setup you can include your code for handling various conditions.
Thanks for replying! So, the issue I've seemingly created is that because I'm trying to create a scrollable that looks like a website, getting the scroll position is always 0.
Is there a way to get the position of elements from inside a scrollable area? As in how far from the TOP that item is?
Sorry, new to Framer :p
My "scrollable container" is called "windowPane"
Inside that, my content scrolls. I want to get how far the content inside that has scrolled, and then fire off events based on that.
The problem is that doing a windowPane.onScroll doesn't do anything, because obviously, windowPane itself isn't scrolling.
Figured it out :D
windowPane.onScroll -> print windowPane.scrollY
if windowPane.scrollY > 450 push_notifications.animate properties: opacity: 0 time: .2 else push_notifications.animate properties: opacity: 1 time: .2
Here's an example for you:
You also found another option. :D
The onScroll event passes you the event and contentLayer as arguments... which are entirely optional.
Is it possible to have multiple IF THEN statements?
I"m able to deck IF scrollY <= 400, and then else if scrollY >= 401, but I can't detect else if scrollY >= 1000
What would be great if I could do "if scrollY <=800 & if scrollY >= 1000" or similar
Nevermind, figured that out too :D
else if (windowPane.scrollY >= 401) and not (windowPane.scrollY >= 800)