.h2infographic { color:#1fffcb; font-weight:900; }

Elementor Animations

Animating your WordPress website with Elementor can transform a static page into a dynamic experience. This guide covers everything you need to know about incorporating animations using Elementor, from adding simple CSS animations to integrating complex Lottie animations. Let’s dive in and make your site come alive!

Types of Elementor Animations

Animations can transform a static website into a dynamic and engaging experience, and Elementor offers a variety of animation types to suit different design needs.

In this section, we’ll explore the different kinds of animations available in Elementor and provide step-by-step instructions for integrating each type into your website. Elementor and Elementor Pro support a wide range of animations, and below is a list of some of the most popular animations and formats.

Typically, it’s best to reverse-engineer your animation format and start from the section of the website that you’ll need to convey a specific message or user action.

Elementor Predefined Options

First up, predefined options. Elementor provides a range of built-in animation effects that are easy to apply and customize. These predefined options allow you to enhance your site’s interactivity and visual appeal without needing extensive coding knowledge.

Button Hover Effect

Button hover effects can enhance user interaction by providing immediate visual feedback. When a visitor hovers over a button, a subtle animation can make the button feel more responsive and inviting. Here’s how to add to your site:

Select Button:

Button hover effects can enhance user interaction by providing immediate visual feedback. When a visitor hovers over a button, a subtle animation can make the button feel more responsive and inviting.

Style Tab:

Go to the “Style” tab in the left-hand panel.

Hover Section:

Open the “Hover” section and choose effects like grow, shrink, or pulse. This will be located in a dropdown. 

Customize

Adjust the duration and delay as needed to fine-tune the hover animation. The button below has a 1 second ‘transition duration.’

Elementor Video Background

Video background animations are the secret sauce for full-width sections within Elementor.

Sure, they’re not interactive like Lottie or SVG animations, but the visual effects you can mix—think glows, gradients, and silky smooth transitions—are second to none. One of Elementor’s best tricks is in the pro version: it lets you load videos from external URL sources like YouTube or Vimeo. This nifty feature means your website doesn’t get bogged down by loading heavy video files directly.

Want to layer text or other elements over your video background? No problem! You can easily place containers, widgets, and more right on top. And don’t forget about opacity overlays—they’re perfect for keeping your text readable and adding that extra touch of style.

Setting Up Video Backgrounds In Elementor

Adding a video background in Elementor is straightforward and can significantly enhance the aesthetic of your website.

Section/Container Settings:

In the Elementor editor, click on the section, or container, where you want to add the video background. If you are using Elementor’s container features the steps will be the same, the only difference is the label. 

Style Tab:

Navigate to the “Style” tab in the left-hand panel.

Background Type:

Choose “Video” under the Background Type options.

Video URL:

Upload your video file or enter a URL if your video is hosted online (e.g., YouTube or Vimeo). Depending on where and how you host your video, you might encounter ‘suggested’ videos after your content finishes playing. YouTube automatically shows recommended videos from the visitor’s YouTube account, which might not be related to your topic content. This can lead to visitors bouncing away from your site. Personally, I use Vimeo for this reason—I prefer to keep my visitors focused on my content without the distraction of unrelated video suggestions.

Start and End Time:

Set the start and end times to ensure the video loops smoothly and is optimized for the best part of the clip.

Overlay:

If needed, add an overlay color to ensure text or other elements remain readable over the video. Adjust the opacity to balance the overlay effect.

Configuring Video Settings

Properly configuring your video settings ensures that your background video performs well across different devices.

Mute:

Ensure the video is muted to avoid distracting your visitors with audio.

Loop Video:

Enable the loop option to make the video play continuously. If desired, you can disable looping so the video plays only once.

Additional Tips for Elementor Videos

Using the right dimensions for your video background is crucial for maintaining performance and visual quality.

Resolution

Aim for a resolution of 1920×1080 pixels (landscape) for desktop displays. This ensures that the entire section or container is filled and there are no empty spaces on the edges of the video. 

Video Length

Keep the video short, ideally under 30 seconds, to ensure quick loading and looping doesn’t get out of hand. 

Elementor Lottie Animations

Lottie animations bring a professional touch to your website with high-quality, scalable, and interactive animations. They are lightweight, yet powerful, making them a favorite among designers and developers. Here’s how to integrate Lottie animations into your Elementor website to create stunning visual effects.

What Is The Lottie Widget?

The Lottie widget in Elementor allows you to integrate high-quality animations into your website with ease. These animations begin as SVG designs, often created in Adobe Illustrator, and are then animated in Adobe After Effects. The output is a Lottie/JSON format, which is both lightweight and scalable, ensuring no loss in quality. In Elementor, you can manipulate this format to add sophisticated, eye-catching animations that enhance user engagement and visual appeal. To use the Lottie widget, simply navigate to the page you want to edit in your WordPress dashboard, click “Edit with Elementor,” search for the “Lottie” widget, drag it into your desired section, and upload your Lottie JSON file or paste a URL if it’s hosted online.

How To Add Lottie Animations To Elementor

To add a Lottie animation in Elementor, start by creating your design as an SVG in a tool like Adobe Illustrator, then animate it in After Effects. Export the animation as a Lottie/JSON file. In your WordPress dashboard, navigate to the page you want to edit and click “Edit with Elementor.” In the Elementor editor, search for the “Lottie” widget in the widget panel on the left, then drag and drop it into the section where you want the animation to appear. Click on the “Choose Lottie Animation” button in the left-hand panel to upload your Lottie JSON file or paste a URL if the animation is hosted online.
(this is a Lottie animation)

Configuring Lottie Settings

Configuring Lottie settings in Elementor allows you to fine-tune how your animations behave on your webpage. Adjusting the speed setting lets you control how quickly the animation plays, which can impact the overall feel of your site—slower speeds can create a more relaxed atmosphere, while faster speeds can add energy and excitement. Enabling the loop option ensures that the animation plays continuously, making it perfect for background effects or repeated visual cues that keep your page lively and engaging. You can also set animations to autoplay on page load or trigger on hover to create interactive elements that respond to user actions, enhancing the overall user experience.

Hover To Play

In Elementor, you can set Lottie animations to “hover to play,” adding an interactive element to your site. For instance, when you pair this feature with a gear icon, the animation will only start when a user hovers over the icon. This interaction draws attention and invites users to engage with your content, creating a more dynamic and engaging user experience.

Elementor Looping Animations

Setting Lottie animations to “loop” in Elementor ensures that they play continuously, creating a seamless and dynamic effect. For example, using looping animations with rotating gears can add a sense of perpetual motion to your website, symbolizing efficiency and constant activity. This can enhance the visual appeal and reinforce the theme or message of your site, keeping visitors engaged and visually stimulated.

CSS Animations In Elementor

CSS animations are a versatile and lightweight way to add movement and dynamism to your website. They allow you to animate HTML elements using CSS properties, making them ideal for creating subtle effects like fades, slides, and rotations. In this section, we’ll explore how to implement CSS animations in Elementor to enhance your site’s interactivity and visual appeal.

What Are CSS Animations

CSS animations use keyframes to define the start and end states of an element’s style, as well as intermediate waypoints. This allows for smooth transitions between these states, creating engaging visual effects. CSS animations are supported by most modern browsers and are highly customizable.

CSS Animation Example

Take for example these moving glow circles in the background of this section. These both have some custom CSS on them, written out below. To implement these CSS animations in Elementor, add the provided CSS code to the “Custom CSS” section under the “Advanced” tab of your image widget. For best results I recommend using an image (in this case, the simple circles).

Elementor Animation FAQs:

How Do I Add Animations In Elementor?

The methods will vary depending on what you want. Generally, you select an element, navigate to the “Advanced” tab, and choose from the available options under “Motion Effects.” For more complex animations, you might use the Lottie widget or add custom CSS.

How Many Times Do Lottie Animations Loop?

This is up to you! Lottie animations within Elementor can loop infinitely or just a single time, it’s completely up to you. 

Can animations affect my website's performance?

Yes, excessive or poorly optimized animations can slow down your site. Use lightweight animations like CSS or Lottie and optimize settings for best performance.

How do I add hover animations to buttons in Elementor?

Select the button, go to the “Style” tab, open the “Hover” section, and choose effects like grow, shrink, or pulse.

What types of animations can I use in Elementor?

Elementor supports various animations, including CSS animations, Lottie animations, hover effects, entrance animations, and more.

Are animations supported on mobile devices in Elementor?

Yes, but it’s important to test and optimize them for mobile. You can adjust settings in Elementor’s responsive mode to ensure animations work smoothly across all devices.

Elementor Animation Designer

Looking for a new animation for your site or have questions about what’s possible? Get in touch and I’d be glad to quote you out for a custom animation or chat further. 

WElcome!

Thanks for stopping by! Ready to move forward?

Choose an option below to get started:

1
2
3
Last Page
Choose To Start: *
Your Name: *
Best Email For Communication: *
Share Your Details: