Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
flowen

scrolltrigger: animation skips when scrolling direction is -1 (threejs model)

Recommended Posts

👇

 

codesandbox

 

Having some fun over the week with this little threejs+scrolltrigger

Unfortunately when ya scroll back up a few animations are skipped.

 

I tried replacing the .to()'s with .fromto()'s but they had no effect.

 

Any other suggestions? thanks guys!

 

Link to post
Share on other sites

Hey flowen. You've got quite a bit going on in that sandbox. Can you please try to strip out everything that's not related to your question?

Link to post
Share on other sites
15 hours ago, ZachSaucier said:

Hey flowen. You've got quite a bit going on in that sandbox. Can you please try to strip out everything that's not related to your question?

ah I understand. Is it okay if I refer you to the code instead? 

 

Controller.js

init()

r74-75 a gsap.set for initial settings

 

intro()

r88 intro animation

 

createScrollTriggers()

r155 here I create a timeline based on the `data-scroll-trigger` attributes in the index.html

So I loop through each attr and based on the data-name add to the timeline that contains the scrolltriggers.

 

If this isn't clear I don't mind creating a new one at all ✌️

 

 

 

 

Link to post
Share on other sites

Ya, it'd be helpful if you made a more minimal demo. Maybe just move a rectangle around and see if you can recreate the jumping. That will likely help you figure out the issue yourself.

Link to post
Share on other sites

That's because you've created overlapping/conflicting ScrollTriggers that are trying to control the same thing at the same time (fighting for control). I just added this to log the raw start/end values: 

gsap.delayedCall(0.01, () => ScrollTrigger.getAll().forEach(t => console.log("start", t.start, "end", t.end)));

 

And here's what it reported: 

start 332 end 1300
start 1063 end 1712
start 1713 end 2076
start 1949 end 2290
start 2163 end 2526
start 2399 end 2740

Notice, for example, that the first one ends at 1300 but the second one starts at 1063 meaning they overlap. Most of them overlap. That explains why things behave differently in reverse, as the rendering order gets flipped and the other one "wins". Does that make sense? 

 

I also noticed that you're not setting an "end" value, although you are setting an endTrigger. When exactly do you intend for the ScrollTriggers to end? Maybe you meant to define an end of "top top"? 

  • Like 3
Link to post
Share on other sites

@GreenSock thanks for that debug snippet! so useful, will save this for future use :) 

 

Thanks for explaining, this makes a lot of sense. I've been able to fix the overlapping problems by adjusting the end props and using the visual markers to do so. This snippet helped a lot (besides the visual markers). Thanks!

  • Like 1
Link to post
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.

×