Highway.js and ScrollTrigger - Timeline doesn't restart when going back to the previous page

[marius96 3 Likes (Newbie)]

I'm trying to create an animation with Highway.js and ScrollTrigger, but for some reason the ScrollTrigger timeline stops working after I come back to the index page.
The other gsap related code works fine, only the ScrollTrigger part is buggy.

I've seen some suggestions like this: killing the timeline when I leave the page and then restart it when I go back.
I did that, but it still won't work properly.

Note: you have to refresh the Codesandbox browser when you open the link in order to trigger the timeline. I think this is a bug, as this part is working fine on my webpack-dev-server.

Here's a link with minimal code: https://codesandbox.io/s/highwayjs-gsap-scrolltrigger-r2kec

[OSUblake 18,538 Likes (Superhero)]

Hi marius,

 

I'm not familiar with Highway.js, but you can't just restart your animation and expect it to work. When you navigate to new page and back, that animation will no longer be referencing the same h2. So just like other libraries/frameworks that do page transitions, you need to kill your ScrollTrigger before navigating to a new page and re-create it.

 

[marius96 3 Likes (Newbie)]

@OSUblake Thanks for the feedback.

I removed the vl.restart() and added the whole timeline again. 
Now it's working, but there's something going wrong as it doesn't remove the current timeline when I leave the page.

In the out method, which handles the leaving animation, I'm using vl.kill(). Am I referencing this the wrong way?

Like, If I go back to index, the triggers from the page.html are still there, and I'm expecting them to get killed.

https://codesandbox.io/s/highwayjs-gsap-scrolltrigger-r2kec?file=/src/index.js:328-347

[OSUblake 18,538 Likes (Superhero)]

Like I said, I'm not familiar with Highyway.js, but I would kill your ScrollTriggers and anything else that might be running as soon as the out is called. And for recreating, I would check to make sure a target exists first.

 

So maybe like this?

 

https://codesandbox.io/s/highwayjs-gsap-scrolltrigger-forked-hespr?file=/src/index.js

 

[marius96 3 Likes (Newbie)]

Sorry for the late response @OSUblake

Yes, that's exactly what I wanted to achieve. However, I still ran into some problems. How do I kill a timeline if I have multiple ScrollTrigger targets?

I get the error that

tl is not defined

https://codesandbox.io/s/multiple-targets-t5ostg

 

Is there a way to iterate through all the targets and kill the timeline? 

[OSUblake 18,538 Likes (Superhero)]

You could put all your animations inside an array and then loop through that.

 

https://codesandbox.io/s/multiple-targets-forked-xy6niy?file=/src/index.js

 

[_Greg _ 128 Likes (Specialist)]

26 minutes ago, marius96 said:

How do I kill a timeline if I have multiple ScrollTrigger targets?

you need to declare tl outside of a function, something like:

... //your code
gsap.registerPlugin(ScrollTrigger);
let targets = document.querySelectorAll("h2");
let tl = [] // declarate like array
...

targets.forEach((target, index) => {
  tl[index] = gsap.to(target, {
    x: 100,
    scrollTrigger: {
      trigger: target,
      markers: true,
      start: "bottom center"
    }
  });
});
... 
//After you can get and kill every tl
tl.forEach(timeline=>...)

Or you can add id and after getbyid (but you still need list of all ids)

 

[marius96 3 Likes (Newbie)]

I combined both of your solutions, but I still can't get it to work.

@_Greg _ @OSUblake

The code works for removing the scrollTrigger timeline in the out method, but as soon as I add 

targets.forEach((target, index) => {
      if(target) {
        tl[index] = gsap.to(target, {
          x: 100,
          scrollTrigger: {
            trigger: target,
            markers: true,
            start: "bottom center"
          }
        });
      }
    });

to the in method, the timeline doesn't get killed anymore.

@OSUblake I think I'm having the same issue as you in the last CodePen you posted.

Edit:

Yeah, I think something in the in method isn't working properly because if I load /page.html first and I click on the anchor tag to go to index.html, my tl isn't created.

[OSUblake 18,538 Likes (Superhero)]

11 hours ago, marius96 said:

I combined both of your solutions, but I still can't get it to work.

 

Sorry, but I don't know what you mean. You're going to have explain what doesn't work in more detail along with a demo of what you've tried.

[marius96 3 Likes (Newbie)]

@OSUblake I'm having trouble creating a CodeSandbox.
In my webpack-dev-server I have a different error compared to the one in CodeSandbox, which is strange because I have the exact same code.

On 2/18/2022 at 10:47 AM, OSUblake said:

You could put all your animations inside an array and then loop through that.

 

https://codesandbox.io/s/multiple-targets-forked-xy6niy?file=/src/index.js

 

Basically what I'm saying, in your solution the timeline doesn't get killed when you click to go to another page.

If you are on index and you scroll down, the timeline triggers.

When you go to page.html the timeline doesn't get killed.

If you go back to index.html from page.html and you scroll to where the target element is, the timeline doesn't start.

[OSUblake 18,538 Likes (Superhero)]

It's hard to say what's going on in your local environment, especially if you can't recreate the issue on CodeSandbox. And highway.js isn't a GSAP product, which makes troubleshooting even harder. I'm not at all familiar with their API, and just tested out some stuff until I got it working with your demo. 

 

Maybe try searching on CodeSandbox for something similar to what you're doing.

 

https://codesandbox.io/examples/package/@dogstudio/highway