The JavaScript behind Apple's product pages.

Apple's product pages are very impressive. Things are animated on scroll, and you can rewind the animation by scrolling back up.

An example of what I'm talking about.

I was mystified and needed to know how they did it. I managed to reverse engineer something similar by poking around their page.

Note: I am not trying to describe exactly what designers / front end engineers at Apple are actually doing.

1. They probably use a library like ScrollMagic.

2. They interpolate way more advanced animations than what I'm showing.

I'm trying to show that it looks like magic, but the JavaScript and CSS that they use are actually very simple.

Summary of how it works

There are scroll listeners on multiple elements.

The user's scroll position gets converted into relative proportion that the user has scrolled through the element (i.e. if the scroll position is a quarter way through scrolling the element, the JS gets 0.25)

The relative proportion gets interpolated into a style.

When scrolling through an element, there's an element with CSS "position: sticky;" so that it stays inside the view, but also would not stay when the user scrolls past the element.

Click the links above to see live examples:

Basic

This is a simple example where you only see the relative proportion inside a sticky element.

Full

This is a full example where you can see how relative proportions can be interpolated into a few styles, which gives rise to pleasing transitions and animations despite their simplicity.