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

What is Framer? Join the Community
Return to index
Slghtr Khari
Posted Mar 18 - Read on Facebook

I find myself writing the same code again and again. this can't be a best practice...
How could I shorten the following simple animation?

3 Comments

Patrick Hansen

You could try writing an animation function where you can re-use it applied to your desired layers - you can still provide custom/unique properties per layer as well. You just add those variables as needed. Here is an example. But I only run the animation once in the example. You'll have to refresh to restart them in this demo. But you can download the project and reference the code to see how I did it and apply a reverse one to restart it again like yours. http://share.framerjs.com/7msqtxnl1enx/

Slghtr Khari

Patrick Hansen Well THAT is very helpful! Thank you :) I assume the same thing works with click animations, right? getting into this habit is going to save me crazy amounts of time :) Thanks!

Patrick Hansen

Yes, you can run that animation on a click event. Just place it within the click event like: myButton.on Events.Click, ->
myAnimation(circle, 800, 2, "spring(100,10,20)")

Read the entire post on Facebook