How to add Lottie animations to WordPress sliders

Download or create the animation as a Lottie JSON or dotLottie file. Check it in a Lottie preview first, because missing fonts, external image assets or unsupported effects can produce an empty or partly broken animation in the browser.

Upload the file somewhere your site can serve it over HTTPS, such as the WordPress Media Library if the file type is allowed, or your site’s asset storage. Copy the direct file URL rather than the page URL containing the animation.

The manual route works when your slider has an HTML, shortcode, embed or custom-content layer. You also need to load a Lottie player or the Lottie web library on the front end. WordPress recommends loading front-end JavaScript with wp_enqueue_script() through the wp_enqueue_scripts hook rather than pasting script tags into a theme header.

This route is fine for one simple animation, but it has drawbacks: the slider may not know when the animation starts or ends, slide changes can leave the animation playing, and WordPress or a security plugin may remove script markup from an editor field. You may need a child theme, a small custom plugin or help from a developer.

Enqueue a maintained Lottie player or web component, then add the player element inside the slider’s custom-content layer. The element needs the direct animation URL and settings such as autoplay, loop, speed and a transparent background. The older @lottiefiles/lottie-player package is deprecated, so do not start a new implementation with it; choose its documented replacement or another maintained player instead.

Keep the player script and the slider markup separate. If the animation does not appear, inspect the browser console and Network panel for a blocked script, a 404 response, mixed-content warning or a failed JSON request.

Edit the slide and add the custom HTML or embed layer where the animation should appear. Give its wrapper a defined width and height, then set the player to fill that wrapper. Use the slider’s responsive controls to adjust the wrapper at tablet and mobile widths instead of relying on a fixed desktop size.

Keep text and buttons in separate layers so they remain accessible and can be timed independently. If the slider clips overflow, masks the layer or places it behind the background, change the layer order and overflow settings before troubleshooting the Lottie file.

For a basic animation, autoplay and loop may be enough. For a more deliberate result, start the Lottie when its slide becomes active, pause it when the slide changes, and connect playback to a button, hover state or scroll interaction if your player and slider expose those controls.

Do not assume the slider’s ordinary layer animation controls will control the Lottie timeline. A slider can move the Lottie container while the animation continues independently. Test forward and backward slide changes, swiping, autoplay and returning to a previous slide.

Check the animation on a phone, tablet and desktop, with reduced motion enabled and with the browser cache cleared. Confirm that the file loads over HTTPS, the animation does not cover the slide’s text, and the slider still works if the animation is slow to load.

Add useful alternative text or a nearby text description when the animation communicates information. Keep the file small, remove unnecessary layers and avoid loading several large animations on the first screen, as each animation adds JavaScript and rendering work.

If you use Slider Revolution 7, the Slider Revolution Lottie Addon is the quicker route. It adds a dedicated Lottie layer, lets you import JSON files or choose from a local library, and provides settings for duration, autoplay, looping, timeline start, renderer, sizing and progressive loading. It also includes click, hover, morph, mouse-move and scroll interaction modes.

Choose this route when you want Lottie controls inside the slider editor rather than maintaining custom JavaScript. It still requires the Slider Revolution plugin, so it is not a general-purpose Lottie feature for every WordPress slider.