Delay the second timeline

[bootstrap007 6 Likes (Newbie)]

Hi All,

Can you please check the below code and let me know that why the delay function for the "middle" timeline is not working? I have followed the Gsap documentation and added the second timeline to the master timeline same as the below.

 

function intro() {
  const tl = gsap.timeline();
  tl.to('.head', 1, {x:'30%', opacity:0});
      tl.to('.btn', 1, {y:'50%', opacity:0},"-=.2");
}

 

function middle() {
  const tl = gsap.timeline();
      tl.reverse();
      tl.fromTo(".holder", {yPercent:-100}, { duration: 1, yPercent:0, stagger: .5});
      tl.fromTo(".holder img", {yPercent:100}, {duration: 1, yPercent: 0, stagger: .5}, "<");
}

 

 

 const master = gsap.timeline();
    master.add(intro())
    .add(middle(), "+=7");

[Visual-Q 979 Likes (Leader)]

I believe removing the parenthesis will prevent the middle function from being invoked immediately.

 

You also have some scoping issues, so something like this might point you in the right direction:

 

See the Pen RwVLmBJ by Visual-Q (@Visual-Q) on CodePen

[GreenSock 18,577 Likes (Superhero)]

It's hard to tell what you're trying to do exactly. Usually you'd create a separate timeline inside the function and return that. I assume that was your goal because you're doing master.add(intro()). Currently you forgot to return the timeline from the function, so nothing is actually getting inserted into the master timeline at all.

 

If you want to make the master timeline play once and then reverse back to the start, it's as simple as adding repeat: 1, yoyo: true. You don't need to use a callback and then a function that reverses. 

 

See the Pen JjNrQXp?editors=0010 by GreenSock (@GreenSock) on CodePen

 

If you still need help, please provide a minimal demo and we'd be glad to take a peek. 

[bootstrap007 6 Likes (Newbie)]

Thank you both Visual-Q  and GreenSock

 

This one is working fine - .add(middle, "+=2"); Instead of this syntax - .add(middle(), "+=2");

[GreenSock 18,577 Likes (Superhero)]

It's fine if that's what you want, but be aware that you're simply adding a callback into the timeline at that spot. You're not embedding any animation, so it won't scrub or be controlled at all with the master timeline. If it were me, I would definitely be embedding it unless there's a clear reason why it needs to animate independently. 

[bootstrap007 6 Likes (Newbie)]

GreenSock That was just a simplified version of code that I have mentioned above to debug. Thanks for the quick response and support. Really appreciate it.