Jump to content
Search Community

Timeline: Control the start of the next animation from the current animation function

Soh8 test
Moderator Tag

Go to solution Solved by mvaneijgen,

Recommended Posts

Hello !

 

In a timeline, I'd like to control the start of the next animation from my current animation function: 

const timeline = gsap.timeline()

timeline.add(
  gsap.to('.rect', {
    x: 100,
  })
)


timeline.add(
  gsap.to('.rect', {
    opacity: 0.5,
  }) 
  // I want this call to start after the previous one
  // but also to have no effect on the 
  // start time of the next animation below
)


timeline.add(
  gsap.to('.rect', {
    y: 100,
  })
)

 

Is that possible somehow ? 

 

One obvious option would be to change the position parameter of the last add() call, but I'd like to avoid that if possible because in the context of my application, I have no direct access to that last add() call. 

 

Thanks ! 

See the Pen oNEwwGz by chuckc (@chuckc) on CodePen

Link to comment
Share on other sites

Thanks @mvaneijgen. This is not quite where I want to go. 

 

I'll try to explain my real world issue deeper:

  • I have multiple components that adds animation to my master timeline.
  • During the lifecycle of the application, some component are used, some don't.  So, some animations are added, some are not. Then finally, I play the master timeline. -> So the important thing here is that it means that I do not always end up with the same set of animations before playing the master timeline.
  • One of the animation (the second one in my example) needs to run after another (the 1st one in the example), but when triggered, should not impact the next one (the 3rd one in my example)
  • I can't use the position parameter on the "next" animation because sometimes, the 2nd animation will not be added to the master timeline.
    To illustrate this on my example: If I would use the position parameter on the 3rd animation, but do not add the 2nd animation, then the position parameter of the third animation would affect the 1st animation. And that's what I want to avoid.

 

Thanks ! 

Link to comment
Share on other sites

Wait sorry @mvaneijgen I think your solution is the way to go actually. I didn't get it at first. But by wrapping it into the function you kind of trigger the animation at the right time but get it out of the queue ?? What's the magic here :D 

  • Haha 1
Link to comment
Share on other sites

5 minutes ago, Soh8 said:

What's the magic here

GSAP is the magic!

 

I'm not the one to explain it on a deeper level, but it is a nested timeline which you can just .`.add()` to an other timeline. I use it a lot to have certain elements loop infinitely while the rest of the timeline plays out.

Link to comment
Share on other sites

 

58 minutes ago, mvaneijgen said:

GSAP is the magic!

 

I'm not the one to explain it on a deeper level, but it is a nested timeline which you can just .`.add()` to an other timeline. I use it a lot to have certain elements loop infinitely while the rest of the timeline plays out.

 

Well, thanks a lot !

 

And I didn't even need the nested timeline, just wrapping the gsap.to() into the function worked and it seems to be flawless so far. I just went from this to this: 

// Went from this
timeline.add(
  gsap.to(el.current, {
    duration: 1,
    opacity: 1,
    ease: 'power3.easeOut'
  })
)

// To this
timeline.add(
  function() {
    gsap.to(el.current, {
      duration: 1,
      opacity: 1,
      ease: 'power3.easeOut'
    })
  }
)

 

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...