Navigation

[irks]

Hey
I'm Kris, and I'm beginner in JS and also GSAP, 

I created simple website with nav and i 'm added simple timeline 
but i have problem with anchor tag inside navigation  when I'm click button "our story" ,  for example, the animation don't revers but immediately redirects me to "story.html" this same problem doesn't occur when I 'm click anchor tag with href="#"- animation smoothly revers 

I will be grateful for any help or advice

Below I put ma code: 
 

See the Pen YzyGpMY by MgrFarm (@MgrFarm) on CodePen

[ZachSaucier]

Hey Kris and welcome to the GreenSock forums! 

 

This is a JS question: How to prevent the regular link click action from occurring? The answer is that you need to listen for the click event and prevent the default behavior from occurring. Here's a basic example of how to do so:

document.querySelectorAll("a[href *= '.html'").forEach(externalLink => {
  externalLink.addEventListener("click", e => {
    e.preventDefault();
    
    // possibly call your animation here
    // maybe change the page URL after the animation is complete? Depends on what you want
    // window.location = e.target.href;
  });
});

 

Also, we highly recommend using GSAP 3's syntax. It's sleeker and has a bunch of new features  Our Getting Started and other learning resources on the GreenSock site have been updated - I recommend checking it out: