Jump to content
Search Community

Adding ease to timeline progress

RyanHerbert test
Moderator Tag

Go to solution Solved by Dipscom,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I've added some code to allow the timelne start slow and end fast.

I want to put this on a master timeline with others.

 

If you uncommnet out my Master timeline you will notice the time line tween no longer takes effect

TweenLite.to(NUM1Timeline, 3, {progress:1, ease:Power2.easeIn});

 

I 'm clearly doing something wrong as this is not adding to the master timeline as I would like.

 

any help would be much appreciated

 

Ryan

See the Pen BQQBya by Ryan84 (@Ryan84) on CodePen

Link to comment
Share on other sites

  • Solution

Hi Ryan!

 

You nearly got it. Actually, you got it right just placed the pieces in the wrong order.

 

You won't achieve the desired effect if you just add the timeline inside another timeline because it's the tweening of the progress of the first timeline that creates the easing you're looking for. Just tween the progress of the target timeline inside your master timeline to get the easing.

 

Swap your code for this and I think it's what you're looking for (I've left your original bits in for reference):

 

var NUM1Timeline = new TimelineMax();
  NUM1Timeline.staggerFrom(".SET1>g", 0.8, { opacity:0,}, 0.18)
.from(".top1", 2.4, {x: '-22%', y: '22%', opacity:1, },0.0)
.from(".shd1", 6, { opacity:0}, 0.0)
// TweenLite.to(NUM1Timeline, 3, {progress:1, ease:Power2.easeIn});


var masternumbers = new TimelineMax();
 // masternumbers.add(NUM1Timeline)
masternumbers.to(NUM1Timeline, 3, {progress:1, ease:Power2.easeIn});
  • Like 2
Link to comment
Share on other sites

Ah Perfect thank you Dipscon thats great.

I saw this on your Codepen earlier..

See the Pen XNdKmm by dipscom (@dipscom) on CodePen

 

very inspirational. I'm and animator working with traditional forms or software like AE that has a timeline. it is refreshing to see the level of creativity an fluidity to animations produced with code. I'd like to learn more.

 

Thank you

  • Like 4
Link to comment
Share on other sites

Anytime you have any questions Ryan, come back. There's a ton of people around who is more than happy to help out.

 

I'm an animator myself, like you, used to time sheets, keyframes and the such. The timeline now has to live in my mind when I am animating with code but, you can just write what you want to happen in a series of short sentences, that, will become your code. break it down into tiny pieces, later you will notice lots of those things are the same thing over and over again. That's the moment you see how wonderful computers are and how cool coding animation can also be fun. Building visually complex stuff with a bunch of very simple steps.

 

And thanks for the compliment. I'm looking to improve as well.

  • Like 3
Link to comment
Share on other sites

Thanks Dipscom. Really appreciate the help. Only been doing this a week, learnt loads from your help but getting a bit swamped.

trying to rebuild this with my designs.

 

http://waaark.com/vision/

 

I have this working but I need each number animation to play when a point is clicked or a progress is scrolled to

See the Pen aBBVWg by Ryan84 (@Ryan84) on CodePen

 

I created each number animation

like

See the Pen zooKZK by Ryan84 (@Ryan84) on CodePen

 

Just struggling making each number timeline player when a point is clicked or a progress it reached on the circle timle.

 

going to be a long night ha.

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.
×
×
  • Create New...