fbpx

Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

Layers Widget
Blog Template
January Updates

Scroll Sequence

The Scroll Sequence Widget is a highly versatile tool that enables you to craft mesmerizing image sequence animations that effortlessly react to your mouse wheel or touch gestures. The Scroll Sequence Widget introduces an inventive method to visually share your narrative. As users scroll, a sequence of images unfolds seamlessly, creating an engaging and interactive layer within your content. This enriches the experience, making it more compelling and memorable for your audience.

The functionality of the Scroll Sequence Widget hinges on user scroll interactions, whether via the mouse wheel or touch gestures. As individuals navigate through the webpage or app, this widget actively recognizes these inputs, initiating the sequential presentation of images. This sequential unfolding injects dynamism into the visual journey, unveiling each subsequent image with every scroll. Moreover, the widget seamlessly integrates into diverse content layouts, providing an interactive and engaging component that amplifies overall user involvement.

 

Let’s look at each of the options in the “Scroll Sequence Widget” below.

Install Scroll Sequence Widget for Elementor

This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.

  1. Go to Unlimited Elements Widget Library
  2. Search in the search bar for “Scroll Sequence”
  3. Hover over the widget in the search results and click install
  4. Add your “Scroll Sequence” widget to any Elementor Page 

Convert Video to Image Sequence

To begin, it is necessary to convert your 3D render or video file into a series of images, commonly known as an image sequence.

If you are familiar with the process, feel free to proceed. Otherwise, we have prepared a comprehensive step-by-step guide on how to convert your video files into a sequence using free online tools. In the article, we also provide instructions on converting the files into the wepb format, as optimal performance is crucial when using the scroll sequence widget.

General Settings

1

Different Configuration for Tablet

Turn on or off the different configuration for tablet.

2

Different Configuration for Mobile

Turn on or off the different configuration for mobile.

Desktop Settings

1

Folder URL

Paste the URL of folder where the sequence images are stored.

2

File Name

If filenames are product_0001.jpg, product_0002.jpg, product_0003.jpg then enter "product_ "

3

File Name Prefix Padding

It denotes the number of digits in your file names.

4

Image Extentsion

Type the file name extension.

5

Number of Images

It should be set to total number of images in the sequence minus 1.

Desktop - Canvas & Animation Settings

1

Canvas Width

It will be the same size as the width of images.

2

Canvas Height

It will be the same size as the height of images.

3

Animation Start Location

It will control when the animation starts and where the canvas will be fixed for the duration of the animation.

4

Animation Start Location

It will control when the animation ends and where the canvas will be fixed.

5

Scrub

It will work as a delay for the animation relative to the current scroll position.

Desktop - Markers Settings

1

Show Markers

Show/Hide the markers for scroller and canvas element.

Make sure to disable once you finished with the design.

2

Marker ID

Give it a unique ID to help identity the marker.

Performance Settings

You can choose options from CDN or local to load required JS libraries.

Scroll Sequence Styling

You can use CSS filter to style the widget, set the border radius, box shadow, border width and border color.

Usage Examples

Here are some live use cases for the Scroll Sequence widget.

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!