Jump to content
GreenSock

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

Increase and decrease fontSize using tween

Recommended Posts

I am playing with spiral animation using tweenlinemax, I saw couple of examples related to spiral animation for growing text font size during animate but I also want to reduce the size of font after 1 second duration.

 

tl.to("#Text",10,{attr:{startOffset:'100%'}}) 
  .to("#theText", 5, {fontSize:50},2)
  .to("#theText", 5, {fontSize:10},1); //this is not working

so is there any way to grow up and down the font size while animate on SVG path using tweens.

See the Pen yemdqR by PointC (@PointC) on CodePen

Link to post
Share on other sites

Sure, that should be pretty easy. You just had your animations sequenced incorrectly - your tween that increases the font size had a duration of 5 seconds, but your tween that decreases the font size was placed on the timeline 1 second after the first tween, so it was overlapping by 4 seconds. I assume you want those tweens to be sequenced one-after-the-other. There are a bunch of ways to do that, but one simple way is to just change the position parameter to the place where the first tween would be done. Here's a fork of your demo: 

See the Pen 7e3464a9999891f776ab9d5e5e633304?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Also note that you were loading a VERY old version of GSAP. I'd strongly recommend updating to the latest. It's smaller and WAAAAY more capable. 

 

Happy tweening!

  • Like 2
Link to post
Share on other sites

Thanks for the clarification, can you suggest what is best ease: should we need to use in this case I am little confuse about that.
 

Link to post
Share on other sites
1 hour ago, Malik said:

can you suggest what is best ease: should we need to use in this case I am little confuse about that.

That's for you/a designer to decide :) Maybe it'd be helpful to use our ease visualizer to try out a bunch of different eases. The possibilities with eases in GSAP are infinite! 

Link to post
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.

×