How to Create Image Sequence Animation with Elementor Magic Scroll

Do you want to create an Image Scroll Sequence Animation in Elementor? With Elementor Magic Scroll Addon, you can display a sequence of images that change as users scroll.

In this tutorial, we’ll guide you through the steps to set up this effect using Elementor Magic Scroll Addon.

Before you Start, if you’re new to Elementor Magic Scroll, you can check out this documentation to explore its features.

Create Image Sequence Scroll Animation in Elementor

Step 1: Convert a Video into an 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.

To create an image sequence, you need to extract multiple frames from a video. One of the easiest ways to do this is by using EZGIF.COM.

1. Go to EZGIF.COM.
2. Navigate to “Video to GIF” → “Video to JPG”.
3. Click “Choose File” to upload your video or paste a video URL.
4. Click “Upload Video!”.

Adjust the Image Frame Settings

Once uploaded, configure the following settings:

• Start Time (seconds): Set the starting frame (e.g., 0 seconds).
• End Time (seconds): Set the last frame (e.g., 6 seconds).
• Size: Choose “Original” for best quality.
• Frame Rate (FPS): We recommend 10 FPS (which creates 60 images from a 6-second video).
• Click “Convert to JPG!”.
• Once processing is complete:
  • Download all frames as a ZIP file.
  • Unzip the images to a folder on your computer.

Step 2: Add the Image Sequence to Elementor

Now, add the first frame of your image sequence using the Elementor Image Widget.

1. Open the page in Elementor Editor.
2. Drag and drop Premium Image Widget into your section.
3. Under Choose Image, upload the first frame of your image sequence.

Step 3: Apply Premium Magic Scroll Animation

Now, add the Magic Scroll Addon animation to display the image sequence while scrolling.

Enable Magic Scroll & Add Image Sequence Animation

1. Click on the Image Widget and go to the Advanced tab.
2. Scroll down to Premium Magic Scroll and enable it.
3. Click “Add Item” and choose “Image Sequence” from the dropdown list.

Upload the Image Sequence

• Under Select Images, upload all the frames from your unzipped image sequence.
• Make sure the images are uploaded in order.

Step 4: Adjust Animation Settings

Customize the animation settings for better control:

• We selected “Lock Page Scroll Until Animation Ends”.
• This ensures the progress bar completes before scrolling to the next section.
• If you want smoother scrolling, choose “Normal Page Scroll” instead.
• Animation Order
  • Set the order in which the animation plays (e.g., 1 for the first animation).
• Animation Speed
  • Adjust how fast or slow the animation plays.
  • We set it to “5” for balanced speed.

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.