Jump to content
Search Community

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

marius96 test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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.

 

  • Like 1
Link to comment
Share on other sites

@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

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

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)

 

  • Like 3
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

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