A lot of small issues with the Lottie integration

[biodust]

Hi,
we love the Lottie integration at the office.
But after using it for a couple of weeks we experience a lot of small bugs with the integration.

Here are two examples:

1. Play animation on hover
The buttons on the page has the same hover interaction, just different orientation for the animation exported from After Effects.

Bug
One animation plays when page loads for some reason, and glitches when animation loops.

2. Play Lottie animation when scroll into view
Interactions triggers Lottie playback when scrolled into view, and reverses when it scrolls out of view.

Bug
It glitches when it loops. When we preview the animation in settings it loops fine with no glitch.

We have also experienced that animations freezes for couple of milliseconds after a couple of loop cycles, then plays again.

Link to live example:
https://lottie-test-project-c4354b.webflow.io/

Share link:
https://preview.webflow.com/preview/lottie-test-project-c4354b?utm_medium=preview_link&utm_source=dashboard&utm_content=lottie-test-project-c4354b&preview=cc8a78fadef4b5ee28f7801e70242ba4&mode=preview

[biodust]

I was able to solve these issues. Here’s what I did:

Solution bug 1: The animation had a sub class attached to it. Once removed it didn’t play on page load.

Solution bug 2: A Lottie animations often has empty frames at the end. It didn’t show up in the preview, but instead of using default playback when it scrolled into view I created a separat interaction with timed actions, and made sure that last action didn’t play the empty frame. See screens.

Cheers,
-B