---
title: "How to Create Image Scroll Animations like in Apple, Sony in WordPress?"
url: https://nexterwp.com/docs/create-image-scroll-animations-like-in-apple-sony-in-wordpress/
date: 2024-12-16
modified: 2026-09-17
lang: en
author: "Aditya Sharma"
description: "A product turning in space as you scroll is not a video — it is a few dozen still photos, shown one at a time. The effect on those famous..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Create-Image-Scroll-Animations-like-in-Apple-Sony-in-WordPress_-1024x519.jpg
word_count: 604
---

# How to Create Image Scroll Animations like in Apple, Sony in WordPress?

## Key Takeaways

- Scroll Sequence block plays a set of still frames frame by frame as the visitor scrolls through a full-height section, creating the product-turning effect seen on Apple and Sony pages.
- Nexter Blocks Pro is required, and Scroll Sequence is switched on under Nexter > Blocks in the WordPress dashboard before the block works.
- Images Upload needs frames in playback order, and more frames make the motion smoother while fewer frames make it choppier but load faster.
- Apply To must point to Body or Container that is taller than the screen, because a tracked element shorter than the viewport stays completely blank from the first scroll to the last.

A product turning in space as you scroll is not a video — it is a few dozen still photos, shown one at a time.

The effect on those famous product pages is exactly what Scroll Sequence does: a set of frames captured from a slow rotation or reveal, played back frame by frame as the visitor scrolls through a full-height section.

*For every Dynamic Device setting in one place, see the [Scroll Sequence block guide](https://nexterwp.com/docs/add-an-image-scroll-sequence-in-wordpress/).*

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-image-scroll-sequence/)

## Before You Start

- **Edition:** **Pro** — the Scroll Sequence block needs Nexter Blocks Pro.- **Block to enable:** Scroll Sequence, switched on under **Nexter > Blocks** in your WordPress dashboard.- **Upload the frames in the order you want them played** — a still-camera sequence of a product turning, a scene changing, or a chart building up. More frames make the motion smoother; fewer frames make it choppier but load faster.- **A genuine frame-by-frame sequence** — a product photographed on a turntable, or a reveal animation exported frame by frame, not just a handful of unrelated photos.

## Steps

- Add the **Scroll Sequence** block and upload your frames under **Images Upload**, in playback order.

![The Upload Type options](https://nexterwp.com/wp-content/uploads/2026/09/ss-uploadtype.webp)

- Set **Apply To** for what drives the animation as the visitor scrolls.

![The Apply To options](https://nexterwp.com/wp-content/uploads/2026/09/ss-applyto.webp)

- Set **Apply To** to Body or Container, whichever section should own the effect.

![The Apply To options](https://nexterwp.com/wp-content/uploads/2026/09/ss-applyto.webp)

- Give that section real height — the more scroll room, the slower and smoother the reveal feels.

- Set **Start Offset** and **End Offset** under Style to fine-tune exactly when the reveal begins and ends.

![The Start Offset setting](https://nexterwp.com/wp-content/uploads/2026/09/ss-offsets.webp)

> ***Whatever you point Apply To at needs to be taller than the screen.** Measured: a tracked element shorter than the viewport never draws a single frame — the canvas stays completely blank for the whole page, from the first scroll to the last. Give the tracked element real height, either with its own content or a minimum height setting.*

## How It Behaves

- **Enough frames for smooth motion.** A turntable shot every few degrees, or an export at a consistent frame interval, reads as continuous; a handful of unrelated angles reads as a slideshow.- **A tall section.** The more scrollable height behind the sequence, the slower and more deliberate the reveal feels — a short section rushes it, and a too-short one shows nothing at all, measured.- **Start and End Offset** let you hold the final frame a little longer, or start the animation slightly before the section reaches the top of the screen.- Consider pairing the sequence with a heading or call-to-action that appears once the reveal finishes, using Apply To: Container to keep both in the same scoped section.

## Limitations

- This is a still-image effect, not video — motion blur, audio and continuous playback are outside what the block does.- A convincing reveal needs genuinely sequential source frames; the block cannot interpolate between unrelated images.- Whatever you point Apply To at needs to be taller than the screen. Measured: a tracked element shorter than the viewport never draws a single frame — the canvas stays completely blank for the whole page, from the first scroll to the last. Give the tracked element real height, either with its own content or a minimum height setting.

## Troubleshooting

### The motion looks jerky

Add more frames to the sequence, spaced more closely together in the original capture or export.

### The reveal happens too fast to read

Give the tracked section more height, or adjust Start Offset and End Offset to spread the same frames over more scroll distance.

### Nothing appears in that section at all

The section is probably shorter than the screen — measured, this leaves the whole thing blank. See the [container guide](https://nexterwp.com/docs/add-image-sequence-in-a-container-in-wordpress/).

## Related Docs

- [Scroll Sequence block guide](https://nexterwp.com/docs/add-an-image-scroll-sequence-in-wordpress/)- [One container](https://nexterwp.com/docs/add-image-sequence-in-a-container-in-wordpress/)- [Load from a URL](https://nexterwp.com/docs/create-image-sequence-scroll-animation-from-a-url-in-wordpress/)- [Page body](https://nexterwp.com/docs/add-image-sequence-on-the-page-body-in-wordpress/)

## Frequently Asked Questions

**Q: What do I need before creating an image scroll animation in WordPress?**
A: The Scroll Sequence block in Nexter Blocks Pro is the core requirement, and it has to be switched on under Nexter > Blocks in your WordPress dashboard. The effect also needs a genuine frame-by-frame sequence, not random photos, because the animation is built from still frames played back as the visitor scrolls. More frames usually make the motion smoother, while fewer frames load faster but look choppier.

**Q: How many images should I use for a smooth scroll sequence effect?**
A: More frames make the motion smoother, and fewer frames make it choppier but load faster. That tradeoff matters because Scroll Sequence plays still photos one at a time as the page scrolls, so frame spacing directly affects how continuous the motion feels. A turntable shot every few degrees or a consistent export interval reads much better than a handful of unrelated angles.

**Q: Why does my image scroll animation look jerky?**
A: Jerky motion usually means the source sequence does not have enough frames or the frames are too far apart. The page calls out that adding more frames, spaced more closely together in the original capture or export, improves the result. Since Scroll Sequence is frame-by-frame playback, it cannot smooth over gaps between unrelated images.

**Q: Why is my reveal happening too fast to read?**
A: The section behind the sequence is probably too short, so the same frames are being compressed into too little scroll distance. Giving the tracked section more height slows the reveal down, and Start Offset plus End Offset let you spread the animation across a wider part of the scroll. That also helps if you want to hold the final frame a little longer.

**Q: Why is nothing showing in my image sequence section?**
A: The tracked element is likely shorter than the viewport. When Apply To points at something shorter than the screen, the canvas stays completely blank for the whole page and never draws a frame. The fix is to give that element real height, either with its own content or a minimum height setting.

**Q: Should I apply the scroll sequence to Body or Container?**
A: Body works when you want the effect tied to a larger page section, while Container keeps the sequence scoped with nearby content like a heading or call-to-action. The page specifically suggests using Apply To: Container when you want both pieces to live in one section. Either way, that tracked area needs to be taller than the screen or nothing will render.