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

What is Framer? Join the Community
Return to index
Benjamin Den Boer
Posted Aug 01 - Read on Facebook

Hey guys,

New example! People often request simple examples of common mobile interactions. I've just added a simple draggable swiping example.

Some nifty little things in this example:
- maxDragFrame
- Prints distance dragged
- Animates second layer based on distance dragged

Download .framer for Framer Studio:
http://cl.ly/WP2S

View it in your browser:
http://examples.framerjs.com/#draggable-swipe.framer

Happy prototyping! :)

7 Comments

Fran Pérez

Thanks man!

Johannes Eckert

Beautifuk! You can add That to the mobile dropdown as well.

Aurélien Foutoyet

Thanks !

Rob Jones

Nice. Had not seen "maxDragFrame" (topScreen.draggable.maxDragFrame) .

Seems like there are so many properties not documented in http://framerjs.com/docs.html!! Seems like diggin through the Framer source is *really* important :)

James Caruso

Benjamin Den Boer, I'm having some difficulty understanding the function here:

topScreen.draggable.maxDragFrame = topScreen.frame
topScreen.draggable.maxDragFrame.width *= 2

If you were to set that to swipe from the opposite direction, how would you do that? I'm still a bit fuzzy on this.

Johannes Eckert

Someone has to explain maxdragframe to me again :-^

Anton Kartashov

Cool! Thank you. But on phone it's breaking down sometimes. Perhaps because of using "event.x". You can use "event.pageX" instead.

Read the entire post on Facebook