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

What is Framer? Join the Community
Return to index
Arturo Goicochea
Posted Jun 22 - Read on Facebook

Hey guys, need some help. Hope you can help :)

I'm struggling with a draggable layer.

I'm doing a few things with it:

- On touch start:
--- 2 layers animate (opacity 0 to 1) and appear
--- the page component scroll is disabled

- on touch end
--- 2 layers animate (opacity 1 to 0) and disappear
--- the page component scroll is enabled

The one thing I can't get is to return the dragged layer to it's original position if it's not dragged to the end.

Also, I'm having inconsistent results with the listeners, as sometimes the layers stay "on" (don't animate back to opacity 0).

Here is the project: http://share.framerjs.com/9mmmibt5k9di/

Thanks in advance!

3 Comments

Floris Verloop

You can easily check if the layer is dragged far enough with an "if" statement. I'd also listen to "DragStart" and "DragEnd" so animations won't conflict. Here's an updated example → http://share.framerjs.com/fbwaqennavkl/

Arturo Goicochea

Here are the next steps for that specific interaction :)

http://share.framerjs.com/njzw357uw744/

Arturo Goicochea

And the finished one (or at least as far as I took it):

http://share.framerjs.com/zimtodclchvb/

Read the entire post on Facebook