How to Create an Infinite Animation Loop in Elementor Motion

If you’re using Elementor and want to create an infinite animation loop for an element using the Elementor Motion Effects feature, you can achieve this by applying some custom CSS classes. In this tutorial, we’ll guide you through the process step by step.

Step 1: Add the Custom CSS

To create an infinite animation loop, you’ll need to add the following custom CSS code to your WordPress website. This code sets the animation-iteration-count property to infinite, which means the animation will loop indefinitely:

1
2
3

.animate-infinity {
    animation-iteration-count: infinite;
}

You can add this CSS code to your WordPress theme’s style.css file or use a custom CSS plugin if you prefer. Make sure to save your changes.

Step 2: Create or Edit an Elementor Section

Now, go to the page where you want to add the infinite animation loop using Elementor. Edit the page with Elementor and locate the section or widget where you want to apply the animation.

Step 3: Add the Animation Classes

1. Select the Element: Click on the element (widget or section) to which you want to apply the infinite animation loop.

2. Open the Elementor Motion Effects Panel: In the Elementor editor, on the left-hand side, you should see the “Advanced” tab. Click on it to open the advanced settings.

3. Add the CSS Classes: In the advanced settings panel, you’ll see an option labeled “CSS Classes.” Enter the animate-infinity class into the input field. This class is what we defined in the custom CSS earlier.

4. Update/Publish: After adding the CSS class, make sure to save your changes by clicking the “Update” or “Publish” button, depending on your editing mode.

Step 4: Preview Your Animation

Now, when you view your page, the selected element should have an infinite animation loop applied to it.

That’s it! You’ve successfully created an infinite animation loop on an Elementor element using custom CSS classes and the Elementor Motion Effects feature. You can further customize the animation properties by adjusting the animation settings within Elementor’s Motion Effects panel.

Remember to clear your browser cache or use an incognito window if you don’t immediately see the changes take effect.