Jump to content
Search Community

drawSVG newbie

bigmamainthemud test
Moderator Tag

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

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!


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

Link to comment
Share on other sites

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});




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.

  • Like 5
Link to comment
Share on other sites

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 ;)



  • Like 1
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.
  • Create New...