Compound tweens?

[lunadigital]

I've scoured the internet and docs for an answer to this, but I'm still coming up short. I'm hoping to combine GSAP tweens with different durations along a timeline—for example, animate a motion sequence, then animate a slow camera zoom on top of it.

 

I can pull it off simply by writing out .to or .from methods, but the minute I combine everything into a timeline it assumes I want them all to play sequentially (which I do, kind of).

 

If I were to do this in an animation program, I would animate the sequence then create a parent element to animate the scale. I know GSAP is a completely different beast, though, so any advice will help. Right now, I'm just playing the timeline, then animating a scale outside of the timeline variable so they play on top of each other. I'm hoping there's a more elegant solution though.

See the Pen LEagwZ by anon (@anon) on CodePen

[Carl]

Hi and welcome to the GreenSock forums.

 

Thanks for the demo, it really helped me understand what you were trying to achieve.

 

Does this help:

 

var tl = new TimelineLite();
tl.to('#box', .5, {left:-100})
  .to('#box', 1, {left:100, repeat:5, yoyo:true, ease:Power1.easeInOut})


// add a tween that is as long as the total duration of all previous animations and place it at the beginning of the timeline
  .to('#box', tl.duration(), {scale: 1.5}, 0)

Demo http://codepen.io/GreenSock/pen/yywQpL?editors=001

 

Please be sure to read this article on using the position parameter to schedule tweens in a timeline: http://greensock.com/position-parameter

[lunadigital]

Yes! Perfect. Thanks for taking a look at it.