Best way to add concurrent tweens?

[jezmck 0 Likes (Newbie)]

When I have two tweens which I want to run concurrently, I've been taking the following approach (concatting a string for the `position`), but feel there must be a better way.

var tl = new TimelineLite({ paused: true });
var $box = jQuery(".box");
var duration = 2;

tl.add(TweenLite.to($box, duration, {
  ease: 'Bounce.easeOut',
  width: 100
}));

tl.add(TweenLite.to($box, duration, {
  // don't want bounce-ease on this property
  height: 300
}), '-=' + duration);

Any suggestions very welcome!

See the Pen bpYVpv by jezmck (@jezmck) on CodePen

[Dipscom 2,815 Likes (Superhero)]

When I want more than one tween to start at the same point, I create a label for that point in time and use that as the position parameter:

tl.add("StartPoint");

tl.to($box, duration, {
ease: 'Bounce.easeOut',
width: 100
}, "StartPoint");

tl.to($box, duration, {
// don't want bounce-ease on this property
height: 300
}, "StartPoint");

Note that you can use convenience methods, like .to(), from(), etc, just like in TweenMax to build your timelines. You don't need to .add() each Tween in the Timeline.

 

Also, you can chain those methods. The bellow will produce the same results as the code above:

tl.add("StartPoint")
  .to($box, duration, {ease: 'Bounce.easeOut', width: 100}, "StartPoint")
  .to($box, duration, {height: 300}, "StartPoint");

Make sure you add ";" only in the last call.

[Rodrigo 2,662 Likes (Superhero)]

Hi and welcome to the GreenSock forums.

 

Professor Schooff created this video tutorial for the position parameter. Also there's a very handy codepen in it so you can play with.

 

http://greensock.com/position-parameter

[jezmck 0 Likes (Newbie)]

Awesome, thanks both.

[Oscar Rottink 14 Likes (Newbie)]

Smart tip @Dipscom i was always playing with negative delays (which are really hell to use that way) so this makes my life more pretty

[Dipscom 2,815 Likes (Superhero)]

Thanks Oscar.

 

I should have mentioned that the .add() method also accepts a position parameter, so, you can have a bunch of Tweens starting at the same time that overlaps another tween in the timeline.

tl.to(box, dur, {...})
.to(square, dur, {...})

.add("StartPoint", "-="+dur)
.to(rectangle, dur, {...}, "StartPoint")
.to(triangle, dur, {...}, "StartPoint");