Is there a way to prevent load of lottie animation according to conditionnal visibility?

Design help Custom code
1

Hi,
I’m currently finishing up a project with lottie interactions in cms pages and was wondering if anyone had figured out a way to prevent the load of lottie elements if the parent div has a conditional visibility set to hidden.
I see that after initial page load an xhr request is made by webflow for the lottie element regardless of the parent div being visible or not. This means for a page template where you would not have the animation visible it would still load in the background…
I’ve tried using jquery load only if visibility of parent is set but it doesn’t load the lottie element properly and therefore it doesn’t work.
Any ideas how to acheive this ? Because for now it means my template page loads irrelevant lottie animations in the background which is probably a bad thing for page speed or at least in regards to used bandwith for mobile users.

Thanks so much !

Here’s a page where the lotties are :

And one where they are hidden but still load :

2

Could it be possible to use an xhr abort() for instance ?
In this spirit : javascript - Abort Ajax requests using jQuery - Stack Overflow

3

Has anyone solved this topic? :slight_smile:

I have the same issue, I have 2 separate lottie animations, one for mobile portrait breakpoint and one for the other breakpoints, however the website downloads both of them regardless of the visibility (I put hidden on both the parent div and the lottie itself).
I tried using the following script before the tag:

$( document ).ready(function() {
if ($(window).width() > 479) {
$(‘#first-lottie-wrap-mobile’).remove();
}
});

I also tried to remove the webflow animation I’ve created for this lottie on mobile, but both attempts rendered the same result, the lottie gets downloaded.

Is there a way to stop the load of the unnecessary lottie file (or any other resource for that matter)?

Here’s my read-only link:
https://preview.webflow.com/preview/bhout-dev?utm_medium=preview_link&utm_source=designer&utm_content=bhout-dev&preview=ee74dd04a2c6af7d7657729ca465eb92&workflow=preview

Thanks in advance for anyone that spends time on analysing this issue :slight_smile:

4

I almost got the code to work, but it is overruled later and my coding skills end about there. This is the code I added before the closing body tag:

<script type="text/javascript">
if ($(window).width() < 991) {
    var xhr = jQuery.ajax({
        type: "GET",
        timeout: 10000, //redundant
        url: "https://uploads-ssl.webflow.com/filename.json"
    });

    //kill the request
    xhr.abort()
}
</script>

Console gives 2 messages, first one says XHR failed loading the resources, but then a little later it says finished loading and so the file is loaded. Maybe someone expand on this?