Preloader with Lottie-web and Gsap 3

[ody]

Hi Mate,

I am new here and i started learning GSAP3. I tried to achieve a preloader animation but i got an error in my console. trying to understand how GSAP 3 works is a bit strange for me, Please any suggestion?

NB: I used Gsap3 and lottie-web

See the Pen qBEWPdN by odylight (@odylight) on CodePen

[ody]

when i tried to downgrade to GSAp 2...the animation works well... so what causes that warning with GSAP 3 on "$progressBarTop" ? Any advise please? 

[ZachSaucier]

Hey ody and welcome to the GreenSock forums,

 

If you go to the function that's looking for $progressBarTop, _onEnterFrameListener, and you console.log(this); you can see that this is undefined. So that (wrong context) is your issue. You can fix it by using .call() and passing in this when calling the function: gsap.ticker.add(t._onEnterFrameListener.call(this));

[ody]

Hey @ZachSaucier, thank you for your response. i tried what you shown, but it still doesn't work.

[ZachSaucier]

Right, there's another error related to t not being a function. I was helping with the issue you posted about  

 

I'm not sure where the t not being a function is coming from.

[ody]

here is the preloader with GSAP 2

See the Pen YzPKaXO by odylight (@odylight) on CodePen

[OSUblake]

Sorry, but your code is sooooooooooooo hard to read with all those (),((((((()))),((()),((((),((()))). It took me 10 minutes just to figure out where to start.

 

You would need to bind it.

t._onEnterFrameListener = t._onEnterFrameListener.bind(t);
gsap.ticker.add(t._onEnterFrameListener);

 

 

 

[ody]

7 minutes ago, OSUblake said:

Sorry, but your code is sooooooooooooo hard to read with all those (),((((((()))),((()),((((),((()))). It took me 10 minutes just to figure out where to start.

? You right, i'm still learning i would perform myself and using good style/best practise!

In the meantime, the advise you gave solve the error! Thank you!

See the Pen mdybxWg by odylight (@odylight) on CodePen