Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
RyanHerbert

Ramp up speed of a timeline

Recommended Posts

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

Link to comment
Share on other sites

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});
  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×