Vue js and drawSVG

[JACK LEE]

I am not sure what's the problem that causes the drawSVG not being called.

I have also tired the splittext plugin and that works fine.

Firstly, The TimelineMax is working, the last piece of code in red is working fine but not others with the "drawSVG"  in it.

 

animateLine: function () {
      var svgs = document.getElementsByTagName('svg')
      var tl = new TimelineMax()
      tl.staggerFromTo(svgs, 1, {drawSVG: '100%'}, {drawSVG: '50% 50%'}, 0.1)
        .fromTo(svgs, 0.1, {drawSVG: '0%'}, {drawSVG: '10%', immediateRender: false}, '+=0.1')
        .staggerTo(svgs, 1, {drawSVG: '90% 100%'}, 0.5)
        .to(svgs, 1, {rotation: 360, scale: 0.5, drawSVG: '100%', stroke: 'white', strokeWidth: 6, transformOrigin: '50% 50%'})
        .staggerTo(svgs, 0.5, {stroke: 'red', scale: 1.5, opacity: 0}, 0.2)
    }

[Carl]

Hi and welcome to the GreenSock forums,

It looks like you are passing a whole <SVG> as the target of the DrawSVG tween. 

You need to select a path, polyline, rect, circle or some element(s) with a stroke on it.

Check out the docs for a video and demos: https://greensock.com/docs/Plugins/DrawSVGPlugin

More demos here: https://codepen.io/collection/DYmKKD/

 

If you need more help let us know. 

[JACK LEE]

thanks for the reply, I've tried to select a path as shown in the below, but still not working. 

maybe it's something wrong with the way I import drawSVG? can you please check the way i importing the drawSVGplugins, i've done the same for split text plugin and it works fine.

 

[JACK LEE]

It's working now, the way I importing the drawsvg plugin was wrong

[GreenSock]

Thanks for letting us know. However, I didn't notice a problem with your import statement - what did you need to change to make it work exactly? 

[JACK LEE]

this is how i made it work

[OSUblake]

This is fine...

import 'gsap/DrawSVGPlugin'

 

But there was nothing wrong this.

import DrawSVGPlugin from 'gsap/DrawSVGPlugin'

 

You were just using it incorrectly. You should not do this. All you need to do is import the file, and it will automatically be registered as a plugin.

// DON'T DO THIS
var drawSVG = new DrawSVGPlugin();

 

The only reason you would ever need to reference the plugin directly is to access some static methods, like here.