gsap works only once in click event

[azadsarxanli 4 Likes (Newbie)]

Everything works fine, but only once. How to solve that? 

See the Pen MWvMaLV by azadsarxanli (@azadsarxanli) on CodePen

[GreenSock 16,649 Likes (Superhero)]

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? 

[Firuz Qəzənfərov 0 Likes (Newbie)]

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

See the Pen QWMXEqG by farizfiko (@farizfiko) on CodePen

[OSUblake 18,368 Likes (Superhero)]

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;
  }
});