How to store timeline to use later in a master timeline?

[potatogandalf]

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.

[mvaneijgen]

Can you create a code pen with your use case? Because I've copied your code to a pen and I'm trying to  make sense of it andI'm not getting it. 

 

See the Pen bGgVQpa by mvaneijgen (@mvaneijgen) on CodePen

 

Right now at `openSidebarBtn.addEventListener()` you're creating a timeline and I would not do this, because now each time you click you create that whole timeline. Better is to also split that out to a function and call that. 

 

You already adding things to a timeline within your `overlayAnimations.forEach()` and that is how it works. Create a function with your timeline, return the timeline and `.add(YOUR_FUNCTION)` to the other timeline.

 

If you could fix the codepen with your test case and share that here, we could maybe give you some points in the right direction, if things are still not clear.