Jump to content
Search Community

Independent animation after ScrollTrigger problem

Cheslav test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

Hello community! 

 

I can't figure out how to replay tween after main ScrollTrigger. In the Codepen I have an example, on the first scroll end there is a beam, but if you scroll up again and try to get the same animation (after ScrollTrigger ends), it doesn't replay. I've tried to clear animation inside onComplete like 

onComplete: () => {
 	circleTl.time(0).kill() 
}

But no luck. How to solve that?

 

Thanks! 

See the Pen PomLZzv?editors=1111 by Anoshko (@Anoshko) on CodePen

Link to comment
Share on other sites

  • Solution

Killing the animation won't help.

 

If you're just trying to replay it when scrolling down, you could just add a callback to your timeline. Something like this, and choose when it should fire.

 

buttonTl.add(() => {
  if (buttonTl.scrollTrigger.direction > 0) {
    circleTl.play(0)
  }
}, 0.5)

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

14 hours ago, OSUblake said:

Killing the animation won't help.

 

If you're just trying to replay it when scrolling down, you could just add a callback to your timeline. Something like this, and choose when it should fire.

 


buttonTl.add(() => {
  if (buttonTl.scrollTrigger.direction > 0) {
    circleTl.play(0)
  }
}, 0.5)

 

Thanks a lot, it worked! 

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.
×
×
  • Create New...