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

What is Framer? Join the Community
Return to index
Kevin Mao
Posted Apr 25 - Read on Facebook

Here's a solution for how to prevent a button (with a downstate/pressed state) from activating its downstate or function while dragging (it's in a vertical scroll component within a horizontal page component).
Posting this in case it helps anyone, because I couldn't find what I was looking for in the group.

The button functions look like this:

button.onTouchStart ->
 button.animate
  #animationstuff

button.onTouchMove ->
 button.stateSwitch("default")

button.onTouchEnd ->
 button.animate("default")
 if pageComponent.content.x is 0
  Utils.delay 0.2, ->
   #buttonfunction

This makes it feel like some apps where you can press and hold down on a button, see the downstate, but start dragging without activating the button. I tried a ton of stuff with ignoreEvents and checking for isMoving to no avail.

Please let me know if there's a better solution with any part of the code or to make it look better!!

keywords for people searching: stop stopping scrolling layer

3 Comments

Jordan Robert Dobson

This looks legit. I've always struggled with this and this I think is much cleaner than my hacked solutions.

Sigurd Tapio Mannsåker

Clever, the default state switch method hadn't occurred to me :) Here's mine, which also fixes a detail which always bugs me: if you're scrolling, I don't want the down state displayed. So I add a 0.1s-ish delay to the touch response so if touchmove fires almost simultaneously as touchstart it doesn't flicker:

https://framer.cloud/LmBWD/

Kevin Mao

Updated: You can use button.onTouchMove instead of the page and scroll component functions!

Read the entire post on Facebook