I am sequencing a number of tweens in Timeline lite, but I want a couple of them to happen to different objects at the same time. Is there a way to do this without the onComplete function. My current tween sequence is:

tl.to($slideTitle, 0.3, {opacity: 0, left: -50 })
        .set($slideTitle, { css: { left: 50 } })
        .to($slideTitle,0.3, { opacity: 1, left: 0 })
        .to($slideDesc,0.3, {opacity: 0, left: -50 }) //Here is where I want a tween to happen to another item at the same time as I am animating $slideDesc
        .set($slideDesc, { css: { left: 50 } })
        .to($slideDesc,0.3, {opacity: 1, left: 0, onComplete: function(){

        }})

So in the middle there, at the same time as the first animation to $slideDesc, I want to perform this animation:

.to($bodyCopy,0.3, {opacity: 0, left: -50, delay: .05 })

How do I do this? If I just stuck it in the sequence after $slideDesc, it wouldn't execute until after $slideDesc was finished.

I am sequencing a number of tweens in Timeline lite, but I want a couple of them to happen to different objects at the same time. Is there a way to do this without the onComplete function. My current tween sequence is:

tl.to($slideTitle, 0.3, {opacity: 0, left: -50 })
        .set($slideTitle, { css: { left: 50 } })
        .to($slideTitle,0.3, { opacity: 1, left: 0 })
        .to($slideDesc,0.3, {opacity: 0, left: -50 }) //Here is where I want a tween to happen to another item at the same time as I am animating $slideDesc
        .set($slideDesc, { css: { left: 50 } })
        .to($slideDesc,0.3, {opacity: 1, left: 0, onComplete: function(){

        }})

So in the middle there, at the same time as the first animation to $slideDesc, I want to perform this animation:

.to($bodyCopy,0.3, {opacity: 0, left: -50, delay: .05 })

How do I do this? If I just stuck it in the sequence after $slideDesc, it wouldn't execute until after $slideDesc was finished.

• javascript
• animation
• tween
• gsap

• If anyone's interested, the documentation has a really good explanation of how to achieve this here – Dave Howson Commented Jun 8, 2019 at 13:55

1 Answer 1

You've got two options really:

1. Create a label and set the position argument to the label for both items
2. Add in the second tween and offset it negatively the same duration of $slideDesc

So to illustrate:

// Your code
.addLabel('targetPoint')
.to($slideDesc,0.3, {opacity: 0, left: -50 }, 'targetPoint')
.to($bodyCopy,0.3, {opacity: 0, left: -50, delay: .05 }, 'targetPoint')

OR

// Your code
.to($slideDesc,0.3, {opacity: 0, left: -50 })
.to($bodyCopy,0.3, {opacity: 0, left: -50, delay: .05 }, '-=0.3')