Blog

27 Jul 2023

New Lottie Animation Feature

Development / 12 Comments

Introducing the highly anticipated Lottie feature! The wait may have been a little longer than expected, but we assure you, it's well worth it. We've made adding fancy Lottie animations with the Builder super easy. For those unfamiliar with Lottie, it's a lightweight, interactive, and scalable motion graphic format that delivers seamless performance on any device. Say goodbye to boring static images and icons! Now you can have animated illustrations and icons that play on hover, click, scroll on the page, or when a WooCommerce product is added to the cart. Check out our Lottie demo to experience the magic of Lottie for yourself.

Pagespeed

Revolutionize your website with interactive motion graphics that won't sacrifice pagespeed. Our demo showcases massive animated graphics while still maintaining an outstanding 99 score on Google Pagespeed Insights. This achievement is thanks to the lightweight Lottie files and our fast performance framework.

Lottie Library

Explore our extensive Lottie Library, featuring thousands of free Lottie animations in one convenient lightbox. With the Lottie Library, searching and inserting Lotties has never been easier. Choose to use Lottie files directly from the Lottiefiles CDN server or download them to your own server. If you can't find the perfect animation in the library, worry not! You have the option to upload your custom Lottie JSON files.

Chain-able Animation

Unlock the ability to add multiple Lottie animations into a single module and watch them play seamlessly in sequence. Tailor the event trigger options for each Lottie in the chain to create a dynamic and engaging experience.

Trigger Events & Options

There are many trigger events available to play the animation. You can trigger Lottie animation on load, click, hover, progress animation, scroll, add to cart, or choose no animation, which will display a static frame.

• OnLoad = Play the animation when it is loaded.
• Click = Play the animation when clicking on the Lottie container or another element.
• Hover = Play the animation when hovering over the Lottie container or another element. You can choose to have the animation pause or reverse on mouseout.
• Progress Animation = Progress the animation as you move the cursor over the Lottie container.
• Scroll = Play the animation as you scroll on the page. If you select both "Scroll" and "Progress Animation" events, the animation will sync with the page scroll (it will progress as you scroll down and reverse as you scroll up).
• Product add cart = Play the animation when a WooCommerce product is added to the cart.
• Do not play = The animation won't play, making it behave like a static image.

Additionally, other options include speed, delay, reverse, playing a specific frame range, and render.

Lottie Icon

Static icons with action buttons are a thing of the past. Embrace the allure of fancy animated icons in the Button, Fancy Heading, Icon, and Cart Icon modules. These icons can now come to life with animations triggered by hover, click, or when a product is added to the cart.