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.
You've got two options really:
$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')