Introducing Lottie Lite for WordPress animations

Animations are a valuable part of modern web design, adding visual interest and enhancing user experience. Lottie files, a popular tool for creating and displaying animations using SVG or canvas, are used by many enterprise companies for their flexibility and cross-platform compatibility. While Lottie Files offers a WordPress plugin, it comes with several limitations—bugs, performance issues, and an overly complex media library. Enter Lottie Lite, a lightweight alternative designed to offer a simpler and more efficient solution for WordPress users.

Why we developed Lottie Lite

At Human Made, we saw a need for a streamlined, efficient way to integrate Lottie animations into WordPress sites. Our client, SEON, required the ability to overlay animations on existing media elements like images and backgrounds. The existing Lottie plugin didn’t meet their needs due to some performance issues, so we developed Lottie Lite to fill this gap. Lottie Lite allows users to upload and display animations easily, and focuses on simplicity and efficiency.

Key features of Lottie Lite

Lottie Lite is built to extend the functionality of core WordPress blocks, specifically the image, cover, and media & text blocks. Here’s a breakdown of its features:

Core block extension: Lottie Lite extends core blocks rather than adding new ones. This approach keeps the plugin lightweight and focused, allowing users to integrate animations directly within familiar elements like images and covers.
Upload and overlay animations: The plugin enables users to upload Lottie animations (JSON or .lottie files) and overlay them on top of existing media elements. Users can also choose to replace the media entirely if they prefer. The animations are scalable, making them responsive and adaptable to different screen sizes.
Interaction options: Lottie Lite provides various interaction options, such as playing the animation automatically when the page loads, triggering it on hover, or activating it when clicked. These options give users flexibility in how animations are displayed, enhancing interactivity.
Breakpoint and responsiveness: Users can set different animations for various screen widths, similar to CSS media queries. This feature ensures that animations remain optimised and relevant across devices.
Lightweight and efficient code: Built using the WordPress Create Block tool, Lottie Lite only loads assets when they are needed, and supports lazy loading animations wherever the associated image is also lazy loaded.

How Lottie Lite works

When adding an animation using Lottie Lite, users can select an image block and access the Lottie animation options via the block’s sidebar settings. While the UI does not currently display the animation within the editor due to technical constraints with React, the settings are intuitive and accessible.

Key options include:

Interaction modes: Set the animation to play automatically, on hover, or on click.
Overlay option: Choose to overlay the animation on the image or replace the image entirely.
Bounce mode: For animations with a start and end point, users can enable a bounce effect, making the animation play in reverse before restarting. This setting is particularly useful for hover-triggered animations.

The technical bits

Lottie Lite uses the HTML tag processor to add specific data attributes to images within targeted blocks. The canvas element that displays the animation adopts the class names and dimensions of the associated media, ensuring that the animation behaves responsively. The CSS is kept minimal, allowing for easy customisation.

Additionally, the plugin supports programmatic control of animations. Developers can access and manipulate the Lottie player object directly using JavaScript, providing advanced users with greater flexibility. This approach opens up possibilities for integrating complex animations, adding custom behaviours, and enhancing accessibility options like adhering to reduced motion preferences.

Future enhancements

While Lottie Lite is already a functional and efficient solution for integrating animations into WordPress, there are plans for further development. These include:

Enhanced editor experience: Improving the visual feedback within the editor would enhance usability, making it easier for users to preview and configure animations directly.
Adapting to reduced motion preferences: In a future update to improve accessibility, Lottie Lite will detect users’ preferences for reduced motion through their system settings (e.g., prefers-reduced-motion) and adjust the animation behaviour accordingly.
Player controls in media modal preview: We’re planning to enhance the media modal’s preview capabilities by adding player controls, which will streamline the animation selection process and make it easier for users to refine and preview their Lottie files directly within the WordPress media library.
Scroll interaction: Lottie Lite supports animations activated by click and hover events, providing users with flexibility in creating dynamic content. In a future release, we aim to add support for scroll interactions, allowing animations to be bound to the window scroll event as well as adding click and hover functionality.
Dedicated Lottie block: While extending core blocks allows for seamless integration with existing media elements, a standalone Lottie block will provide more flexibility and simplicity for users who want to add animations without using other media types.

Lottie Lite is designed with simplicity and performance in mind, providing a streamlined way for WordPress users to add engaging, responsive animations to their sites without the overhead of more complex solutions. Whether you’re a developer looking for a lightweight plugin or a content creator wanting to enhance your media with animations, Lottie Lite offers a flexible and efficient solution. As we continue to refine and expand its capabilities, we look forward to seeing how the community uses Lottie Lite to bring their sites to life.