Jump to content
GreenSock

AnDinh

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

Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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

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