[How do I use more than one funcition on ScrollTrigger OnToggle?]

4 minutes ago, ZachSaucier said:

You can only call one function in the onToggle. But you can easily call two functions from that function:

onToggle: () => {
  countingNumbers1();
  countingNumbers2();
}

 

Thank you. It worked!

[How do I use more than one funcition on ScrollTrigger OnToggle?]

How do I use more than one fucntion on onToggle? I managed to make it work with one function, but when I tried to use more than one both doesn't work.

 

tl_numbers = gsap.timeline({

    scrollTrigger: {

        trigger: ".counter-sec",

        start:"top 100%", 

        toggleActions: "play reset resume reset",

        onToggle: countingNumbers1 + countingNumbers2

      }

})

[Animation takes too long to reverse]

8 hours ago, GreenSock said:

Welcome to the forums, @hateusall. 

 

Hm, the CodePen doesn't seem to have any of that functionality in it - did I miss something? How can I reproduce the issue? 

 

There are definitely some logic problems in your code, though. And some other things:

1. You're creating a timeline once and then you keep adding more and more and more tweens to it each time the user clicks. You're adding tweens to a completed timeline. Instead, you should just create a new one each time and then when it's done it'll automatically be garbage collected rather than building up in a timeline uselessly. Or (even better) you can just create the animation once and then play()/reverse() it. 
2. You're using the old syntax. In GSAP 3, there's no need for TimelineMax, TimelineLite, TweenLite, or TweenMax. It's all hung off the "gsap" object. Much simpler. 
3. You've got a ton of redundant code in there, like for each of the nav elements you're basically doing the same thing. You could greatly simplify your code by either using a loop or a helper function. 

I'd strongly recommend reading this article that was released today because covers a lot of these issues:

 

If you still need some help, we'd be happy to lend a hand but we'll need a little guidance about how to reproduce the issue you're talking about. 

 

Happy tweening!

 

 

Thank you for the anwser.

 

I'm going to read the article. I'm sorry for codepen, the problem I'm having happens to screen with <1200px and I don't know how to force Codepen to open on mobile version. But it's ok, I'll follow all things you said.

[Animation takes too long to reverse]

I'm trying to make a simple navbar animation, but I'm struggling with the delay. When I have to reverse the animation, it takes too long to start reversing, like 2~3 seconds.

 

I uplodaed a gif and also linked the codepen.

See the Pen mdVpBNb by hateusall (@hateusall) on CodePen