O'Reilly logo

Creating Web Animations by Kirupa Chinnathambi

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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;
    }

    

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required