Morph SVG help

[letsbrock]

Guys - was playing around in codepen with the MorphSVG stuff but I'm unable to get my SVG's to morph. No doubt it's something super simple I just can't for the life of me think what it is.

 

If someone could give me a hint - I'd probably think they were the swellest human being around.

 

Thanks in advance x

 

Ewan

 

See the Pen BoPxGx#0 by letsbrock (@letsbrock) on CodePen

[Dipscom]

Well, well, well... Look who is here...

 

I have ZERO experience with the MorphSVG plugin but would like to get into it.

 

Saying that, I am sure that, by the time I get around to even reading the info about the plugin, half a dozen answers will be here. 

 

I would say, just to be safe, that you are missing a semi-colon, next to the "gotoAndPlay" line. Right, Brock.

 

[OSUblake]

The instructions to fix the problem were actually logged out the console. Isn't that nice?

 

 

WARNING: cannot morph a <CIRCLE> SVG element. Use MorphSVGPlugin.convertToPath(elementOrSelectorText) to convert to a path before morphing.

 

See the Pen EVppjo by osublake (@osublake) on CodePen

[letsbrock]

HOLY MOLY! Thank you guys! The console! Greensock! Just great! Such win!

[Dipscom]

@letssock, what did I say about it being answered?

[Carl]

Hey Letssock. 

 

I really enjoyed your tweet about your project. I'm glad to hear you had such a great experience and enjoy watching your art come to life! That's why we do this.

 

You did a great job with the code. I wanted you to see how you can place all your tweens in a  timeline (using virtually the same syntax) and then have full control over the entire sequence. 

 

Take a look: http://codepen.io/GreenSock/pen/XmPbwR?editors=001

 

If you want to jump into timelines, take a look at:

http://greensock.com/timelinelite

http://greensock.com/position-parameter

 

Happy Tweening!

[Carl]

however, to get a seamless loop using a timeline you would need to add an animation at the end that animates from the square to the circle.

http://codepen.io/GreenSock/pen/yYxYVg?editors=001

[letsbrock]

Hey Letssock. 

 

I really enjoyed your tweet about your project. I'm glad to hear you had such a great experience and enjoy watching your art come to life! That's why we do this.

 

You did a great job with the code. I wanted you to see how you can place all your tweens in a  timeline (using virtually the same syntax) and then have full control over the entire sequence. 

 

Take a look: 

See the Pen XmPbwR?editors=001 by GreenSock (@GreenSock) on CodePen

 

If you want to jump into timelines, take a look at:

http://greensock.com/timelinelite

http://greensock.com/position-parameter

 

Happy Tweening!

 

Carl! This is utterly bonkers great!

 

I actually had a quick play with introducing a timeline with the original pen and immediately retreated after being unable to figure out how to overlap the animation. You've literally blown my mind (as promised in the video) with the timeline labels! This will impact the way in which I work from here on out!

 

Thank you for checking out the work, your kind words and for feeding back and improving upon it! Digital high five!

[kumaramulya.mishra]

is their any CDN link required if i use MorphSVGPlugin??

any 1 guide me...

 

[mikel]

do you mean: http://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js 

[PointC]

There is no CDN link for the MorphSVG plugin for use in real world projects. The link @mikel provided is only for use on CodePen. If you want to use that plugin in real world projects, you have to be a member of Club GreenSock and host it yourself.  More info about the Club can be found here:

 

https://greensock.com/club

 

Happy tweening.