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

[KarenHuang 1 Likes (Newbie)]

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

[OSUblake 9,990 Likes (Superhero)]

It might be easier to create separate animations going forwards and backwards. 

See the Pen dXqKNk?editors=0010 by osublake (@osublake) on CodePen

[PointC 8,599 Likes (Superhero)]

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.

http://greensock.com/get-started-js

http://greensock.com/jump-start-js

 

The GreenSock JumpStart Collection on CodePen:

http://codepen.io/collection/ifybJ/

 

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"

[KarenHuang 1 Likes (Newbie)]

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. 

[PointC 8,599 Likes (Superhero)]

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.

[KarenHuang 1 Likes (Newbie)]

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

[PointC 8,599 Likes (Superhero)]

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:

 

http://greensock.com/position-parameter

 

Does that help?

 

Happy tweening.