GSAP timeline doesn't get back as 0 when scroll back

[AnDinh 2 Likes (Newbie)]

Hi,

I'm having a weird problem with gsap timeline. I'm trying to play GLTF animation base on scroll, but for some reason, when you scroll down then scroll back up, the timeline doesn't get back to 0 AKA the animation doesn't get back to its initial state. I set console.log and turn out the time just skip 1-2 seconds at the start of the animation.

 

It seems like this only occurs when the end is set above 1000%. Is there a way to prevent this from happening?

 

Disclaimer: This code is modified from GreenStock codepen , link: 

See the Pen PomoJNN?editors=1111 by GreenSock (@GreenSock) on CodePen

 

See the Pen xxJJGYq?editors=1111 by Andinh123 (@Andinh123) on CodePen

[Rodrigo 5,077 Likes (Superhero)]

Hi @AnDinh and welcome to the GreenSock forums!

 

I think the issue stems from something else in your setup. As you can see in this example the end value doesn't cause any issue whatsoever:

See the Pen poZZjaP by GreenSock (@GreenSock) on CodePen

 

If you inspect the element the values are the correct ones. This doesn't seem related to GSAP. Unfortunately I know nothing about THREE so I can't help you with that. Hopefully other users with more experience in it can chime in and spot the issue.

 

Sorry I can't be of more assistance. Let us know if you have more questions.

Happy Tweening!

[AnDinh 2 Likes (Newbie)]

On 1/29/2023 at 4:48 AM, Rodrigo said:

Hi @AnDinh and welcome to the GreenSock forums!

 

I think the issue stems from something else in your setup. As you can see in this example the end value doesn't cause any issue whatsoever:

 

 

 

If you inspect the element the values are the correct ones. This doesn't seem related to GSAP. Unfortunately I know nothing about THREE so I can't help you with that. Hopefully other users with more experience in it can chime in and spot the issue.

 

Sorry I can't be of more assistance. Let us know if you have more questions.

Happy Tweening!

I do think the problem doesn't come from ScrollTrigger. I've made some change to the "running model" code pen to see what's wrong. Turn out, the method to link THREE js and ScrollTrigger from that Codepen just broken with the animation is too long and/or the end-amount is big. The combination of both result in proxy.time jumping