---
title: "Scroll Sequence Elementor Widget Settings Overview"
url: https://theplusaddons.com/docs/scroll-sequence-elementor-widget-settings-overview/
date: 2023-12-22
modified: 2026-04-10
author: "Aditya Sharma"
description: "Scroll Sequence animation is a popular technique that is increasingly being adopted by designers to enhance the user experience on websites. This technique allows designers to create a story-like experience..."
image: https://theplusaddons.com/wp-content/uploads/2023/05/Scroll-Sequence-Elementor-Widget_-Settings-Overview-1024x536.jpg
word_count: 813
---

# Scroll Sequence Elementor Widget Settings Overview

## Key Takeaways

- Scroll Sequence widget from The Plus Addons for Elementor creates image scrolling animations on Elementor websites.
- Users can apply scroll sequences to Default, Body, or Inner Column sections in Elementor.
- The Scroll Sequence widget supports JPG, PNG, and WebP image types for animations.
- Preload Image (%) option allows users to choose the number of images to load initially from the sequence.

Scroll Sequence animation is a popular technique that is increasingly being adopted by designers to enhance the user experience on websites. This technique allows designers to create a story-like experience for visitors as they move down the page, with each section revealing new information or features. The goal of Scroll Sequence elementor widget is to engage the user and make the website more visually interesting and memorable.

With the Scroll Sequence widget from The Plus Addons for Elementor, you easily create amazing image scrolling animations on your Elementor website.

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/image-scroll-sequence/)

## Required Setup

- [Elementor FREE Plugin](https://wordpress.org/plugins/elementor/) installed & activated.

- You need to have [The Plus Addons for Elementor](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) plugin installed and activated.

- This is a Premium widget, and you need the [PRO version of The Plus Addons for Elementor](https://theplusaddons.com/pricing//?utm_source=tpae&utm_medium=docs&utm_campaign=text).

- Make sure the Scroll Sequence widget is activated, to verify this, visit The Plus Addons → Widgets → and Search for Scroll Sequence and activate.

## How to Activate the Scroll Sequence Widget?

Go to 

- **The Plus Addons **→** Widgets **

- **Search **the widget name** **and** turn on the toggle.**

![](https://theplusaddons.com/wp-content/uploads/2023/12/scroll-sequence.png)

## Key Features

- **Multiple places to add scroll sequence** - You can apply scroll sequence to multiple places, Default (Container / Section), Body and Inner Column. 

- **Multiple image sources **- You can create image sequence animation from an image gallery or an external URL.

- **Sticky section** - You can add sticky sections to add different types of content.

## How to Create Image Sequence Animations in Elementor?

To create an image sequence animation in Elementor, add a section or container (for flexbox).

Then add the Scroll Sequence widget there, in the **Apply To** section under the **Scroll Sequence** tab, you have to choose where you want to add the scroll sequence animation. Here you’ll find three options -

**Default** - In this option, it will apply to a section or container (in flexbox).

**Body** - In this option, it will apply to the page body. [Learn the process](https://theplusaddons.com/docs//add-image-sequence-on-page-body-in-elementor/).

**Inner Column** - If you are using Elementor sections, then with this option, you can add scroll sequence animation in the column of a section or inner section. [Learn more](https://theplusaddons.com/docs//add-image-sequence-in-inner-column-in-elementor/).

![scroll sequence content](https://theplusaddons.com/wp-content/uploads/2023/05/scroll-sequence-content.png)

We’ll keep it to **Default** here.

Then, in the **Upload Type,** you can choose the image source for the sequence animation. Here you’ll find two options - 

**Gallery** - In this option, you can add images from your WordPress media library.

**Remote Server** - With this option, you can add images from an external URL to create an image scroll sequence. [Learn the process](https://theplusaddons.com/docs//create-image-sequence-scroll-animation-from-a-url/).

Here we will keep it to **Gallery**, and then from the Image Upload section, you can add images from the media library.

![scroll sequence gallery](https://theplusaddons.com/wp-content/uploads/2023/05/scroll-sequence-gallery.png)

Supported image type - JPG, PNG and WebP.

Then under the **Extra Option** tab, you’ll find **Preload Image (%)**, here you can choose the number of images to load at first from your image sequence, then the rest of the images will load.

You can decide the number based on your image sequence so that it doesn’t increase the load time.

![scroll sequence preload image](https://theplusaddons.com/wp-content/uploads/2023/05/scroll-sequence-preload-image.png)

Then from the **Sticky Sections,** you can add content over the scrolling sequence to animate with it on the scroll. [Learn the process](https://theplusaddons.com/docs/add-sticky-sections-in-image-scroll-sequence/).

If you don’t have long enough content on the Section or Container (in flexbox) then you have to set a minimum height for the Section or Container (for flexbox) containing the Scroll Sequence widget for the scroll animation to work.

### For Elementor Section

Select the Section in the **Layout** tab, set **Height** to **Min-Height**, and from the **Minimum Height** section, set a minimum height.

![section min height](https://theplusaddons.com/wp-content/uploads/2023/05/section-min-height.png)

> *Note: The height will decide the speed of your scroll sequence animation, higher the number slower and smoother the animation.  * 

### For Flexbox Container

From **Min Height** under the **Layout** tab, you can set the minimum height.

![container min height](https://theplusaddons.com/wp-content/uploads/2023/05/container-min-height.png)

Now you should have a beautiful image scrolling sequence animation.

![scroll sequence demo](https://theplusaddons.com/wp-content/uploads/2023/05/scroll-sequence-demo.gif)

## How to Style the Scroll Sequence Widget?

You can do some position styling of the Scroll Sequence widget from the Style tab.

**Position** - From here you can move the Scroll Sequence from top and left.

![scroll sequence style](https://theplusaddons.com/wp-content/uploads/2023/05/scroll-sequence-style.png)

**Z-index** - From here, you can set a z-index value for the Scroll Sequence.

**Width** - From here, you can set a width for the Scroll Sequence, by default, it is 100%.

**Height** - From here, you can set a height for the Scroll Sequence.

**Start Offset (px)** - The value set here will delay the start of the sequence by equivalent pixels. For example, if the Start Offset (px) is set to 500, then the animation will start once the user scrolls down by 500px.

**End Offset (px)** - The value set here will end the sequence before equivalent pixels. For example, if the End Offset (px) is set to 500, then the animation will end 500px before the section ends.

Advanced options remain common for all our widget, you can explore all it options from here.

[View Advanced tab tutorial.](https://docs.posimyth.com/tpae/advanced-tab/)

## Frequently Asked Questions

**Q: Why isn't the Scroll Sequence widget showing up in Elementor?**
A: If the Scroll Sequence widget isn't visible, ensure that both The Plus Addons for Elementor plugin and the PRO version are installed and activated. You also need to activate the widget by navigating to The Plus Addons u2192 Widgets and toggling the Scroll Sequence option. Without these steps, the widget won't appear for use.

**Q: What settings work best for creating smooth scroll sequence animations?**
A: To achieve smooth scroll sequence animations, set a minimum height for the section or container where the Scroll Sequence widget is applied. The height affects the animation speed; a higher value results in a slower, smoother animation. Adjust the Preload Image (%) setting to control how many images load initially, which can also impact performance.

**Q: What common mistakes do people make when setting up the Scroll Sequence widget?**
A: A common mistake is not setting a minimum height for the section or container containing the Scroll Sequence widget. Without sufficient height, the scroll animation may not function correctly. Additionally, failing to preload an appropriate number of images can lead to longer load times, affecting user experience.