Jump to content
GreenSock

kohlej

[SOLVED thanks to PointC] Hello, I made button animation with codepen example attached. Duration question

Recommended Posts

I have two tweens in timeline, and both duration is set to same amount ".35".

I want to bottom line animation last as long as duration of text animation, and to start at the same time, so I added "-=.35".

This would work as intended in my mind if there wasn't stagger in 1st tween, which adds up on its duration.

Now I can do calulation and add custom duration to line tween, but I will have more buttons with different char number, so the 1st tween will never be the same.
Is there a way to make 2nd tween as long as 1st tween, regardless of how many elements will be affected by stagger?

See the Pen zYvXRyb by artyor (@artyor) on CodePen

Link to comment
Share on other sites

If you want them both to have a duration of 0.35, I'd think that would be the perfect time to use the stagger object with 'amount'. Here's a fork of your demo in which I've added that update. I also set both eases to "none" so you can see the line animates as the letters move. Keep in mind that different eases on tweens of the same duration may make it look like they are not necessarily in sync.

 

See the Pen 3f0fb78f2233ea3e234159383c2703d5 by PointC (@PointC) on CodePen

 

More info on all the fun stuff you can do with stagger:

https://greensock.com/docs/v3/Staggers

 

Hopefully that helps. Happy tweening.

:)

 

 

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

2 hours ago, PointC said:

If you want them both to have a duration of 0.35, I'd think that would be the perfect time to use the stagger object with 'amount'. Here's a fork of your demo in which I've added that update. I also set both eases to "none" so you can see the line animates as the letters move. Keep in mind that different eases on tweens of the same duration may make it look like they are not necessarily in sync.

 

 

 

 

More info on all the fun stuff you can do with stagger:

https://greensock.com/docs/v3/Staggers

 

Hopefully that helps. Happy tweening.

:)

 

 

Thanks! Works just as I wanted

I'll check the docs you linked.

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.
×