Jump to content
GreenSock

Pauline Brothier

Scrolltrigger and lottie animation active or not

Go to solution Solved by akapowl,

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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 😅

Link to comment
Share on other sites

  • Solution

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

 

  • Like 5
Link to comment
Share on other sites

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

 

  • Like 1
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.
×