Multiple animations on a page, not all showing or playing

[thebobajob]

I am trying to display 4 (could be more) animations on a page from a selection of 4 (header and in 3 blocks lower down the page) but for some reason they don't all work. Some animations will only work in certain positions. They all seem to work in the header but after that 2 of the selections won't show. Could this be an issue with the JSON provided by the animator or with the way I have coded it. I have tried multiple things (all with the same declared vars, all with different vars, all with params as separate var...) but always the same problem. This is what I have now, four times on the page where the animationData var is always unique.

<script>
                      jQuery(document).ready(function () {
                        var animationDataPITCL = <?php echo $json; ?>;
                        lottie.loadAnimation({
                          container: document.getElementById('animation-<?php echo $block['id']; ?>'),
                          renderer: 'svg',
                          loop: true,
                          autoplay: true,
                          animationData: animationDataPITCL
                        })
                      });
                    </script>

I'm pulling my hair out with this as when it works it looks great. Any help appreciated, thanks.

[bodymovin]

hi, if you can share a link with the implementation I can try to take a look.

[thebobajob]

Thank you. It's very confusing. There are 3 animations on the page. The header animation works (this is random so the page may need refreshing to show it), the animation that goes with the %stat lower down won't show and then the clock animation lower down still works fine. The one that won't show works in the header but nowhere else but I can't control it with scroll like I can other animations. The code all seems to be in source correctly. I don't know if it's a problem with the animation or my code. The dev link is https://san-it.sndev.co.uk/

[bodymovin]

checking the source code, I see only 2 instances of lottie.loadAnimation view-source:https://san-it.sndev.co.uk/ could the other 2 be under some conditions that are not met?

[thebobajob]

It depends what comes up in the cyan header section. Sometimes it's a static logo in which case there will only be 2 instances. Sometime it's either a dominoes or a steps animation in which case there should be 3. It's always animSTAT that doesn't work though, irrespective of animations on screen. Am I making sense?

[thebobajob]

There should be an animation along with the 98%

[thebobajob]

It was a problem with the animation itself. The animator re-rendered it and he apparently "removed the expression and Keyframed everything" and it now works. Thanks for trying to help.