Jump to content
Search Community

Scroll Trigger to() logic issue?

kabocreative test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hi there,

I've got Scroll Trigger working on a timeline with toggle actions: play pause restart pause

 

As expected when scrolling back up after leaving the viewport the timeline restarts.

Problem: on restart the second .to tween jumps by the x value rather than the smooth to. animation as per the first load before Scroll Trigger gets involved (I've commented in codepen to show where this issue occurs)

 

Most Common ScrollTrigger Mistakes docs shows exactly this under 'Creating to() logic issues', but in that example it is if you applied Scroll Trigger to both tweens and the solution is to apply it to the timeline instead.

I'm already applying it to the timeline but getting the same error.

Big thanks to anyone who might see what I'm doing wrong here!

See the Pen ExEmePd by kabocreative (@kabocreative) on CodePen

Link to comment
Share on other sites

  • Solution

Yep, it's a logic issue in your code. You've got an endlessly repeating animation at the end of your timeline that has repeatRefresh: true which basically calls invalidate() on every repeat, but then you restart() its parent timeline in a toggleAction which REWINDS that child/repeating animation (thus applying whatever the START values happened to be on the very last repeatRefresh), and you didn't invalidate() it to flush out those values, thus the first iteration on the restart will use those recorded start values. 

 

You can just separate out that one tween and call invalidate() on it manually in an onEnterBack: 

 

See the Pen MWVogjR?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Thanks 1
Link to comment
Share on other sites

Thanks for taking the time to explain how I caused a logic issue and the way to resolve it!

I'm pretty sure this doesn't count so much as a GSAP issue, but more a general logic issue.. so also thanks for offering support outside of the bounds of this forum. I'd sunk a couple of days into this and was getting nowhere fast.

One month ago I'd never touched GSAP. Now with the help of a course I've got this going. Pretty impressive how easy it is to pick up, and I'm sure if I also work on improving my general JS skills the sky is the limit :)

  • Like 2
Link to comment
Share on other sites

14 hours ago, kabocreative said:

I'm pretty sure this doesn't count so much as a GSAP issue, but more a general logic issue.. so also thanks for offering support outside of the bounds of this forum. I'd sunk a couple of days into this and was getting nowhere fast.

Happy to help! Been there - sinking days into a logic issue is super frustrating. But such a relief when it's resolved!

 

14 hours ago, kabocreative said:

One month ago I'd never touched GSAP. Now with the help of a course I've got this going. Pretty impressive how easy it is to pick up, and I'm sure if I also work on improving my general JS skills the sky is the limit :)

Fantastic! You've come a long way in one month. 🥳 Your animation superpowers are growing.

 

Which course are you taking? Creative Coding Club? 

  • Like 1
Link to comment
Share on other sites

Yep Creative Coding Club. It is such a brilliant resource for GSAP and at a really affordable lifetime license price. So worthwhile!

I've been really impressed with how supportive the community is here in the forums and generally with tutorials and support. Really happy I've stumbled across it. Thanks so much for your help!

  • Like 3
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...