Jump to content
Search Community

Delay the second timeline

bootstrap007 test
Moderator Tag

Recommended Posts

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");

Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

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. 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...