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?
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.
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. :-)
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.
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/