With the new Scroll Sequence Widget of Happy Elementor Addons Pro, bring your content to life with engaging scroll-driven animations. This widget allows you to create a dynamic, interactive experience by animating various elements as users scroll through your page.
Whether you want to highlight key features, tell a visual story, or enhance user engagement, the Scroll Sequence Widget makes it easy to create immersive scrolling effects.
Pre-requisite
To enable the Loop Tab, you need to have,
- Elementor
- HappyAddons
- HappyAddons Pro
Guide to Using the Scroll Sequence Widget
For optimal results, navigate to the Widgets section in the menu bar on the left side of the screen. From there, select the Container widget. Once selected, drag and drop the widget into the desired area on the screen.
Now, click on the Plus (+) icon, which will open the elements section. From the elements section, drag and drop the Scroll Sequence widgets under the container section.
Now, click on the Scroll Sequence area. This will open the Edit Scroll Sequence section on the left side of the screen. In this section, click on Content > Scroll Sequence.
You will then see the ‘Apply To’ dropdown menu, where you can select options such as body, container, section, and column. Since we previously used containers, choose Containers here.
Next, you’ll see the Image Source dropdown menu, where you can choose either Remote Server or Gallery.
If you select Remote Server, you can display a sequence of images from a remote server using its access link.
Let’s choose the Remote Server option from the dropdown. It will display the Image Type field, where we can select the image type, whether it’s PNG, JPG, or WebP.
Next, we can choose the total number of images from the Total Images section.
Under this, in the Folder Path field, we need to paste the public link of the sequential image path.
Also, we can add an Image Name Prefix in the Image Name Prefix text field. But before that, we need to understand what an Image Name Prefix is and how it works.
Let’s say your sequential image name is “celebration0001.png“. In this case, “celebration” is the image name prefix and “0001” is the number format.
Finally, we should select the Number Format. In our case, we select “0001-9999” as the number format for our sequence images according to our sequential image number.
Note: If our sequential image number is ‘celebration001.png‘, we should select the Image Number Format ‘001–999‘.
Also, please note, failure to conform to image sequence structure may result in sites behaving erratically. If you are facing issues after creating a scroll sequence, the first thing to double-check is the prefix and the number format.
Style:
Now we can add some styling by clicking the Style tab.
We can customize width, height, Top position, Left Position and Z-index from here.
Now let’s add some Spacer and Heading widgets under the container.
That’s it, now Publish and Preview.
Now let’s try the Gallery option as the Image source:
Drag and drop Scroll Sequence widget under a Container section.
Then click on the Scroll Sequence section. It will show the Scroll Sequesce Edit section on the left of the page. Let’s select Gallery from the Image Source dropdown field.
Now click on the Image upload fields to upload sequence images.
Note: With this free tool, https://ezgif.com/video-to-png you can make any short video to PNG images for Scroll Sequence widget.
Now, add some widgets under the container, such as a Spacer widget, Heading widget, etc.
After that, publish and preview the page. That’s it.
