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

What is Framer? Join the Community
Return to index
Wouter Van de Kamp
Posted Feb 27 - Read on Facebook

Hi all,

I recently noticed something weird when prototyping. I hope someone can explain to me why this is happening. I'm working on some scroltopointl webpage. To do so I'm using the code below.

What I would like to do is change some elements when my scroll is between 300 and 450 and if my animation ends. So my if statement would be better if I could do something like this:

if scroll.scrollY > 300 && scroll.scrollY < 450 && Scrollanimationdidend == true

Not sure if scrollanimationdidend supports a boolean. Just wondering about this.

For now I tried to solve it differently as you can see in the embedded picture. I first check if my scroll is between 300 and 450 and if so, he should execute the function if the scrolltopoint animation ended.

This works fine for the first part, but the problem is the following:
I got a couple more scrolltopoint objects in my code outside the 300 and 450 range but when my scrolltopoint objects get executed outside these ranges it doesn't print ""scroll between 300 and 450" but it does print "animation_end".

Why is animationdidend always being triggered even when it is inside an if statement that's not true?


Floris Verloop

Once you start listening to an event, it will fire every time that event occurs on that layer (despite where you started listening to it). The function lives inside of the layer, not inside the if statement.

In your case, you add an event listener to the scroll layer only when it meets certain conditions. After that the ScrollAnimationDidEnd will fire every time that event occurs on that layer.

This is why there's also an "off()" function that will remove event listeners.

Ben Rodenhäuser

your code says: if some condition holds start listening for event X. So if the condition holds only once at runtime the listener will become active. And it will remain active even if your condition no longer holds. That seems to be the problem here.

Ben Rodenhäuser

you could perhaps solve this by reversing the logic, i.e. Embedding the conditional in the event listener.

Read the entire post on Facebook