Jump to content
Search Community

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

flowen test
Moderator Tag

Recommended Posts

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 comment
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 comment
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 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...