Scrolltrigger and lottie animation active or not

[Pauline Brothier 4 Likes (Newbie)]

Hi everybody! 

I'm struggling to find when my animation is active or when it's not. 

I would like to display a div (#my-svg - the purple circle) when the animation is over, after scrolling, which it's working fine now, but when I scroll backwards, I would like that div to disappear. 

So I tried to find when the animation is active or not but it doesn't work, maybe because I use goToAndStop? 

I feel like it's not a big deal, but I can't seem to find the right methodology.

Thanks for your help  

See the Pen XWVVVQY by PaulettePaillette (@PaulettePaillette) on CodePen

[_Greg _ 123 Likes (Specialist)]

Hi! Did you try to use onReverseComplete same way like you use onComplete(but for hide div)

[Pauline Brothier 4 Likes (Newbie)]

Hi! 

I tried, but this is not the result that I looking for.

Using onReverseComplete, the div don't disappear before all the scroll animation up is finished. 

I would like the div appears when the animation is finished but disappear again when the animation reverse start. 

I hope I'm clear 😅

[akapowl 4,682 Likes (Superhero)]

Hello Pauline,

 

I'm not sure I understand what exactly it is you are trying to achieve because your codepen example doesn't work and throws errors all over the place.

 

You can check whether a ScrollTrigger, timeline or tween is Active via .isActive/.isActive() - sometimes it's as simple as that 🙃

 

But if I am not totally off track here, you could also just use the LottieScrollTrigger's onLeave/onEnterBack callbacks 🤔

 

See the Pen yLpKyPO by akapowl (@akapowl) on CodePen

 

 

Edit:

And if you want to detect when the scrubbing of the animation stops (since because of the scrub value it will stop a bit after the end of the ST is being passed), which after reading your question again might come closer to what you intend,  you could use the onScrubCompletecallback, maybe something like this. That way you wouldn't have to tinker with the helper function.

 

See the Pen qBpoZLz by akapowl (@akapowl) on CodePen

 

[Pauline Brothier 4 Likes (Newbie)]

Thanks @akapowl the first solution with onLeave/onEnterBack callbacks works as I wanted, it's perfect!