Jump to content
Search Community

Increase and decrease fontSize using tween

Malik test
Moderator Tag

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