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.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Scroll Sequence”
- Hover over the widget in the search results and click install
- 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 #
Different Configuration for Tablet
Turn on or off the different configuration for tablet.
Different Configuration for Mobile
Turn on or off the different configuration for mobile.
Desktop Settings #
Folder URL
Paste the URL of folder where the sequence images are stored.
File Name
If filenames are product_0001.jpg, product_0002.jpg, product_0003.jpg then enter "product_ "
File Name Prefix Padding
It denotes the number of digits in your file names.
Image Extentsion
Type the file name extension.
Number of Images
It should be set to total number of images in the sequence minus 1.
Desktop - Canvas & Animation Settings #
Canvas Width
It will be the same size as the width of images.
Canvas Height
It will be the same size as the height of images.
Animation Start Location
It will control when the animation starts and where the canvas will be fixed for the duration of the animation.
Animation Start Location
It will control when the animation ends and where the canvas will be fixed.
Scrub
It will work as a delay for the animation relative to the current scroll position.
Desktop - Markers Settings #
Show Markers
Show/Hide the markers for scroller and canvas element.
Make sure to disable once you finished with the design.
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.
