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

What is Framer? Join the Community
Return to index
Julien Perrière
Posted Oct 15 - Read on Facebook

Hey everyone, first post so it’s a good time to thank all of you for all the help and ressources that are being posted on here. Great community.
I’ve been working on this thing and got stuck: on DragStart the “bubble” animates to the state “show”. Then on DragMove, it follows the “handle”. Problem is, DragMove usually starts before the animation between the two states is complete. This results in having the not-completely-scaled bubble following the “handle”.
How would you guys do to have this thing working? Meaning : having the bubble switching state while following the handle with 2 different curves (ease for switching states, spring for dragging)?

Here’s what I have so far : http://share.framerjs.com/s7uppzwa4kba/

Thanks a lot!

7 Comments

Jordan Robert Dobson

How is this?

Jordan Robert Dobson
Jordan Robert Dobson

Basically just set a global var that is your state transition time. Use that to set a delay to set a flag to true...

Jordan Robert Dobson

You CAN run two animation simultaneously but if you're already animatiing rotation... and then you call another rotation animation... it will stop the previous animation where it was when the new animation was called and it will also stop everything that was set to animate as part of that group. That's why you lost the scale animation.

Marc Krenn

Holy shit, that took me way longer than expected! :)

Came up with about five different, really complicated approaches, but my final solution is actually super simple and just works®: Instead of using states, I'm using two normal animations simultaneously, one for rotation and scale and another one for translation (midX, midY).

http://share.framerjs.com/pq4788xabmtm/

EDIT: Ha! Next time I'll refresh facebook before wasting my time on an already solved problem ;)

EDIT2: What a day! Seems like my solution may actually be more elegant than Jordan's (in some regards) ;) #notacompletewasteoftime

Julien Perrière

This is great guys, both solutions work, super interesting! This is part of a little thingy that I'm working on, will post it when it'll be ready. Thanks again :)

Marc Krenn

Fused both solutions into the ultimate one :P : Using states like Jordan but without relying on Utils.delay and the extra boolean.

http://share.framerjs.com/x2oagw5l9a6m/

Read the entire post on Facebook