Lottie Web renders 2 svgs in the container

Lottie in Web
1

Hello everyone:)

I’m trying to implement lottie animation, which I exported from AE with bodymovin. I noticed that lottie renders 2 SVG elements in my container, which are stacked. And when I try to seek the animation (with goToAndStop() method), only the bottom animation is changing. Can anyone explain why is it like that, and can I make lottie render only one SVG?

 var container = document.getElementById("canvas-container");

 this.animation = lottie.loadAnimation({
        container: container,
        renderer: "svg",
        loop: false,
        autoplay: false,
        animationData: animData,
      });

Screenshot 2023-11-16 at 11.43.30
Screenshot 2023-11-16 at 11.43.30850×574 81.4 KB

2

@Kateryna not sure if the export issue caused by the bodymovin plugin but have you tried LottieFiles AE plugin? Do give it a try to export using the LottieFiles AE plugin and see if the problem gets resolved.

3

Hi, @Kateryna could you share screenshot of the html tag (canvas-container), so I can take look how you have implemented the animation?

Or here is the example how I implement the interactive code, remember this is specifically for goToAndPlay

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LottieFiles</title>
    <style>
        body {
            background-color: aliceblue;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container {
            width: 300px;
        }

        .button-row {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 60vw;
        }

        button {
            height: 40px;
            width: 120px;
            padding: 5 10 5 10;
            background-color: rgb(81, 81, 255);
            color: white;
            font-weight: 700;
            font-size: medium;
            border: none;
            margin: 5px;
            border-radius: 3px;
        }
    </style>
</head>

<body>
    <div id="container"></div> <!-- This container takes LottieFiles object-->
    <div class="button-row">
        <button onclick="play('bird')">Bird</button>
        <button onclick="play('explosion')">Explosion</button>
        <button onclick="play('feather')">Feather</button>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"
        integrity="sha512-jEnuDt6jfecCjthQAJ+ed0MTVA++5ZKmlUcmDGBv2vUI/REn6FuIdixLNnQT+vKusE2hhTk2is3cFvv5wA+Sgg=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script>

        var container = document.getElementById('container');

        var jsonPath = 'https://assets2.lottiefiles.com/private_files/lf30_k9zqevoo.json';

        //LottieFiles object created
        var animation = lottie.loadAnimation({
            container: container,
            renderer: 'svg',
            loop: true,
            autoplay: true,
            path: jsonPath,
        });

        // Initial animation when an object is created and animation is loaded into DOM
        animation.addEventListener("DOMLoaded", () => {
            animation.goToAndPlay('bird', true);
        });

        // Function that takes a string and passed to the method 'goToAndPlay(value/marker name,isFrame)'and plays
        function play(frames) {
            switch (frames) {
                case 'bird':
                    animation.goToAndPlay(frames, true);
                    break;
                case 'explosion':
                    animation.goToAndPlay(frames, true);
                    break;
                case 'feather':
                    animation.goToAndPlay(frames, true);
                    break;
                default:
                    break;
            }

        }

        //Container in which LottieFiles object is injected and that targeted to handle DOM events but not .lottie.min.js events
        // container.addEventListener('click', () => {
        //     play(animation, 'feather');
        //     animation.addEventListener('loopComplete', () => {
        //         play(animation, 'bird');
        //     });
        // });

    </script>
</body>

</html>