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

What is Framer? Join the Community
Return to index
Josh Rule
Posted Sep 17 - Read on Facebook

In the 4th Framer Tutorial at the end Jay Stakelon adds a conditional to check to see if the scroll event is not moving. If it's not moving then it will fire a bunch of animations. The problem is that it takes way to long for the scrolling to stop. Is there a better property to check for in the conditional than the isMoving property? You can see the conditional on line 17 here: http://share.framerjs.com/tluq1s83z9zt/

8 Comments

Joshua Tucker

Hey Josh! Based on what you wrote, I would say you could use Events.ScrollEnd – it's fired when you release mouse click while scrolling or take your finger off the screen while scrolling.

If you needed to delay the animations a little bit after ScrollEnd, you could use Utils.delay.

Josh Rule

hmmm...tried this a bit but was unable to figure out the logic to use scrollEnd. I tried to set a isScrolling flag with ScrollStart and ScrollEnd but ScrollStart seems to fire just on a click with out actually scrolling. so that didn't yield the desired results for me.

Josh Rule

I got it to work with just using Events.Scroll to set a flag to true...and then Events.ScrollEnd to set the flag to false...the image animation then just checks the flag before firing. Works much better!!! thanks! http://share.framerjs.com/4aelphopb34k/

Jordan Robert Dobson

Joshua / Josh Rule / Jay - Here's how I'd solve it instead. It shouldn't matter that it's still moving... you shouldn't block the tap/click if you're done dragging.

http://share.framerjs.com/0n9c5zrjw1vh/

Documentation on it here: http://framerjs.com/docs/#layer.draggable.isDragging

Josh Rule

thanks Jordan Robert Dobson that's definitely cleaner!

Joshua Tucker

Jordan Robert Dobson Thanks for following up! That was were I was headed with a response :).

Jay Stakelon

I learned something in this thread :) thanks Joshua Tucker!

Jordan Robert Dobson

Josh Rule - Don't forget all the draggable properties (at least I'm nearly positive it is all) apply to the the scroll.content layer... so look at those layer.draggable.___ as well as what you get with ScrollComponent. There is also the "change:___" too for scroll.content as well.

Read the entire post on Facebook