Facing lottie_svg.min.js:13 Error: <path> attribute transform: Expected number, "matrix(NaN,NaN,NaN,NaN,…". when I tried to change the text in animation using bodymovin

[Preethi2706]

According to https://github.com/airbnb/lottie-web/issues/508 , I thought it would be fixed with the latest release . But , we are still facing the same error.

I will attach the code snippet below .

Note : I am trying to use 2 animations (.JSON) to be used alternatively to be picked by the system randomly and use the text thats given by the user . I have even raised issues on the same : https://github.com/airbnb/lottie-web/issues/2755 https://github.com/airbnb/lottie-web/issues/2754 https://github.com/airbnb/lottie-web/issues/2751

function AJAXget(url) {
        const R = new XMLHttpRequest(); //Create the object
         R.open("GET", requestUrls[current], true); // requestURL array contains the path of the JSONs files. 
         R.send();
          R.onreadystatechange = function () {
              if (R.readyState == 4 && R.status == 200) {
                responseText[current] =JSON.parse(R.responseText);
                  ++current;

                  if (current < requestUrls.length){ //If there is a next URL
                        AJAXget(requestUrls[current]);
                  } 
                  else {
                      paramFunc();
                  }
             }

}

    }

    AJAXget(requestUrls[current]);

      function paramFunc() {

                        //await AJAXget(requestUrls[current]);

                        for(let i=0 ; i<current ; i++){

                            for(let j=0 ; j<responseText[i].assets.length ; j++){
                                responseText[i].assets[j].layers[0].t.d.k[0].s.t= text_after_split[0];
                                text_after_split.shift();
                                }

                            }

                        var params0 = {
                            container : document.getElementById('lottie'),
                            renderer : 'svg',
                            loop : true,
                            autoplay : false,
                            animationData : responseText[0]

                        //path: "https://gist.githubusercontent.com/Preethi2706/509fe51b2af5fd493077ddb649fde99b/raw/31940800a4f52391b5c88dd32c851c17c1aea652/Titles181.json",
                        };
                        var params1 = {
                            container : document.getElementById('emoji_1'),
                            renderer : 'svg',
                            loop : 1,
                            autoplay : false,
                            animationData : responseText[1]
                        //path: "https://gist.githubusercontent.com/Preethi2706/16e8cac3537b9da5bcd26d6bad0606d6/raw/f04b175ed78b94fef83eb945f65f372c2f48910d/Titles182.json",
                        };
                        var params2 = {
                            container : document.getElementById('emoji_2'),
                            renderer : 'svg',
                            loop : 1,
                            autoplay : false,
                            animationData : responseText[0]
                        //path: "https://gist.githubusercontent.com/Preethi2706/509fe51b2af5fd493077ddb649fde99b/raw/31940800a4f52391b5c88dd32c851c17c1aea652/Titles181.json",
                        };
                        var params3 = {
                            container : document.getElementById('emoji_3'),
                            renderer : 'svg',
                            loop : 1,
                            autoplay : false,
                            animationData : responseText[1]
                        //path: "https://gist.githubusercontent.com/Preethi2706/16e8cac3537b9da5bcd26d6bad0606d6/raw/f04b175ed78b94fef83eb945f65f372c2f48910d/Titles182.json",

                        };
                        var params4 = {
                            container : document.getElementById('emoji_4'),
                            renderer : 'svg',
                            loop : 1,
                            autoplay : false,
                            animationData : responseText[0]
                        //path: "https://gist.githubusercontent.com/Preethi2706/509fe51b2af5fd493077ddb649fde99b/raw/31940800a4f52391b5c88dd32c851c17c1aea652/Titles181.json",

                        };

                        var anim0 = bodymovin.loadAnimation(params0);
                        var anim_emoji = [ 0, 0, 0, 0 ];
                        var anim_play = [ 0, 0, 0, 0 ];
                        var emojiBox = [ document.getElementById("emoji_1"),
                                document.getElementById("emoji_2"),
                                document.getElementById("emoji_3"),
                                document.getElementById("emoji_4"), ];
                        var countPlays = 0;
                        var fade_in = 0;
                        var check = 0;
                        var nr = random_9();
                        var first = nr - 1;
                        var ii = 'params' + nr;
                        var pulse_count = 1;

                        anim_emoji[first] = lottie.loadAnimation(eval(ii));
                        lottieBox = document.getElementById("lottie");

                        //anim0.addEventListener('DOMLoaded',function() {

                                            lottieBox.style.opacity = "1";

                                            anim0.play();

                                            emojiBox[first].style.opacity = "1";
                                            //anim_emoji[first].assets[0].layers.nm = "example";

                                            anim_emoji[first].play();
                                            anim_play[first] = 1;
                                            countPlays++;

                                            anim_emoji[first].onLoopComplete = function() {
                                                anim_emoji[first].onEnterFrame = function() { 

                                                    if ((check == 0)
                                                            & (anim_emoji[first].currentFrame > (anim_emoji[first].totalFrames - 4))) {
                                                        check = 1;
                                                        fade(emojiBox[first]);
                                                        anim_loop();
                                                    }
                                                }

                                            }

                        function anim_loop() {
                            var number;
                            var check2 = 0;
                            if (countPlays < 4) {
                                do {
                                    number = random_9();
                                } while (anim_play[number - 1] == 1);

                                anim_emoji[number - 1] = lottie
                                        .loadAnimation(eval('params' + number));
                                anim_play[number - 1] = 1;
                                countPlays++;
                                unfade(emojiBox[number - 1]);
                                anim_emoji[number - 1].play();

                                if (pulse_count == 1) {

                                    pulse_count = 0;
                                } else {
                                    pulse_count++;
                                }

                                anim_emoji[number - 1].onLoopComplete = function() {

                                    anim_emoji[number - 1].onEnterFrame = function() {

                                    /*  for(let i=0 ; i< anim_emoji[number - 1].assets.length ; i++){
                                            anim_emoji[number - 1].layers[i].t.d.k[0].s.t = text_after_split[i];
                                            } */

                                        if ((check2 == 0)
                                                & (anim_emoji[number - 1].currentFrame > (anim_emoji[number - 1].totalFrames - 4))) {
                                            check2 = 1;
                                            fade(emojiBox[number - 1]);
                                            anim_loop();

                                        }
                                    }
                                }
                            } else {
                                emojiBox[0].innerHTML = "";
                                emojiBox[1].innerHTML = "";
                                emojiBox[2].innerHTML = "";
                                emojiBox[3].innerHTML = "";

                                anim_play = [ 0, 0, 0, 0 ];
                                countPlays = 0;
                                anim_emoji = [ 0, 0, 0, 0 ];
                                anim_loop_loaded();
                            }
                        }

                        function anim_loop_loaded() {
                            var number;
                            var check2 = 0;
                            if (countPlays == 4) {
                                emojiBox[0].innerHTML = "";
                                emojiBox[1].innerHTML = "";
                                emojiBox[2].innerHTML = "";
                                emojiBox[3].innerHTML = "";

                                countPlays = 0;
                                anim_play = [ 0, 0, 0, 0 ];
                                anim_emoji = [ 0, 0, 0, 0 ];
                            }
                            do {
                                number = random_9();
                            } while (anim_play[number - 1] == 1);

                            anim_emoji[number - 1] = lottie
                                    .loadAnimation(eval('params' + number));
                            anim_play[number - 1] = 1;
                            countPlays++;
                            unfade(emojiBox[number - 1]);
                            anim_emoji[number - 1].play();

                            if (pulse_count == 1) {

                                pulse_count = 0;
                            } else {
                                pulse_count++;
                            }

                            anim_emoji[number - 1].onLoopComplete = function() {
                                anim_emoji[number - 1].onEnterFrame = function() {

                                    if ((check2 == 0)
                                            & (anim_emoji[number - 1].currentFrame > (anim_emoji[number - 1].totalFrames - 4))) {
                                        check2 = 1;
                                        fade(emojiBox[number - 1]);
                                        anim_loop_loaded();

                                    }
                                }
                            }

                        }
                        function selectFirst() {
                            var nr = random_9();
                            var ii = 'params' + nr;
                            anim_emoji[nr - 1] = lottie.loadAnimation(eval(ii));
                            emojiBox[nr - 1].style.opacity = "1";
                            anim_emoji[nr - 1].play();
                            anim_play[nr - 1]++;
                            countPlays++;

                        }

                        // returns a random value between 1-10;
                        function random_9() {
                            // i = 'params'+ (Math.floor(Math.random()*9+1));
                            var i = (Math.floor(Math.random() * 4 + 1));
                            return i;
                        }
                        function fade(element) {
                            var op = 1; // initial opacity
                            var timer = setInterval(function() {
                                if (op <= 0.1) {
                                    clearInterval(timer);
                                    element.style.display = 'none';
                                }
                                element.style.opacity = op;
                                element.style.filter = 'alpha(opacity=' + op
                                        * 100 + ")";
                                op -= op * 0.1;
                            }, 15);
                        }

                        function unfade(element) {
                            var op = 0.1; // initial opacity
                            element.style.display = 'block';
                            var timer = setInterval(function() {
                                if (op >= 1) {
                                    clearInterval(timer);
                                }
                                element.style.opacity = op;
                                element.style.filter = 'alpha(opacity=' + op
                                        * 100 + ")";
                                op += op * 0.1;
                            }, 15);
                        }

                        }

