Easing Timeline with Successive Tweens

[anthonygreco]

Can anyone tell me if this should work and I've just missed something? The idea is to create a set of tweens with linear ease, add them to a timeline with an ease and see the magic happen. Here's is a completely stripped down easily readable example of what I'm trying to do: http://jsfiddle.net/anthonygreco/g7a5zeek/

$(function() {

  var tl = new TimelineLite({
    ease: Bounce.easeOut
  }),
  totalDuration = 2,
  divLength = $('#container div').length;

  $('#container div').each(function(i) {

    var duration = totalDuration / divLength,
    tween = TweenLite.to($(this), duration, {
      left: 350,
      ease: Linear.easeNone
    });

    tl.add(tween);

  });

});

[Diaco]

Hi anthonygreco 

 

you can do something like this for change child's ease : 

See the Pen yyxazm by MAW (@MAW) on CodePen.

 

and if you want to have Ease with whole of timeline play , you can do something like this :

var tl = new TimelineMax({paused:true});
// add tweens ....
TweenMax.to(tl,tl.duration(),{progress:1,ease:Back.easeIn})

See the Pen ZYMprY by MAW (@MAW) on CodePen.

[anthonygreco]

Doesn't this effectively apply the elastic ease to each tween though? I want the ease on the timeline.

[Diaco]

pls check my answer again

[anthonygreco]

TweenMax is required here right? Can't do it with TimelineLite alone?

[Diaco]

nope , EasePack is required + TweenLite + TimelineLite + CSSPlugin , if you load them , you can do that with TweenLite too , pls check the Codepen , i just love TweenMax ( all of them+more included in TweenMax ) 

[anthonygreco]

Was just editing my last response.. Yeah, looks like TweenLite can handle it so long as the ease pack is included. Thanks a lot for the quick assist @Diaco.AW!