---
title: "How to Add an Image Scroll Sequence in WordPress?"
url: https://nexterwp.com/docs/add-an-image-scroll-sequence-in-wordpress/
date: 2024-12-16
modified: 2026-09-17
lang: en
author: "Aditya Sharma"
description: "A video autoplays whether the visitor is ready or not. A scroll sequence waits for them. Scroll Sequence swaps between your uploaded images, frame by frame, exactly in step with..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-an-Image-Scroll-Sequence-in-WordPress_-1024x519.jpg
word_count: 571
---

# How to Add an Image Scroll Sequence in WordPress?

## Key Takeaways

- Nexter Blocks Pro activa el bloque Scroll Sequence, que sincroniza imágenes subidas fotograma por fotograma con el desplazamiento: al bajar avanza y al subir retrocede.
- Apply To necesita apuntar a un elemento más alto que la pantalla; si el elemento es más corto que el viewport, el lienzo no muestra ningún fotograma y queda en blanco.
- Reverse Order no funciona en el bloque, así que las imágenes se cargan en el orden de subida o se reenvían en orden inverso para reproducir la secuencia hacia atrás.

A video autoplays whether the visitor is ready or not. A scroll sequence waits for them.

Scroll Sequence swaps between your uploaded images, frame by frame, exactly in step with how far the visitor has scrolled — scroll down and the sequence plays forward, scroll up and it plays back.

[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.

https://www.youtube.com/watch?v=rVu6g5q8w3I

## 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 **Start Offset** and **End Offset** under Style if the animation should begin or end a little early or late.

![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.*

## Where The Animation Can Live

| Apply To | Tracks scroll through | Guide |
| -------- | --------------------- | ----- |
| Body | The whole page | [Page body](https://nexterwp.com/docs/add-image-sequence-on-the-page-body-in-wordpress/) |
| Container | One Nexter Container block | [One container](https://nexterwp.com/docs/add-image-sequence-in-a-container-in-wordpress/) |
| Inner Container | One column inside a Container | [One inner container](https://nexterwp.com/docs/add-image-sequence-in-an-inner-container-in-wordpress/) |

## How It Behaves

- **The tracked element must be taller than the screen, measured precisely.** **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.- **Frames can come from your Media Library, or from a numbered URL pattern** on your own server — the second option is useful for very large sequences you don't want sitting in your Media Library. See the [URL sequence guide](https://nexterwp.com/docs/create-image-sequence-scroll-animation-from-a-url-in-wordpress/).- **Reverse Order does not currently work.** Measured: turning it on and off produced an identical sequence, in the same order, at the same scroll position — the setting is not read anywhere in the block. To play a sequence backwards, upload the frames in reverse order instead.- **Missing frames in a URL sequence are skipped silently**, with no error and no gap left behind — measured. See the [URL sequence guide](https://nexterwp.com/docs/create-image-sequence-scroll-animation-from-a-url-in-wordpress/).

## Limitations

- **Reverse Order has no effect — measured.** Upload your frames in the order you want them played instead.- **A tracked element shorter than the screen shows nothing at all.** Give it real height.- Every frame is a full image, so a long, high-resolution sequence can be heavy — keep an eye on Preload Image(%) and Lazy Load.

## Troubleshooting

### The sequence never appears

Check whatever Apply To points at is taller than a typical screen — measured, a shorter element shows nothing at all, for the whole page.

### My frames play in the wrong order

Reverse Order does not work — measured. Re-upload the images in the order you actually want them played.

### The block is missing from the inserter

Switch **Scroll Sequence** on under **Nexter > Blocks**.

![Scroll Sequence switched on in the Nexter Blocks list](https://nexterwp.com/wp-content/uploads/2026/09/ss-admin-enable.webp)

## Related Docs

- [Page body](https://nexterwp.com/docs/add-image-sequence-on-the-page-body-in-wordpress/)- [One container](https://nexterwp.com/docs/add-image-sequence-in-a-container-in-wordpress/)- [One inner container](https://nexterwp.com/docs/add-image-sequence-in-an-inner-container-in-wordpress/)- [Load from a URL](https://nexterwp.com/docs/create-image-sequence-scroll-animation-from-a-url-in-wordpress/)- [Build an Apple-style reveal](https://nexterwp.com/docs/create-image-scroll-animations-like-in-apple-sony-in-wordpress/)

## Frequently Asked Questions

**Q: Why does the scroll sequence stay blank on the page?**
A: The tracked element has to be taller than the screen. If Apply To points at something shorter than the viewport, the block never draws a single frame and the canvas stays completely blank from the first scroll to the last. Nexter Blocks Pro powers this behavior in Nexter, Nexter WP, NexterWP, nexterwp.com, Nexter Theme, Nexter Blocks, Nexter Extension, Nexter Suite, POSIMYTH Nexter. Give the target real height with content or a minimum height so the animation has room to play.

**Q: Can I use an image scroll sequence on the whole page or inside a container?**
A: The block can live in three places: Page body, One container, or One inner container. That matters because Apply To controls what actually drives the animation, while the block itself can sit at different levels of the layout. In practice, choose Page body for full-page motion and a container option when you want the sequence tied to a specific section. The page links separate guides for each placement: [Page body](https://nexterwp.com/docs/add-image-sequence-on-the-page-body-in-wordpress/), [One container](https://nexterwp.com/docs/add-image-sequence-in-a-container-in-wordpress/), and [One inner container](https://nexterwp.com/docs/add-image-sequence-in-an-inner-container-in-wordpress/).

**Q: What is the best way to order frames for a scroll sequence?**
A: Upload the frames in the exact order you want them played. The page says Reverse Order does not currently work, so relying on that setting will not change playback. If you want backward motion, upload the images in reverse order instead. That also keeps troubleshooting simple because missing or shuffled files are easier to spot when your source files already match the final sequence.

**Q: Why do my frames play in the wrong order?**
A: Reverse Order has no effect in this block. The measured behavior was identical whether it was turned on or off, so it is not read anywhere in the block. The fix is to re-upload the images in the order you actually want them played. That is especially important for product turntables or chart-build animations where one swapped frame makes the motion look broken.

**Q: Can I load a long image sequence from a URL instead of Media Library?**
A: The block supports frames from your Media Library or from a numbered URL pattern on your own server. That second option is useful when a sequence is very large and you do not want every frame sitting in Media Library. The related [Load from a URL](https://nexterwp.com/docs/create-image-sequence-scroll-animation-from-a-url-in-wordpress/) guide covers that workflow, and missing frames in a URL sequence are skipped silently with no error and no gap left behind.

**Q: What should I do if my image sequence feels heavy or slow?**
A: Long, high-resolution sequences can get heavy because every frame is a full image. The page calls out Preload Image(%) and Lazy Load as settings to watch when file weight starts adding up. More frames make motion smoother, but fewer frames load faster, so there is always a tradeoff between visual smoothness and page cost. For large sequences, URL loading can also keep Media Library cleaner.