GSAP DrawSVGPlugin in Ionic

Question

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?

Answer 1

When using DrawSVG in Ionic (I've replicated and tested this method on several projects):

1. Place the GSAP file you will be using under src/assets/javascripts, and call the script file as you would in an HTML inside your index.html:

   <script src="assets/javascripts/gsap/TweenLite.min.js"></script>
   <script src="assets/javascripts/gsap/plugins/DrawSVGPlugin.min.js"></script>
   

2. Add the GSAP variables you will be using

   /*
     Normal imports here..
   */
   import { LoginPage } from "../login/login";
   
   declare var TimelineLite: any;        
   declare var TweenLite: any;
   declare var Power1: any;
   
   @Component({
     selector: 'page-profile',
     templateUrl: 'profile.html',
     providers: [Data, Api, DatePipe]
   })
   
   export class ProfilePage {
   ...
   

3. Use like normal. As you already know, SVGs must be inlined.

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