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!
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/
Here are the next steps for that specific interaction :)
And the finished one (or at least as far as I took it):