Jump to content
Search Community

Can't get DrawSVGPlugin workign

Afro 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 Everyone,

 

I am sorry if I am asking a question that has already been answered a buncha times, I have been researching this for about 2 hours at least.

 

I have this very basic lightning bolt SVG which I just want to draw using the plugin.  Here is the html for the svg

 

<svg class="bolt"  xmlns="http://www.w3.org/2000/svg"> 
  <use xlink:href="./assets/animation-assets/comp-search-fiona/bolt.svg#bolt"></use>
</svg>

 

and here is the js code I am using to try and draw said SVG

 

const bolts = Array.from(document.getElementsByClassName('bolt'))
this.hoverTl.to(bolts[0], 1, {drawSVG: '20% 50%'})

 

I am just selecting the first bolt and experimenting to see if the drawing works, then applying it to all of my bolts.

 

My gut is telling me I am doing something wrong in the HTML and the <svg> with the <use> is not creating an inline svg that can work with the drawSVGPlugin.

 

Any help would be much appreciated!

Link to comment
Share on other sites

Hi @Shaun Gorneau,

 

Thank you so much for the fast response!

 

I have attached the svg to this post.

 

And here is it in code just for good measure

 

<svg xmlns="http://www.w3.org/2000/svg" id="bolt" viewBox="0 0 32 97"><defs><style>.cls-1{fill:#00adbb;stroke:#00adbb;stroke-miterlimit:10;}</style></defs><title>Asset 13</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><rect class="cls-1" x="0.5" y="46.5" width="3" height="50" rx="1.5"/><rect class="cls-1" x="7.5" y="44.5" width="3" height="30" rx="1.5" transform="translate(-28.54 12.47) rotate(-30)"/><rect class="cls-1" x="14.5" y="23.5" width="3" height="50" rx="1.5"/><rect class="cls-1" x="21.5" y="21.5" width="3" height="30" rx="1.5" transform="translate(-15.17 16.39) rotate(-30)"/><rect class="cls-1" x="28.5" y="0.5" width="3" height="50" rx="1.5"/></g></g></svg>

 

bolt.svg

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...