CODEWITHSUNDEEP
javascriptjquerygsap
Szabolcs
Szabolcs

Reputation: 1533

How to accelerate a greensock timeline?

HTML

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

CSS

.box{
    width: 50px;
    height: 50px;
    background: rgb(107,127,125);
    border: 1px solid rgb(174,77,61);
    display: block;
 }

JS

var tl = new TimelineMax();
tl.staggerTo($(".box"), 1, {x: "200px"}, 0.4);

I want to gradually increase the speed at which the boxes are animated to the right. i e:

  1. box animation duration = 1s
  2. box = 0.8s
  3. box = 0.78s, etc.

I know I could loop through the boxes and specify a different duration for each, but is there a more efficient way of doing this?

Is it possible to apply a predefined ease like 

ease: Bounce.easeOut

to the timeline itself, not to each tween in the timeline?

FIDDLE

Upvotes: 1

Views: 109

Answers (1)

Fabian Schultz
Fabian Schultz

Reputation: 18546

You could use timeScale() to accelerate the timeline after each stagger. Here's an example.

function tweenComplete() {
  scale += 1;
  tl.timeScale(scale);
}

Upvotes: 1

Related Questions