Jump to content
GreenSock

Sameer_mishraa

Preloader not working on Lottie Animation

Recommended Posts

Hi,

So I basically have a div which has my Lottie Animation which I have hooked with ScrollTrigger using one of the helper functions as mentioned here. Everything is working fine except I want to add a preloader to my website.

 

I deployed the entire code using jQuery and am firing the preloader on window load but the Lottie animation doesn't seem to follow that. My Lottie file loads after everything has loaded and preloader has been hidden due to window load. What should I do ? I'm stuck.

 

Thanks in advance.

Link to comment
Share on other sites

Hi Sameer,

 

If you need help, please provide a minimal demo that shows the issue.

 

  • Like 1
Link to comment
Share on other sites

Thanks in advance @OSUblake.

 

After browser caching the interval becomes very small but it still can be seen or can be clearly observed in incognito mode).

Link to comment
Share on other sites

Thanks for the demo! The window load event only covers stuff that is in the DOM, so a Lottie file wouldn't be part of that as it is initiated separately.

 

I just added an onLoad callback to LottieScrollTrigger helper. Is that better?

 

See the Pen ExwzdgR by GreenSock (@GreenSock) on CodePen

 

  • Thanks 1
Link to comment
Share on other sites

@OSUblake Sir I checked it on a live tunnel and it seems to work in my mobile BUT I just had one doubt, when I test the code in through developer tools by setting Throttling to Fast 3G then it doesn't (I have a button as well beneath that lottie div so that button appears on the screen and after a few seconds the lottie appears) Why could it be so ?

 

Also, thanks a lot for that onLoad addition I couldn't figure it out!

 

