# Creating the iOS Icon Jiggle / Wobble Effect in CSS

**URL:** https://forum.kirupa.com/t/creating-the-ios-icon-jiggle-wobble-effect-in-css/331950
**Category:** web dev
**Created:** [December 6, 2013, 12:58am UTC](https://forum.kirupa.com/t/creating-the-ios-icon-jiggle-wobble-effect-in-css/331950 "2013-12-06T00:58:28Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [December 6, 2013, 12:58am UTC](https://forum.kirupa.com/t/creating-the-ios-icon-jiggle-wobble-effect-in-css/331950/1 "2013-12-06T00:58:28Z")

</div>

> **[Creating the iOS Icon Jiggle / Wobble Effect](https://www.kirupa.com/html5/creating_the_ios_icon_jiggle_wobble_effect_in_css.htm)**
>
> In this deconstruction, learn to re-create the iOS icon wobble or jiggle effect using just CSS Animations and a handful of clever tricks.

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

---

<div class="post-metadata">

### Author: ![REB\_412](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/reb_412/32/9233_2.png) [@REB\_412](https://forum.kirupa.com/u/REB_412)
#### Post date: [August 3, 2018, 7:03pm UTC](https://forum.kirupa.com/t/creating-the-ios-icon-jiggle-wobble-effect-in-css/331950/2 "2018-08-03T19:03:23Z")

</div>

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/](http://www.boughner.us/kirupa/) I would be interested in seeing how my approach would differ from yours.

---

<div class="post-metadata">

### Author: ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [August 3, 2018, 9:06pm UTC](https://forum.kirupa.com/t/creating-the-ios-icon-jiggle-wobble-effect-in-css/331950/3 "2018-08-03T21:06:30Z")

</div>

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

---

<div class="post-metadata">

### Author: ![REB\_412](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/reb_412/32/9233_2.png) [@REB\_412](https://forum.kirupa.com/u/REB_412)
#### Post date: [August 3, 2018, 11:14pm UTC](https://forum.kirupa.com/t/creating-the-ios-icon-jiggle-wobble-effect-in-css/331950/4 "2018-08-03T23:14:22Z")

</div>

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.
