Jump to content


stop YOYO on a specific Tween and change colors (MorphSVG)

Go to solution Solved by PointC,

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 am completely new to Javascript and GSAP so my questions might be really stupid...I've played around with it for a few days but have not been able to figure out. 


I created these paths in AI so that the word "DECONSTRUCTED" will morph into lines - which I have been able to do in the codepen URL.


However, I want it to YOYO back and stop when it gets to "c" and then have the "E" and "D" morph to a red (Or whatever color) "E" and a red "R" - so spelling out "RECONSTRUCTED".



Any help would be much appreciated. And I am a Javascript newbie so I really don't understand any of the syntax. Everything I have done is through forking and trial/error.


Thank you. 

See the Pen XKPqWo by Karenhuang (@Karenhuang) on CodePen

Link to comment
Share on other sites

Hi KarenHuang :)


Welcome to the GreenSock forums.


I really like Blake's solution for you and it is the most elegant approach. That being said, you mentioned not understanding the syntax so it may be a bit confusing. With that in mind, I made more simplified solution for you. 


I took your two timelines and added them to a master timeline. I added a label to your main timeline that serves as the stopping point on the reverse animation. You can then play the main timeline from start to finish, play it in reverse to the stopping label and then play the last two letters as their own timeline animation. This is more of the manual 'brute force' approach, but may be a bit easier to understand:


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


Blake has provided great comments and links in his solution and I encourage you to read through everything and follow his links.


Since you're just getting started, I'd also recommend some additional reading and learning.




The GreenSock JumpStart Collection on CodePen:



Hopefully that gets you started.


Happy tweening and welcome aboard.



PS When using SVG text, you'll want to animate the fill:"#FF0000" instead of color:"#FF0000"

  • Like 4
Link to comment
Share on other sites

  • 2 weeks later...

Thank you guys so much! This is awesome and exactly what I am looking for! The comments in code pen are really helpful as well. I'll definitely subscribing so I can utilize the Morph SVG plugin. 

  • Like 1
Link to comment
Share on other sites

You're welcome - happy to help.


Thanks for joining Club GreenSock. Have fun with the MorphSVG plugin (& all the other cool club plugins). Please let us know if you have any additional questions.


Happy tweening.


  • Like 2
Link to comment
Share on other sites

Hi again,


I want to delay the tweenFromto by a second or two. I would like Deconstructed to morph into lines, then delay, then reverse tween until the "stopHere" label.



I tried to google and play around but only messed it up.


I tried delays, pauses, etc...and found an article about having to store the tweenFromTo reference and pause the reference instead...but I have no idea how to do that. Any help is much appreciated. 


See the Pen jAdgGq%C2%A0 by Karenhuang (@Karenhuang) on CodePen

Link to comment
Share on other sites

  • Solution

Hi again :)


You can make that happen with the position parameter. I tried to follow the link to your new pen, but got a 404 error so I just made a fork of my original answer for you.


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


You'll see one small addition on line 28:

.add( tl.tweenFromTo( tl.duration(), "stopHere" ),"+=2" ) 

That "+=2" is the position parameter. You can use hard coded times, relative times or labels. For example, if you had several tweens on a timeline and you wanted some of them to start together at the beginning of the timeline, you'd set the position parameter of those tweens to 0. It's a really powerful concept that will make your timelines quite flexible.


Please check out Carl's excellent blog post and video about the position parameter here:




Does that help?


Happy tweening.


  • Like 3
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.