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

What is Framer? Join the Community
Return to index
Jono Hunt
Posted May 22 - Read on Facebook

I've been muddling though Framer for a while, and at the moment I'm trying to recreate the horizontal jiggle animation when entering details incorrectly logging in to iCloud.com http://d.pr/v/CABp

It seems there's a few ways of doing it. What's the best way to get it similar/close to iCloud.com's?

4 Comments

Balraj Chana

Have a look at the spring animation curves. It's probably the closest you can get to simulation.

Essentially any curve can do it as you're just animating the x positions using ease out. Chaining the animation can be done using on.AnimationEnd.

Benjamin Den Boer

Hey Jono Hunt - here's a way you could go about this: http://share.framerjs.com/1vomn0kygmtg/

You can store two animations in variables that you chain using the AnimationEnd events. Both move a layer in an opposite direction and have a really short duration. Then you can also stop the animations with a delay. :-)

Andreas Wahlström

Looks like the "length" of the shake decreases over time. So maybe use a variable for the offset and subtract from it on each animation end.

Jono Hunt

Thanks a lot for the help, it was really useful :)

As Andreas Wahlström said, I wanted the shake to 'tail off'.
I'm not sure how to subtract from each animation with a variable, but I managed to get it pretty close to how I wanted it here http://files.iconaholic.com/framer/button-shake-test/

Read the entire post on Facebook