flowen Posted November 25, 2020 Share Posted November 25, 2020 CodeSandbox It's quite a bit of code, but let me guide you. I'm quite sure I located the code that's causing the problem(s). I'm just not sure how to fix it. Problem When browsing between pages, the model's position and rotation values start from (or reset) to a different value. When I remove the timelines from the file (described below), it all works properly. So my hunch is I'm doing something wrong regarding the creation of timelines/scrolltriggers or perhaps the removal of them. Perhaps the timeline get's stuck somewhere or scrolltrigger thinks it's being scrolled to the top perhaps? home/createScrollTriggers.js Here I create a timeline with a scrolltrigger for the index/home page. Created dynamically based on html data attributes. Update: What I tried: I tried moving the timeline to the highwayjs renderer. I tried removing the dynamic creation of the timelines. I tried using scrollTrigger.create() methods vs a timeline. None of it worked and I still have no clue why the values keep reseting. I'm also not sure how to trace where things are going wrong. I'm so stuck on this. I have no clue what I can try 🤔 Link to comment Share on other sites More sharing options...
akapowl Posted November 25, 2020 Share Posted November 25, 2020 Hey @flowen Did you maybe link to the wrong CodeSandbox? Because I can not make out anything about ScrollTrigger or page transitions/switching pages in the demo you linked to. Link to comment Share on other sites More sharing options...
flowen Posted November 25, 2020 Author Share Posted November 25, 2020 40 minutes ago, akapowl said: Hey @flowen Did you maybe link to the wrong CodeSandbox? Because I can not make out anything about ScrollTrigger or page transitions/switching pages in the demo you linked to. ups! you're right, I updated the url. Thanks! Link to comment Share on other sites More sharing options...
flowen Posted November 30, 2020 Author Share Posted November 30, 2020 Little bump with update in the main post Link to comment Share on other sites More sharing options...
akapowl Posted November 30, 2020 Share Posted November 30, 2020 Hey @flowen If you rip out everything that is related to the smooth-scroll library that you are using, you will notice that it works as intended. So it probably is an issue related to that and not to ScrollTrigger. https://codesandbox.io/s/magical-cherry-czdy9?file=/smoothscroll.js My guees would be, that the .disable functionality of that library is maybe not enough, and the instance would have to be completely destroyed and re-initiated instead when transitioning - but that is just a wild guess, because I don't know a thing about that library. Hope this helps somewhat, though. Cheers. Paul 1 Link to comment Share on other sites More sharing options...
flowen Posted November 30, 2020 Author Share Posted November 30, 2020 2 hours ago, akapowl said: Hey @flowen If you rip out everything that is related to the smooth-scroll library that you are using, you will notice that it works as intended. So it probably is an issue related to that and not to ScrollTrigger. https://codesandbox.io/s/magical-cherry-czdy9?file=/smoothscroll.js My guees would be, that the .disable functionality of that library is maybe not enough, and the instance would have to be completely destroyed and re-initiated instead when transitioning - but that is just a wild guess, because I don't know a thing about that library. Hope this helps somewhat, though. Cheers. Paul Thanks Paul for having a look, really appreciate! Tonight I will have a closer look at the smoothscroll's API and see if that offers a solution. I quickly checked your fork and noticed that when you scroll down (on home) and then click on contact, the model still slightly resets before it transitions to the next page. Not as much as before but it still does unfortunately. So perhaps there is still something that related to scrolltrigger? Link to comment Share on other sites More sharing options...
Solution akapowl Posted November 30, 2020 Solution Share Posted November 30, 2020 That happens wherever you are mid-scroll on that page and transition to another page. And I think that happens the exact time you kill the ScrollTriggers and it is simply just related to the fact, that all animations that happened thus far in combination with the ScrollTrigger will get wiped. I extended your controller.disable() function with tweens on the handgun, so it doesn't jump back to its untweened initial position, but animates to a state in between the killing and creating of the new ScrollTriggers - this is just copied from your renderer-home.js - so nothing I put any thought in. When and where that is added/processed may also not be ideal . But animating to a state in between could be the solution; is what I am trying to say. Does that make sense? disable() { // asscroll.disable(); this.mixer = null; ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); gsap.to(this.handgun.position, { x: 0, y: 0, z: 0 }); gsap.to(this.handgun.rotation, { x: 0, y: 0, z: 0 }); } https://codesandbox.io/s/magical-cherry-czdy9?file=/controller.js Edit: Actually just setting the killing to .kill(false) seems like the way better approach 😅 ScrollTrigger.getAll().forEach((trigger) => trigger.kill(false)); That prevents the animations from being reverted: To prevent the animation from being reverted when it is killed, simply pass false as the parameter. For example ST.kill(false). https://greensock.com/docs/v3/Plugins/ScrollTrigger/kill() 2 1 Link to comment Share on other sites More sharing options...
flowen Posted November 30, 2020 Author Share Posted November 30, 2020 4 hours ago, akapowl said: Edit: Actually just setting the killing to .kill(false) seems like the way better approach 😅 ScrollTrigger.getAll().forEach((trigger) => trigger.kill(false)); That prevents the animations from being reverted: To prevent the animation from being reverted when it is killed, simply pass false as the parameter. For example ST.kill(false). https://greensock.com/docs/v3/Plugins/ScrollTrigger/kill() oh nice! wow, great find, thank you so much! What made you look at the kill method? 😁 Link to comment Share on other sites More sharing options...
akapowl Posted November 30, 2020 Share Posted November 30, 2020 I just suddenly remembered reading about it in a whole different thread some time ago 🤷♂️ Didn't come to my mind right away, because I actually never have been using it like that myself so far. 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