Edit: I just checked and that button seems to appear beforehand in mobile as well (It just loads faster in it so wasn't visible for the first time).

Link to comment
Share on other sites

Hm... I'm not seeing that problem. Are you sure the json file is completely loaded, and the onLoad is firing?

 

image.png

 

Beyond that, there's not a lot we can really do to troubleshoot if we can't reproduce the same issue. It might be something with the throttle messing with Lottie. 🤷‍♂️

 

  • Like 1
Link to comment
Share on other sites

See, preset is on Fast 3G and I just have a button next to the lottie div.

At this moment, button has already appeared and preloader has faded out but the lottie has not rendered yet. 

image.thumb.png.fd01dab53299c6df13c005d741cbd839.png

 

@OSUblake this might help (I have a fontawesome icon attached to the button). 

What possibly is the issue here ?

Link to comment
Share on other sites

Not sure, but it doesn't sound like a GSAP issue.

 

I would try to isolate the problem, like remove GSAP from the equation. If it still doesn't load, then the issue is with Lottie or the dev tools. Remember that the devs tools is just a simulation and not real world.

 

See the Pen ExwzOMP by GreenSock (@GreenSock) on CodePen

 

  • Like 1
Link to comment
Share on other sites

Yeah I'll try isolating the issue here as you said

Link to comment
Share on other sites

Hey @OSUblake just one more thing

Sorry to disturb you one last time...

    <div id="animation"></div> // This div through css media query is set to be visible only in mobiles
    <div id="desktopAnimation">  // This div through css media query is set to be visible only in desktops
    <div>
 <div class="spinner-wrapper">
     <div class="spinner"></div>
 </div>
 
    <button class="btn" onclick="location.href='http://www.google.com'" type="button">
        <i style="margin-right: 10px" class="fab fa-google-play"></i> Download</button>
</div>
// Button is common in both, both point to different json files which is linked to same js file
The js code is exactly how you guided me @OSUblake but the moment I add this #desktopAnimation, the button starts appearing before #animation loads in mobile. What extra according to you needs to be added to the onload callback ? Or anything else ?
Link to comment
Share on other sites

I'm not sure. Can you put together a demo that shows the issue?

Link to comment
Share on other sites

56 minutes ago, OSUblake said:

I'm not sure. Can you put together a demo that shows the issue?

Here is the updated 

See the Pen eYGaLxW by sameer-mishra1 (@sameer-mishra1) on CodePen

 @OSUblake .

Sorry, making it took a little bit of time. 

Also, the greensock site is apparently preventing to upload a size of bigger image, but as here you can see, the button is appearing before the lottie animation gets rendered.

And sir this is occuring only when I am adding an extra div to the html (the one with #desktopAnimation and it points to a different animation as mentioned in js). Why is this happening? I am unable to figure it out.

 

 image.png.2942bf21db37ca046dc911514667a88c.png

 

12 hours ago, OSUblake said:

I just added an onLoad callback to LottieScrollTrigger helper. Is that better?

Do I need to add anything else if there's going to be another animation in a different viewport (as I have written in 

See the Pen eYGaLxW by sameer-mishra1 (@sameer-mishra1) on CodePen

)

If you can't observe the appearance of button, set throttling to a lower network then see (mind you, this is happening in devices as well, not only in dev tools) 

 

Thanks and regards.

Link to comment
Share on other sites

I don't know what you mean. The button becomes visible when the spinner fades out, even when I use throttle.

 

See the Pen vYeqXxR by GreenSock (@GreenSock) on CodePen

 

I  see no indication that there is an issue with GSAP. Like I said above, remove GSAP from the equation. If you still see the issue, then you know its a Lottie issue or something with your dev environment.

 

Link to comment
Share on other sites

19 hours ago, Sameer_mishraa said:

And sir this is occuring only when I am adding an extra div to the html (the one with #desktopAnimation and it points to a different animation as mentioned in js). Why is this happening? I am unable to figure it out.

 

Do I need to add anything else if there's going to be another animation in a different viewport (as I have written in the html)

If you can't observe the appearance of button, set throttling to a lower network then see (mind you, this is happening in devices as well, not only in dev tools) 

 

Thanks and regards.

Hey @OSUblake , 

so after hours of inspecting and isolating elements, I figured out a work around.  

Removing the onload fadeout callback for the second animation div (the #desktopAnimation one) from the js file. 

I don't know why though, whether it's a bug or something which was causing a conflict, but now after removing that line, the animation and preloader both are displaying perfectly in all the viewports and also in all the network throttling conditions.

 

And your help is deeply appreciated.

Thanks a lot.

 

p.s Attaching the js code below just in case if anyone finds it helpful.

 

gsap.registerPlugin(ScrollTrigger)


 
LottieScrollTrigger({
    target: "#animation",
    path: " "// Attach the animation file
    speed: "slow",
    scrub: 2, // seconds it takes for the playhead to "catch up"
    // you can also add ANY ScrollTrigger values here too, like trigger, start, end, onEnter, onLeave, onUpdate, etc. See https://greensock.com/docs/v3/Plugins/ScrollTrigger
    onLoad() {
        $('.spinner-wrapper').fadeOut('slow');
    }
});
 
LottieScrollTrigger({
    target: "#desktopAnimation",
    path: " "// Attach the animation file
    speed: "slow",
    scrub: 2, // seconds it takes for the playhead to "catch up"
    // you can also add ANY ScrollTrigger values here too, like trigger, start, end, onEnter, onLeave, onUpdate, etc. See https://greensock.com/docs/v3/Plugins/ScrollTrigger
    onLoad() {
        // $('.spinner-wrapper').fadeOut('slow');
    }
});
 
function LottieScrollTrigger(vars) {
    let playhead = {frame: 0},
        target = gsap.utils.toArray(vars.target)[0],
        speeds = {slow: "+=3000", medium: "+=1000", fast: "+=500"},
        st = {trigger: target, pin: true, start: "top top", end: speeds[vars.speed] || "+=1000", scrub: 1},
        animation = lottie.loadAnimation({
            container: target,
            renderer: vars.renderer || "svg",
            loop: false,
            autoplay: false,
            path: vars.path
        });
    for (let p in vars) { // let users override the ScrollTrigger defaults
        st[p] = vars[p];
    }
    animation.addEventListener("DOMLoaded", function() {
        gsap.to(playhead, {
            frame: animation.totalFrames - 1,
            ease: "none",
            onUpdate: () => animation.goToAndStop(playhead.frame, true),
            scrollTrigger: st
        });
    // in case there are any other ScrollTriggers on the page and the loading of this Lottie asset caused layout changes
    ScrollTrigger.sort();
    ScrollTrigger.refresh();
   
    vars.onLoad() && vars.onLoad();
    });
  return animation;
}
  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×