Ramp up speed of a timeline

[RyanHerbert 7 Likes (Newbie)]

I've created a series of animated icons.

See in the codepen.

on the end of the timeline i have added a tween to ramp the speed up as the timeline progresses.

 

var NUM6Timeline = new TimelineMax();

  NUM6Timeline.staggerFrom(".SET6>g", 0.7, { opacity:0,}, 0.15)

.from(".top6", 2.4, {x: '-22%', y: '22%', opacity:1, },0.0)

.from(".shd6", 6, { opacity:0}, 0)

.from(".sticker", 1, {transformOrigin:"50% 50%", scale:0, opacity:0, ease:Back.easeOut },2.2);TweenLite.to(NUM6Timeline, 2.5, {progress:1, ease:Power2.easeIn});

 

Because the end tweenlite is not part of the timeline when I come to repeat the timeline, i lose the tween light.

 

Could someone help me nest NUM6Timeline in a new timeline so I can include the progress tween. 

 

This master timeline I should then be able to loop on my page and included the ramped up animation.

 

Kind   regards,

 

 

Ryan 

See the Pen XNNjNd?editors=1010 by Ryan84 (@Ryan84) on CodePen

[Dipscom 2,815 Likes (Superhero)]

Like this Ryan?

var NUM6Timeline = new TimelineMax();

NUM6Timeline.staggerFrom(".SET6>g", 0.7, { opacity:0,}, 0.15)
.from(".top6", 2.4, {x: '-22%', y: '22%', opacity:1, },0.0)
.from(".shd6", 6, { opacity:0}, 0)
.from(".sticker", 1, {transformOrigin:"50% 50%", scale:0, opacity:0, ease:Back.easeOut },2.2);


var tl = new TimelineMax({repeat:-1, yoyo:true})

tl.to(NUM6Timeline, 2.5, {progress:1, ease:Power2.easeIn});

[RyanHerbert 7 Likes (Newbie)]

Perfect thank you  Dipscom