Jump to content
Search Community

three.js + dynamically created scrolltriggers + highwayjs -> page transitions mess up

flowen test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

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

  • flowen changed the title to three.js + dynamically created scrolltriggers + highwayjs -> page transitions mess up

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

 

 

  • Like 1
Link to comment
Share on other sites

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

  • Solution

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()

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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

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