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

What is Framer? Join the Community
Return to index
Loren Baxter
Posted Oct 16 - Read on Facebook

What's the best way to implement spring animations in production HTML / CSS / JS? I'm wondering how to make my nice Framer prototype real, and not finding good frameworks.

9 Comments

Samrat Jeyaprakash

Animate CSS is not a bad start. Modify it as you see fit. But yes I agree it's been hard to find a good one.

Seoh Char

+1 to CSS transition if you could drop ANCIENT browsers. but if not, velocity.js could be an answer. just like this `element.velocity({ width: 50 }, [ 250, 15 ]);`

Loren Baxter

Sam They don't offer spring easing, unfortunately, and the animations just feel a little off to me. I'm looking for animations that are metaphorically "pixel perfect".

Loren Baxter

Cha That looks like a nice solution for two-variable spring easing (tension, friction). Gonna give it a shot. Thanks!

Loren Baxter

FWIW Koen also suggested Velocity.js a few months ago (I just didn't find it earlier). https://www.facebook.com/groups/framerjs/permalink/527589137368162/?comment_id=528149063978836&offset=0&total_comments=8

Koen Bok

Yup, Velocity is the way to go.

Koen Bok

(I helped the Velocity guys implementing the same spring physics Framer uses under the hood)

Loren Baxter

Koen Thanks for doing that :)

Dominik Porada

I often use Facebook’s Rebound: http://facebook.github.io/rebound/

Read the entire post on Facebook