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.

Image Sequence Scroll Effect Using Elementor Magic Scroll Global Addon

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. 
Upload video to tool to create Image sequence
Upload Video to Convert Into a Group of Images
  1. 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.
  1. Click on “Convert to JPG!” button. 
Modify generated image frames settings
Settings of Generated Images From Video
  1. Scroll down and you will find the output JPG images listed below each other.
  2. Click on “Download frames as ZIP”.
Video frames converted to JPG images
Created Image Sequence from Video Frames

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. 

Upload image in Elementor Image widget
Use Elementor Image Widget with Premium Magic Scroll Addon

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 Repeater Item Settings and Its General Controls
Image Sequence Effect in Elementor Magic Scroll Addon

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.

Related Docs:

This Post Has 8 Comments

  1. Andy

    How can you preload the images for an image sequence? It’s really choppy.

    1. Abanob

      We have resolved this issue in the last version of Premium Addons Pro

  2. Kevin

    Jpg. Pictures are not showing up for me.

    1. Abanob

      We would be glad to check. Please send us a message through the chat icon on the bottom left of the page.

    1. Abanob

      Hi Yan, check this article out :)

  3. Andy

    How can you make this actually interact with the users scroll? Right now it plays automatically.

    1. Abanob

      You need to change “How this animation should work option” to “Lock Screen Untill Animation Ends”

Leave a Reply

Download Now it's free!

Extend your Elementor Page Builder capabilities now with Premium Addons. 44+ Elementor Widgets Totally Free of charge.

Premium Addons for Elementor plugin logo

Stay Updated

Subscribe to our newsletter to receive the latest updates and features.