Chapter 12. The iOS Icon Wobble/Jiggle

When you press and hold an icon on your iOS (iPhone/iPad/iPod) device’s home screen, you’ll get the ability to rearrange the icons or uninstall the app associated with it. That’s really boring and not the interesting part I want you to focus on. The interesting part is what these icons do as a result of you pressing and holding. They wobble and jiggle (aka wobiggle) around. It’s pretty awesome.

Anyway, I thought it would be fun to re-create that effect. After about 30 minutes of fiddling around, you can see my attempt by visiting http://bit.ly/iOSWobble or by looking at Figure 12-1:

Figure 12-1. Each of these icons is wobbling around

In my very humble opinion, this implementation is really really close to what you see on an iOS device.

Anyway, in this deconstruction, you will learn all about how this effect works. It’s going to be a lotta fun. Before you proceed, just make sure you are up-to-date on working with nth-child selectors. Otherwise, your fun will be lessened by a great deal of confusion and possibly crying. You have been warned.

The Full HTML and CSS

Before we go any further, let me throw at you all of the HTML and CSS that makes this example work:

<!DOCTYPE html>
<html>

<head>
  <title>iPhone / iPad Icon Wobble Effect</title>
  <style>
    body {
      background-color: #EFEFEF;
      padding: 25px;
    }

    

Get Creating Web Animations now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.