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

What is Framer? Join the Community
Return to index
Wilson Miner
Posted Aug 12 - Read on Facebook

Playing with draggable.calculateVelocity() to rotate cards based on how fast you drag them around. Using Utils.modulate (https://github.com/koenbok/Framer/blob/master/framer/Utils.coffee#L255) to map the x/y velocity to rotation values while limiting them to a maximum rotation so they don't flip around when the velocity spikes. Pretty impressed at how responsive it is in a web view on an iPad!

21 Comments

Wilson Miner

The shadowX/Y also gets moved around on DragMove based on how far you drag it away from the start point. Pretty hacky way to simulate a light source, but it works for now.

Brandon Souba

This is great! Can you post the code?

Wilson Miner

Brandon: I would have put it on the original post, but FB won't let me upload a video and a file to the same post! Here it is: http://cl.ly/1X3p091z3E0I

Pasquale D'Silva

This is great Wilson!

Brandon Souba

Thanks!

Wilson Miner

I started out wanting to handle more things in the states, but I gave up on handling the dynamic drag values in the dragging state. Right now the states just set the scale and shadow distance and the rest gets computed in the DragMove event. I'd be interested if anybody has any tips for handling dynamic values in states.

Wilson Miner

Also, I've made this same demo in like 5 different interaction tools lately, and it was the easiest/fastest in Framer thanks to draggable.calculateVelocity and Utils.modulate. Both super-handy and efficient. Thanks Koen!

Christophe Tauziet

Awesome stuff!

Aaron Carámbula

Nice!

Luka Marčec

This is really amazing!

Blake Engel

What were the other 5 tools you tried to make it with?

Wilson Miner

Blake: Quartz Composer, vanilla HTML/JS, Xcode/Swift, Form and Framer. This may be a cry for help.

Johannes Eckert

wow! this deserves a spot on framer examples!!

Adam Laskowitz

This is awesome

Ed Chao

amazing.

Min-Sang Choi

Super! :o

Daniel Jimenez Nassar

Cool stuff!!!!

林振宇

this is really cool, mate!

Cameron Wu

Rasmus Andersson

Science!

Read the entire post on Facebook