Question

170

Timeline Lite - how to simultaneously tween multiple objects

rated 0 times [ 173] [ 3] / answers: 1 / hits: 7980 / 11 Years ago, thu, january 16, 2014, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

austonjuancarlosb

Add To Favorites

Follow

Total Points: 238

Total Questions: 89

Total Answers: 99

Location: Chad

Member since Mon, Dec 5, 2022

2 Years ago

austonjuancarlosb questions

1 TypeError: Cannot read properties of undefined (reading 'call') on Next.js

Sat, Dec 17, 22, 00:00, 1 Year ago

1 How to check if Metamask is connected after page refreshing

Sat, Feb 19, 22, 00:00, 2 Years ago

1 Slash Commands - Discord.js

Sun, Mar 14, 21, 00:00, 3 Years ago

1 How to reload Next.js page initial props without reloading the whole page

Mon, May 18, 20, 00:00, 4 Years ago

1 How can I disable keyboard input on an html input of type number? What about in react or material-ui?

Tue, Apr 14, 20, 00:00, 4 Years ago

View All

answered 11 Years ago tobyl · Accepted Answer

You've got two options really:

Create a label and set the position argument to the label for both
items

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')