Creating the iOS Icon Jiggle / Wobble Effect in CSS


#1

If you’ve ever wanted to re-create the iOS wiggle or wobble effect, this tutorial will help you out. If you have any questions, this thread is your…indifferent friend :deranged:

Cheers,
Kirupa


#2

I read about this in your book “Creating Web Animations” and I think you’ve done a pretty decent job of capturing the jiggle/wobble effect but you are just half done. Applications, other than those installed on the device, also have a small circle with an “X” in it, displayed in the upper left hand corner,which also jiggles/wobbles, to allow the user to remove that application. How would you go about including that effect as well?
My approach is shown at http://www.boughner.us/kirupa/ I would be interested in seeing how my approach would differ from yours.


#3

Your approach is spot-on. That’s exactly how I would have done it as well :slight_smile:


#4

Thank you for your comments. When I first did this, I noticed on the very first image, that the small dismiss button was hardly moving. Then I realized that the transform origin for that one was very close to the placement of the button and it made sense to me why it wasn’t moving much. I then moved the transform origin to the right hand side from its original position on the left side and that was a huge improvement.