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

What is Framer? Join the Community
Return to index
Braden Kowitz
Posted Mar 29 - Read on Facebook

I've got this tricky bug I was hoping this community might be able to help me with. I have a scrollComponent with tap targets inside of it. It works reasonably well, but after a scrolling swipe, the scrollComponent takes a while to come to rest, and during that time the taps don't propagate to underlying elements.

Is there some way to get these tap events to propagate while scrolling physics are active? Or is there some way to get the scrollComponent to finish scrolling faster? (Speed makes it scroll slower, but doesn't make it finish up faster.)

Here's a simple demo of the issue:
http://share.framerjs.com/j8xa29o9hgsq/

I'm testing in user studies tomorrow so I hope I can find a good fix. Thanks for the help!

3 Comments

Koen Bok

Hey Braden! The issue is indeed that the physics are still running here. In theory, a spring never finishes, so you test it for a certain velocity threshold and just decide it stops.

You can tweak this value with "tolerance" in the spring and you can set the spring values for a scroll component with scroll.content.draggable.momentumOptions and scroll.content.draggable.bounceOptions. See this example: http://share.framerjs.com/o0vkkb11v6js/ This is also cool when you want to tweak the physics of the dragging behavior entirely.

But an easier (and better) way could be to just check in the click handler if the scroll draggable has a higher velocity then x. But that is a little deeper in the framework, and this came up before so I just fixed it. If you do File -> Update Framer it will behave in this new way. You can optionally tweak the velocity with layer._cancelClickEventInDragSessionVelocity.

If you'd like to see how it works you can check this commit: https://github.com/koenbok/Framer/commit/293c29cfc19f671128aa99f821877c8427f2700e

Braden Kowitz

Thanks! I did just fix this behavior by messing with the draggable options. It took me a while to realize that draggable options were available in the ScrollComponent.content layer because it's not documented well.

And thanks for the suggestion for changing up the tolerance where clicks are canceled based on velocity. That's super helpful!

Koen Bok

Noted :-) We'll do another pass on that.

Read the entire post on Facebook