Malik Posted September 9, 2020 Share Posted September 9, 2020 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 More sharing options...
GreenSock Posted September 9, 2020 Share Posted September 9, 2020 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! 2 Link to comment Share on other sites More sharing options...
Malik Posted September 9, 2020 Author Share Posted September 9, 2020 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 comment Share on other sites More sharing options...
ZachSaucier Posted September 9, 2020 Share Posted September 9, 2020 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 comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now