potatogandalf

I'm trying to predefine timelines and execute them on a button click. However, it seems they're somehow executing anyway, since the .theme_picker and .sidebar mysteriously have their style attributes modified. How do I fix this?

function openOverlay(...overlayAnimations) { let timeline = gsap.timeline({ defaults: { duration: 0.5 } }); overlayAnimations.forEach((animation) => { timeline.add(animation); }); timeline.to( ".page__mask", { opacity: 0.5, visibility: "visible", }, "<" ); timeline.play(); return timeline; } openSidebarBtn.addEventListener("click", function () { const sidebarAnimation = gsap .timeline() .to(".navbar__hatch", { rotation: 90 }) .to(".page__mask", { opacity: 0.5, visibility: "visible", }) .fromTo( ".sidebar", { xPercent: 0, yPercent: -120 }, { visibility: "visible", yPercent: 0 }, "<" ); const sidebarAnimationMobile = gsap .timeline() .to(".page__mask", { opacity: 0.4, visibility: "visible", }) .fromTo( ".sidebar", { xPercent: -100, yPercent: 0 }, { visibility: "visible", xPercent: 0 }, "<" ); let animation = checkOnMobile() ? sidebarAnimationMobile : sidebarAnimation; openOverlay(animation); }); Hi, beginner here. I was wondering how I can define a timeline and store it to add to another master timeline, without executing the child timeline immediately after it's defined? When the event is fired, the timeline not supposed to run, runs first, and then the timeline that was supposed to.