Tutorial

Elementor Control Lottie with JavaScript

Video

Description

Another question from the Global Elementor Facebook Community.

The author wanted to start a Lottie animation when a parent container is hovered. Unfortunately, there is no such option.

This tutorial shows a way to do it by using JavaScript.

Add a Container to the editor

Add a Container to the Editor for the Lottie and other content. This could be a Column or a Flexbox container.

Add a Lottie

Add a standard Elementor Lottie Widget inside the container
Set sizing how you want it
In Settings, set the Trigger to None
In Advanced, add the class "trigger-on-parent-hover"

JavaScript

Add the JavaScript to the site. Copy the code below.

To put it on a Page, add an HTML Widget and paste it into there.

Alternately, use Elementor -> Custom Code, or any other plugin you use for custom JavaScript.

Code (click to copy)

JavaScript (javascript)

<script>
    ;( w => {
        w.addEventListener('elementor/frontend/init', () => {
            elementorFrontend.hooks.addAction('frontend/element_ready/lottie.default', $scope => {
                    if ($scope.hasClass('trigger-on-parent-hover')) {
                        setTimeout(() => {
                            initListener();
                        }, 300);
                }

                const initListener = () => {
                    const lottie = $scope.find('.e-lottie__animation').data('lottie');
                    const parent = $scope.parent();

                    lottie.setDirection(1);
                    lottie.stop();

                    w.lottie = lottie;

                    parent.hover(
                        () => {
                            console.info('PLAY LOTTIE');
                            lottie.setDirection(1);
                            lottie.setSpeed(1);
                            lottie.play();
                        },
                        () => {
                            console.info('REVERSE LOTTIE');
                            lottie.setDirection(-1);
                            lottie.setSpeed(2);
                            lottie.play();
                        }
                    )
                }
            });
        })
    })(window)
</script>