Our task was to introduce the new fifth-generation iPad Air to the world on Apple.com. The aim was to create an engaging product learning experience that communicated the power of Apple silicon inside the device and vibrant, striking colors on the outside.

Our creative approach was to embrace the “Air” portion of the product’s identity and to make that aspect, along with power and color, come alive in a digital context. The concept was to make the product not only float vertically, but move into z-space, with each scroll revealing a new piece of the iPad Air story. To achieve this, we employed a combination of techniques including inline videos, tied-to-scroll animations, 3D image sequences, and gradient text treatments.

We set out to create a web experience that was as light, bright, and full of might as the device, that would execute brilliantly on viewports of any size, and was scalable to deliver the same magical experience to our locales worldwide.

Five unique visual techniques were employed: inline videos, tied-to-scroll animation, moving 2D images, animated 3D image sequences, and activated gradient text treatments to bring the new iPad Air to life.

The customer’s attention is first captured by an inline video showcasing its details while scrolling headlines highlight its key features. A dynamic tied-to-scroll animation sequence follows, highlighting the powerful M1 chip.

As the customer floats down the page, a unique purpose-built code allowed 2D images of the device to rotate, scale, and transition in and out of Z-space, giving the illusion of 3D motion. We also created animated 3D images sequences where accessories like Apple Pencil and Magic Keyboard come to life and click and fold into place with iPad Air. And throughout the page, unique gradient text treatments are activated when coming into view, drawing emphasis and attention to key ideas.

We also employed an iPad-specific handwritten font used to call out details and capabilities shown on screens. These handwritten elements are a nod to the capability of Apple Pencil, and they too traveled in z-space alongside the iPad hardware, retaining a strong connection between copy and image.