Controlling Lotties w/ Javascript

Yes, you can control Webflow-loaded Lotties with Javascript.

Yes, it's a pain in the butt.

There are a few barriers you'll likely encounter, but all of them can be conquered.

Getting a handle on your Lottie

Since there may be several Lotties loaded in the page, it's important to be able to locate the right ones to control.

Method #1

_{const lottie = Webflow.require('lottie').lottie;}

_{const animations = lottie.getRegisteredAnimations();}

Then iterate through _{animations.lottie} to find the right one.

_{animations.lottie[n].wrapper} is the containing element, so if you've applied an id or custom attribute, you can identify that here.

Method #2 ( not currently working )

Set a custom attribute on the Lottie element of _{data-name = x}

You should then be able to identify it through the Lottie library, e.g.

_{lottie.stop('x');}

Reference

Controlling your Lottie

By default, Lotties want to auto-play, and there does not appear to be any setting in the designer to stop that.

Method #1 - Interaction Hack

However, you can hack this by adding an interaction to the lottie.

I use an element interaction with a click trigger, and I set the action to play lottie on the second click only. This prevents the autoplay with minimal interference to the page.

Since it's an element interaction, it can be carried with the element in components and cross-site copy-paste.

Other Possible Methods

These don't seem to work currently;

Stop the animation using script right on page load

_{isPaused = true} and _stop() don't appear to take effect. Both are ignored until the first full autoplay completes

Add a custom attribute ( tested, didn't work ).

_{data-lottie-percent = 0}

Reference

‍

References

Control Lottie via Javascript?

https://discourse.webflow.com/t/control-lottie-via-javascript/182219

var Webflow = Webflow || [];Webflow.push(function () {  // DOMready has fired  // May now use jQuery and Webflow api});

Webflow.js and jQuery plugins

https://discourse.webflow.com/t/webflow-js-and-jquery-plugins/907

‍

https://github.com/airbnb/lottie-web#lottie-has-several-global-methods-that-will-affect-all-animations

‍

‍