Play 2 tweens in parallel with GSAP?

Question

Can someone briefly explain what is the best way to play 2 tweens/animations in parallel in the same timeline using GSAP 3?

Example:

tl = gsap.timeline();

tl
.to( 'EL1', 1, {
   prop: value,
})
.to( 'EL2', 1, {
   prop: value
}, '-=1');

I would do it this way: '-=1'. Do you all have a better solution for me?

Harold

Answer 1

First off, in GSAP 3 we don't recommend using the duration parameter. Instead, we recommend including the duration inside of the vars parameter so that you can use features like GSAP's defaults functionality. For more info on upgrading to GSAP 3, see the migration guide. I left the duration out below for the sake of the question.

---

There are a lot of ways to make sure that two tweens start at the same time:

1. Often times I find that the easiest way to do this is to use the '<' position parameter operator. This causes a tween to start at the same start position as the last tween. For example:

   .to('EL1', { prop: value })
   .to('EL2', { prop: value }, '<')
   

2. Use a label. There are a couple of ways you could create a label:

   .to('EL1', { prop: value }, 'myLabel') // If the label doesn't exist, it will be created at the start of this tween
   .to('EL2', { prop: value }, 'myLabel') // Since the label exists already, this tween will be positioned with its start at the label
   

   Or explicitly create it:

   .add('myLabel') // .addLabel() also works
   .to('EL1', { prop: value }, 'myLabel') // If the label doesn't exist, it will be created at the start of this tween
   .to('EL2', { prop: value }, 'myLabel') // Since the label exists already, this tween will be positioned with its start at the label
   

3. Use a relative offset. This only works if you also use the duration of the previous tween also:

   .to('EL1', { prop: value })
   .to('EL2', { prop: value }, '-=1') // Assuming the duration of the previous tween is 1
   

4. Use an explicit time in the timeline. I pretty much only use this method when I want the tweens to start at the beginning of the timeline:

   .to('EL1', { prop: value })
   .to('EL2', { prop: value }, 0) // Number of seconds in the timeline to start at - can be any number
   

5. In some circumstances you might have multiple pre-made animations that you want to fire at the same time as part of a timeline. In that case you might want to add a function that fires both at a particular time like so:

   .add(() => {
     myAnim1.play();
     myAnim2.play();
   })
   

   Note that this approach doesn't actually add the tweens to the timeline, it just uses a function that's a part of the timeline to play the animations.

   You could instead add the tweens themselves to the timeline using two separate .add() calls. This is also what you should do if you want to sequence pre-made animations as part of a timeline. To position them, use the same approaches covered in the other points above.

   .add(myAnim1)
   .add(myAnim2, '<')
   

For more explanation see the position parameter post.

Crossing

Thanks @ZachSaucier point 1 has already worked great. – Harold

5. is works properly also it is very useful to make a lot of parallel animations if put them all to array – Overseer

Answer 2

You can add a label to identify a specific point of the timeline. See the .add() method.

tl = gsap.timeline();

tl
.add("anim_start", "+=0") // Here is your label.
.to( 'EL1', 1, {
   prop: value,
}, "anim_start")
.to( 'EL2', 1, {
   prop: value
}, "anim_start");

So those two tweens will start at the same moment.

You can even "delay" a whole set of tweens that are binded to that label... Like with "+=2" on the label (instead of on every tweens). ;)

And you can have one tween delayed relative the label too! Like with:

to( 'EL1', 1, {
   prop: value,
},"anim_start+=2");`

Sprag