Creating scroll animations similar to Apple’s AirPods Pro page

Apple’s Implementation of the scroll animation

CSS position: sticky

My first idea was that they utilized position: sticky for styling the page since every image or frame sort of “sticks” to the area being displayed until a certain scroll position is achieved and is then replaced by a different frame.

Canvas Element

After opening up my developer console, I realized that the website was using the <canvas> HTML element which made it clear that each image was being replaced by another based on the scroll position. But the copy on the page had some sticky elements to it primarily to make it be able to stick to the center and fade out after it was scrolled past (see below).



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store