Jump to content
Search Community

Reverse

Pandy test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

Hi @Pandy

 

I'm not seeing any reverse in your demo so I don't understand the question. 

 

Just FYI - you don't need to animate each nav link individually. You have a stagger on your first tween which isn't doing anything since it's targeting one item, but if you target the .nav-link class, your whole timeline could look like this.

let tl = gsap.timeline({
  defaults: {
    duration: 0.6,
    ease: "power1"
  }
});

tl.from(".nav-link, .animation", {
  opacity: 0,
  y: -50,
  stagger: 0.2
});

tl.from(
  ".mypr",
  {
    opacity: 0,
    y: 11
  },
  "-=0.2"
);

But as I said, I don't understand the reverse question since there is nothing reversing in the demo.

 

Hopefully that helps. Happy tweening

:)

  • Like 3
Link to comment
Share on other sites

The way you have it structured now, the listener is only be added to the first .nav-link.

 

You'd need to loop through your NodeList and add the listener to each one.

document.querySelectorAll(".nav-link").forEach((obj) => {
  obj.addEventListener("click", (event) => {
    event.preventDefault();
    tl.reverse();
  });
});

Happy tweening.

:)

  • Like 4
Link to comment
Share on other sites

  • Solution

I'd be remiss if I didn't also mention that you can use GSAP's toArray() utility method too.

const targets = gsap.utils.toArray(".nav-link");

targets.forEach((obj) => {
  obj.addEventListener("click", (e) => {
    e.preventDefault();
    tl.reverse();
  });
});

Happy tweening.

:)

  • Like 6
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...