flowen Posted November 6, 2020 Share Posted November 6, 2020 👇 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 comment Share on other sites More sharing options...
ZachSaucier Posted November 6, 2020 Share Posted November 6, 2020 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 comment Share on other sites More sharing options...
flowen Posted November 7, 2020 Author Share Posted November 7, 2020 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 More sharing options...
ZachSaucier Posted November 7, 2020 Share Posted November 7, 2020 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 comment Share on other sites More sharing options...
flowen Posted November 8, 2020 Author Share Posted November 8, 2020 @ZachSaucier I've simplified the example right here I still face the exact same issue. While scrolling up a lot of tweens are kinda skipped.. Link to comment Share on other sites More sharing options...
GreenSock Posted November 9, 2020 Share Posted November 9, 2020 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"? 3 Link to comment Share on other sites More sharing options...
flowen Posted November 9, 2020 Author Share Posted November 9, 2020 @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! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now