How to Create Image Sequence Animation with Elementor Magic Scroll

Before we get into this article, if you are wondering what is Elementor Magic Scroll Addon? then, please visit this documentation article of Elementor Magic Scroll global addon to get to know more about this new feature and the options included in it.

In this tutorial, we will show how to use the Image Sequence scroll effect from Elementor Magic Scroll Addon to set a group of images in sequence and switch between them while scrolling. 

Create Image Sequence Scroll Animation in Elementor.

1- Setup Image Sequence

In our example, we will convert a video to a group of images. There are a lot of tools that could help you convert your video frames to a set of images but in our tutorial, we are going to use this simple tool EZGIF.COM. The below steps show the process that was done to get the image frames ready.

1. Go to EZGIF.COM.
2. Navigate to the “Video to GIF” tab.
3. Navigate to “Video to JPG” sub-tab.
4. Click on “Choose File” from “Select video from your computer” to upload your video, or you can use the “paste video URL” option.
5. Click on “Upload video!” button. 

6. You will be redirected to a new page. From this page, you can set these options 
   • Start Time(seconds): Set the time of the first image, we set it to ” 0 ” in our example.
   • End time(seconds): Set the time of the last image, we set it to ” 6 ” in our example.
   • Size:  Choose Images Size, we chose ” Original ” in our example.   
   • Frame rate (FPS): Choose how many frames per second will be generated, we chose ” 10 ” frames per second. This means our video will be converted into 60 images.

7. Click on “Convert to JPG!” button. 

8. Scroll down and you will find the output JPG images listed below each other.
9. Click on “Download frames as ZIP”.

Now unzip this file to any folder you like.

2- Use Elementor Image Widget

Go to your website page and from the Elementor editor, drag Image widget and drop it into your desired section.

From Choose Image set the first frame image in the sequence. 

3- Create Image Sequence Animation Using Elementor Magic Scroll

Navigate to the widget’s Advanced tab, scroll down until you see Premium Magic Scroll, switch it on, then click on “Add Item”. From the repeater item that appeared to you choose Image Sequence from the Select Animation dropdown list.

From the Repeater Item settings, navigate to Select Images and insert the unzipped image frames that will be displayed in sequence while page scrolling but make sure you upload them in order.

Elementor Magic Scroll Addon General Settings

• How This Animation Should Work?: We used “Lock Page Scroll Until Animation Ends” because we want the Progress Bar Percentage Value to reach its end before jumping to the next Elementor section. Check Magic Scroll documentation to get to know more about the other options listed under “How This Animation Should Work?” and how they actually work.
• Animation Order: Set the order of the animation of the current Elementor element. The animations with Animation Order set to 1 start first, then animations with Order 2, and so on.
• Decrease Animation Speed By: From here, you can adjust how fast or slow the animation should behave/work. In our example, we kept it at “5”.

You Made It!

Now, you can create your own Elementor Image Sequence Animation Effect for your Elementor website. We’re looking forward to seeing what you will come up with and we encourage you to post your work in our Facebook Group and get other designers inspired.