Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
azadsarxanli

gsap works only once in click event

Go to solution Solved by GreenSock,

Recommended Posts

  • Solution

There are several problems I see:

  1. When you click a second time, you call .reverse() on the timeline which obviously orients it in the backwards direction, but when you click again, you never play() to make the playhead go in the FORWARD direction again. So it's perpetually stuck in trying to make the playhead go backwards and when it hits the beginning, it can't go any further backwards. 
  2. Every time you click, you're adding more and more and more tweens into that same timeline. That's definitely bad. You should just create the timeline initially paused, add your animations, and then on click, just play() or reverse(). 

See the Pen PoKrZaJ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that clear things up? 

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

25 minutes ago, Firuz Qəzənfərov said:

Guys, I have same problem. But my structure is different a little bit... 

 

Is this a school project? Your code looks similar to the first question. Anyways, you should not put timeline creation code inside an event handler. 

 

const tl = gsap.timeline({ paused: true });
tl.to(".nav-icon", 0.7, { yPercent: -20, opacity: 0 })

      .to(".nav-bar", 0.5, { xPercent: 20, yPercent: 20 })
      .to(".nav-bar", 0.9, { xPercent: -120 })
      .to(".nav-bar", 0.9, { xPercent: 0, zIndex: -99 })
      .to(".nav-bar", 0.1, { xPercent: 0, yPercent: 0, zIndex: -99 })
      .to(".nav-icon", 0.7, { yPercent: 0, opacity: 1, zIndex: 99 })

      .to("#second-line", 0.7, { xPercent: -100, opacity: 0 }, "<")

      .to("#first-line", 0.7, { rotation: 45, y: 20, width: 40 }, "<")
      .to("#third-line", 0.7, { rotation: -45, y: -20, width: 40 }, "<");

const menuBtn = document.querySelector(".nav-icon");
let alfa = 0;
menuBtn.addEventListener("click", () => {
  menuBtn.classList.add("green");
  if (alfa == 0) {
    tl.play();
    alfa = 1;
  } else {
    tl.reverse();
    alfa = 0;
  }
});

 

 

  • Like 1
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.
×