Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
AceBoy

DrawSVGPlugin with Ionic3

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

Hello.

Recently I bought a package which contains DrawSVGPlugin.

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?

Link to post
Share on other sites

Hm, seems to work fine: 

Have you tried this import instead?:

 

import DrawSVGPlugin from "gsap/DrawSVGPlugin";

 

If that doesn't work, I'm not quite sure what might be the problem in your setup. Are you getting any errors in the console? 

 

  • Like 2
Link to post
Share on other sites

First of all Ionic uses Typescript. That's why it could be a problem.

 

After some testing I came to the conclusion:

No errors while using import { DrawSVGPlugin } from "gsap/DrawSVGPlugin"

But when I added to the method where I'm making an animation this line - console.log(DrawSVGPlugin), happened something strange. In console it says "undefined" and the animation was done.

So maybe by using console.log I made an initialization of that plugin?

But on the other hand, console.log always says "undefined" value.

 

Maybe should I do something more besises pasting .js file in node_modules? I found folder called "src" with "minified" and "uncompressed" folders. Should I also put there other DrawSVGPlugin files?

Link to post
Share on other sites

I would recommend not placing the DrawSVG files in your node_modules folder because if you ever need to initialize this project on another computer, it won't be copied over from your repository automatically when you run your 'npm install' command (assuming you are not commiting your node_modules into your repository...).

 

Instead, have a separate folder just for that sort of thing, I usually call mine 'vendors' and drop them there.

  • Like 1
Link to post
Share on other sites

I know that I shouldn't do it. But after changing place of .js (eg. outside "src" folder) I have an error

Module '../../../vendors/DrawSVGPlugin' was resolved to 
            'd:/Ionic/TestAnimacja/vendors/DrawSVGPlugin.js', but '--allowJs' is not set. 

 

Also I needed to change way of importing to:

import * as DrawSVGPlugin from "../../../vendors/DrawSVGPlugin";

 

When I added in tsconfig.json a line:

"compilerOptions": {
  "allowJs": true,
}

 

I have that error:

[21:01:57]  typescript error 
            Cannot write file 'd:/Ionic/TestAnimacja/vendors/DrawSVGPlugin.js' because it would overwrite input 
            file. 
TypeError: Cannot read property 'replace' of null
    at Object.escapeHtml (d:\Ionic\TestAnimacja\node_modules\@ionic\app-scripts\dist\util\helpers.js:253:9)
    at generateCodeBlock (d:\Ionic\TestAnimacja\node_modules\@ionic\app-scripts\dist\logger\logger-diagnostics.js:187:77)
    at generateDiagnosticHtml (d:\Ionic\TestAnimacja\node_modules\@ionic\app-scripts\dist\logger\logger-diagnostics.js:179:12)
    at Array.map (native)
    at Object.printDiagnostics (d:\Ionic\TestAnimacja\node_modules\@ionic\app-scripts\dist\logger\logger-diagnostics.js:15:39)
    at d:\Ionic\TestAnimacja\node_modules\@ionic\app-scripts\dist\transpile.js:158:34
    at transpileWorker (d:\Ionic\TestAnimacja\node_modules\@ionic\app-scripts\dist\transpile.js:107:12)
    at Object.transpile (d:\Ionic\TestAnimacja\node_modules\@ionic\app-scripts\dist\transpile.js:64:12)
    at d:\Ionic\TestAnimacja\node_modules\@ionic\app-scripts\dist\build.js:109:82
[DEBUG] TypeError: Cannot read property 'replace' of null
             at Object.escapeHtml (d:\Ionic\TestAnimacja\node_modules\@ionic\app-scripts\dist\util\helpers.js:253:9)
             at generateCodeBlock (d:\Ionic\TestAnimacja\node_modules\@ionic\app-scripts\dist\logger\logger-diagnostics.js:187:77)
             at generateDiagnosticHtml (d:\Ionic\TestAnimacja\node_modules\@ionic\app-scripts\dist\logger\logger-diagnostics.js:179:12)
             at Array.map (native)
             at Object.printDiagnostics (d:\Ionic\TestAnimacja\node_modules\@ionic\app-scripts\dist\logger\logger-diagnostics.js:15:39)
             at d:\Ionic\TestAnimacja\node_modules\@ionic\app-scripts\dist\transpile.js:158:34
             at transpileWorker (d:\Ionic\TestAnimacja\node_modules\@ionic\app-scripts\dist\transpile.js:107:12)
             at Object.transpile (d:\Ionic\TestAnimacja\node_modules\@ionic\app-scripts\dist\transpile.js:64:12)
             at d:\Ionic\TestAnimacja\node_modules\@ionic\app-scripts\dist\build.js:109:82

 

Link to post
Share on other sites

I have zero experience with Ionic but I think we might be overcomplicating things here with all the imports and such.

 

I mean, the DrawSVG plugin doesn't need compilation and GSAP doesn't need to be told to initialise it so, as an attempted patch-up solution, how about having it bundled at the begining of your main JS code? You can use the minified version you said you found for that.

 

So it's available gloablly and you wouldn't need to import it on any of your module files.

 

As for your TypeScript error... I can't help you with that either. Maybe @OSUblake will have an idea.

 

Link to post
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.

×