drawSVG newbie

[bigmamainthemud]

Hey all,

 

I think I must be overlooking something pretty basic here - would appreciate any help.

 

I simply want to animate this heart which is broken into 2 strokes, "heartL" and "heartR." I want each stroke to animate 0-100% but I can't seem to get them to work.

2 Quick notes:

1. I am adding the SVG from JS because that's what I need to do in my particular case outside this example. 

2. I don't know how to add drawSVGplugin in codepen bc I only have a local copy and didn't want to put it up somewhere where people could just steal it... 

 

Thanks for any help you can offer!

B

See the Pen xqYQbj by bigmamainthemud (@bigmamainthemud) on CodePen

[Carl]

Thanks for the demo. Very helpful.

Also, thanks for being considerate about sharing the bonus plugins.

We have "CodePen-safe" versions of the bonus plugins available for people to experiment before they buy.

All the urls can be found here: http://codepen.io/GreenSock/pen/OPqpRJ

 

You want to avoid using innerHTML to create SVGs. You can read more about the pitfalls and solution here: https://greensock.com/forums/topic/16082-gsap-doesnt-work-with-innerhtml/?hl=append#entry70655 (thanks to Blake).

 

I updated your demo to use insertAdjacentHTML which works fine for this

 

var heartSVG = document.getElementById('heart');
  var svg = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 300 250" xml:space="preserve"><style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;fill:none;stroke:#FFFFFF;stroke-width:4;stroke-miterlimit:10;}</style><g id="heartR"><g><path class=" heartLeft st0" d="M64.7,30.4C46.2,2.5,9,18.8,9,49.2c0,20.5,18.6,35.2,32.5,46.2C56,106.9,60.1,109.3,64.7,114"/></g></g><g id="heartL"><g><path class="heartRight st0" d="M64.7,114c4.6-4.6,8.5-7.3,23.2-18.6c14.2-10.8,32.5-25.9,32.5-46.4c0-30.1-37.2-46.4-55.7-18.6"/></g></g></svg>';


//do this
heartSVG.insertAdjacentHTML("beforeend", svg)
    
TweenMax.fromTo(".heartLeft", 3, {drawSVG:0}, {drawSVG:true});
// right side was drawn backwards so I had to flip the direction of the animation
TweenMax.fromTo(".heartRight", 3, {drawSVG:"100% 100%"}, {drawSVG:true});

http://codepen.io/GreenSock/pen/KWQrvm

 

 

Note you were trying to use DrawSVG on <g> elements. You can only use DrawSVG on paths. You will see in the demo that I gave each path unique class names.

[bigmamainthemud]

Hey Carl,

 

Thank you very much for the help! I figured it was a targeting issue but I was getting some response, just not the proper one. And it's my pleasure keeping your awesome work secure - you guys make a great product, are always right there for me when I have issues, and I have always and continue to recommend GSAP to my friends and colleagues. Keep up the good work and you will keep getting my money

 

B