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

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

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

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. 

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

Hello,

 

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