GSAP DrawSVGPlugin

Ionic Framework ionic-v3
1

Hello.
I want to implement this plugin in Ionic3 . As I know a npm package doesn’t have plugins from club, nor @types/gsap. I added DrawSVGPlugin.js into node_modules/gsap and later recreated an android platform.
In .ts file as import I tried:

import { DrawSVGPlugin } from "gsap/DrawSVGPlugin";

and as calling plugin:

TweenLite.to("#svg_1", 1, {drawSVG:"40% 60%", ease:Power1.easeInOut});

my html source of svg:

<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 100 100" preserveAspectRatio="none">
  <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_1" y2="45.78805" x2="87.36405" y1="45.24458" x1="8.28813" stroke-width="12.5" stroke="#000" fill="none"/>
</svg>

Can anyone tell me what I am doing wrong? Or is there different way of doing it?

2

any error message?

Is that part working?

3

No error there. But I don’t know if it its actually imported. When I’m trying to call function with drawSVG nothing happened.

4

you can console.log() the object and see if its corretly imported

5

It is so strange - in method without console.log(DrawSVGPlugin) nothing happened but if I added that log it says “undefined” and it does an animation…

What am I doing wrong ;o?! (It’s just showing log…)

6

Maybe it’s not loaded correctly? and gets only loaded after the console.log?

7

By the way, I learned draw SVG is actually a free Jquery plugin:

and you can draw SVG by using CSS3 animation as well.

Create keyframe animation and then animate SVG’s strokedasharray property on CSS3.
You can make the same draw effect without help of any plugin at all…

8

Check these tutorials on how to animate SVG lines by using CSS3 (or Angular animations). No plugins, javascript libraries required:

This is how SVG line animation is originally created… and it’s not that difficult to learn how it works. In my opinion, this method is better than using a commercial plugin from GSAP.