Comment accélérer une ligne de temps greensock?

Question

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

Je veux augmenter progressivement la vitesse à laquelle les boîtes sont animés à droite. -à-dire:

1. boîte animation durée = 1s
2. case = 0.8s
3. boîte = 0.78s, etc.

Je sais que je boucle pouvais à travers les boîtes et spécifier une durée différente pour chacun, mais existe-t-il un moyen plus efficace de le faire?

Est-il possible d'appliquer une facilité prédéfinie comme

ease: Bounce.easeOut 

la chronologie elle-même, et non pas à chaque interpolation dans le scénario?

FIDDLE

Answer 1

Vous pouvez utiliser timeScale() pour accélérer le calendrier après chaque décalage. Voici an example.

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