@bodymovin Could you please provide your input on this? My application using bodymovin , is kept on hold because of this issue.

[bodymovin]

hi, can you share a simplified example that I can review? A github project or a working link will be helpful.

[daganchen]

Having the same issue, watching. Just taking note that the site and the animation works properly but the issue does not stop to fire.

can be viewed on our login page:link

[Preethi2706]

hi, can you share a simplified example that I can review? A github project or a working link will be helpful.

I am still developing it locally , so not sure how to show you. Will you be able to refer the other issues mentioned above so that you can get an idea?

Or I can attach that HTML file for your reference. renderedVideo.txt

Sorry for the inconvenience. But I am stuck for months on this. The client who relied upon has started giving up on me. Could you pls guide me on this pls ? @bodymovin

If any alternative solution to display the user provided text in the animations (using more than 2 animations and splitting the texts between the animations) , would be so much helpful for me. @bodymovin

[Preethi2706]

@bodymovin Could you pls look into this?

[bodymovin]

@daganchen I downloaded the json and it play correctly locally. It seems it's an old animation (version 4.8.0) and it might be related to using it with a newer player, but I can't confirm it locally. If you can share a reduced example, that could be helpful.

[bodymovin]

@Preethi2706 I'd need to check an implementation to see what is going on. Can you upload it to codepen for example?

[Preethi2706]

@bodymovin Please find the HTML code which has the implementation : https://codepen.io/PreethiRam/pen/bGLwzOy

I am still stuck thinking if I can use a new animation , pls help.

[Preethi2706]

@bodymovin are you able to figure out my code? could you please help me out here?

[bodymovin]

@Preethi2706 The example you shared is hard to follow. Unfortunately I don't have the time at this moment to review such a complex scenario with code unrelated to lottie.
If you can share a simple example to reproduce the issue with a good description of what is going on, I'll take a look.