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.