momo12

Found my mistake :))

Guys I have a question. Is not this code enough (The last lines) to tell GSAP Flip runs only once? 
const wrap = document.querySelectorAll(".right-wr"); const hidden = document.querySelector(".hide-wr"); let isGrid = false; let counter = 0; function doGrid() {   const statee = Flip.getState(".right-wr");   wrap.forEach(rel => {     hidden.appendChild(rel)   });   wrap.forEach(rel => {     rel.classList.toggle("grid");   });   Flip.from(statee, {       duration: 0.5,     absolute: true,     stagger: 0.1,     ease: "power1.inOut"   }); }; gridbutton.addEventListener("click", () => {     if (counter == 0 ) {           doGrid();       } });  
 
Update: I forgot to increase the counter value after the first click! wasted 5 hours to figure this out

For guys who have the same problem: use this inside CSS

html.has-scroll-smooth {
    overflow: hidden;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;  
}

Fixed. I used Gsap.MathMedia and works well! :))

The problem solved!! :))
 
 
 
See the Pen poVWBVZ by talewoy290 (@talewoy290) on CodePen

Sorry guys,
 
I have a few gsap.timelines(); I want to animate something when user clicks on a button for the first time (It will use A as GSAP.timeline()) and if user clicks on a button for the second time (It will use B as GSAP.timeline()).
 
The problem I have is what should I do if user clicks continously? Third and fourth and ...! I use this code but doesn't work for some reasons!
var clicks = 0; $(".m-btn").click(function() {     if (clicks % 2 == 0)     {          tl.play("spin");     }      else       {           tl.play("spinn");       }      clicks++; });
Found the problem! Added GSAP a few times caused the issue