Code tutorial - how to build a scroll-to-action sequence like Apple’s.

Frames instead of video, canvas rendering, scroll binding: step by step to an Apple-style scroll sequence - with code and our Deliver Films project as reference.

Published: Sep 2, 20255 min read

Scroll-Sequenz mit gestapelten Karten und Fortschrittsanzeige.

Apple has perfected it: you scroll on a product page and instead of a static site, a small production unfolds. Take the AirPods: light reflections, rotations, perfect transitions. This kind of scroll-to-action sequence is more than show. It keeps users on the page longer, makes products more impressive, and radiates premium brand quality.

At INSYNC, we’ve applied this principle for Deliver Films, among others - a production studio that wanted to present its expertise online as cinematically as on the big screen. How does it work technically? Let’s look at the fundamentals.

Key takeaways

Apple scroll is not video but frame-by-frame on a canvas.
Two core ideas: canvas rendering and scroll binding.
Preloading decides whether it feels as smooth as film.

The idea behind the animation

First things first: this is not a video. If it were, it couldn’t be bound to the scroll position. Instead, a sequence of individual images (frames) is loaded and shown one after another as you scroll. That’s what creates the impression of a seamless animation.

The technique is based on two core ideas:

1. Canvas rendering → the frames are drawn onto a <canvas> element that stays fixed on the page.

2. Scroll binding → depending on how far the user has scrolled, the matching frame is loaded and displayed.

Apple uses hundreds of individual frames - switching so fast thanks to optimized preloading that it looks like a video.

Apple AirPods Scroll-Sequenz als Beispiel

Basic structure in HTML & CSS

We need three things: scroll space, a canvas, and some text. The CSS keeps the canvas fixed while you scroll:

html

<!-- HTML -->
<body>
  <canvas id="scrollAnimation"></canvas>
  <p id="copy">Deliver Films</p>
</body>

/* CSS */
html, body {
  margin: 0;
  height: 500vh; /* viel Scrollplatz */
  background: black;
}

canvas {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100vw;
  max-height: 100vh;
}

Preparing the frames

We export a sequence of images (e.g. 120 frames from a 3D animation). They live in a folder and are named like this:

other

seq_0001.jpg
seq_0002.jpg
...
seq_0120.jpg

JavaScript - connecting scroll and frames

Now comes the magic. What happens here:

We calculate how far the user has scrolled.

We convert that value into a frame index.

Then we load and draw exactly that image onto the canvas.

javascript

const canvas = document.getElementById("scrollAnimation");
const context = canvas.getContext("2d");

const frameCount = 120;
const currentFrame = (i) =>
  `./frames/seq_${i.toString().padStart(4, "0")}.jpg`;

const img = new Image();
img.src = currentFrame(1);
canvas.width = 1920;
canvas.height = 1080;

img.onload = () => context.drawImage(img, 0, 0);

const updateImage = (index) => {
  img.src = currentFrame(index);
  img.onload = () => context.drawImage(img, 0, 0);
};

window.addEventListener("scroll", () => {
  const scrollTop = document.documentElement.scrollTop;
  const maxScrollTop = document.documentElement.scrollHeight - window.innerHeight;
  const scrollFraction = scrollTop / maxScrollTop;
  const frameIndex = Math.min(
    frameCount - 1,
    Math.floor(scrollFraction * frameCount)
  );

  requestAnimationFrame(() => updateImage(frameIndex + 1));
});

Ablauf: Scroll-Position wird zu Frame-Index und gerendertem Frame.

Optimization

For smooth playback, you need preloading and compression. Apple solves this with content delivery networks (CDNs) and heavily optimized assets. A simple variant:

This way, the frames are already cached when the user scrolls.

javascript

const preloadImages = () => {
  for (let i = 1; i < frameCount; i++) {
    const img = new Image();
    img.src = currentFrame(i);
  }
};
preloadImages();

Our project: Deliver Films

With Deliver Films, we took the whole thing to the next level:

Custom 3D renderings instead of photos.
Seamless transitions between the scroll sequence and other page elements.
Storytelling focus: every movement was dramaturgically tuned to the brand - not just an effect.

The result: a website that instantly screams „cinema" and wins customers over from the very first scroll. Take a look at the final result.

Conclusion

At its core, an Apple-style scroll-to-action sequence is based on a simple principle: many individual frames, one canvas, and the scroll position as the controller.

The real art, however, lies in embedding this technique into a story - the way we did with Deliver Films. Only when technology and storytelling go hand in hand do you get a website that doesn’t just impress but leaves a lasting impression.

Important: the code here is a heavily simplified version. In practice, we work with hundreds of lines of code - debug scripts, performance optimizations, clean asset compression, precise trigger points, and fallbacks for different devices. It’s this attention to detail that makes a sequence run truly smooth, performant, and stable across all platforms.

3D scroll on Wix Studio

Possible? We tried it.

Making-of FRAMEN

An enterprise website, rebuilt.

Migrations-Flow von Alt zu Neu mit Schutzschild für erhaltene SEO.

Website relaunch without SEO loss: The checklist.

The biggest relaunch mistake: you build a prettier site and lose half your rankings. How to secure visibility, URLs, and traffic - step by step.

Guide

By Robert Siemens

Zwei leuchtende Knoten mit Lupe und Funke symbolisieren SEO und GEO im Vergleich.

SEO vs. GEO: How your website shows up in AI answers.

Your customers no longer just google. They ask ChatGPT, Perplexity, and Gemini. Whoever does not show up there does not exist for them. How GEO works - and how it differs from classic SEO.

SEO & GEO

By Robert Siemens