Draw SVG Plugin + Vue Cli

[TerraHQ]

So, I'm adding DrawSVGPlugin to my Vue Cli Project.

But I'm getting this error.


Do you know how could I achieve this?

[OSUblake]

That doesn't look right. What version are you using? The plugin should be importing from gsap/TweenLite.js, not ../TweenLite.js. 

 

Make sure you download the latest version, then copy any bonus files you need into the gsap's node_modules folder. Then import like this.

import { TweenMax, CSSPlugin } from "gsap/all";
import DrawSVGPlugin from "gsap/DrawSVGPlugin";
const plugins = [CSSPlugin, DrawSVGPlugin];

 

See npm usage.

https://greensock.com/docs/v2/NPMUsage

 

In the next version of gsap, you won't need to copy files.

[TerraHQ]

I'm using VUE CLI 4.0. and DrawSVGPlugin VERSION: 0.1.1
Via NPM I can't install bonus plugins. Cause DrawSVGPlugin is bonus one.
That's why I choose to upload it and adding to a /gsap-bonus/ folder and import it from there.

I'm imporing like this

import { TweenMax, CSSPlugin } from "gsap/all";
import DrawSVGPlugin from "@/libraries/DrawSVGPlugin.js";
const plugins = [CSSPlugin, DrawSVGPlugin];

But I've got same result.

Failed to compile.

./src/libraries/DrawSVGPlugin.js Module not found: Error: Can't resolve '../TweenLite.js' in
 

[OSUblake]

2 hours ago, OSUblake said:

Make sure you download the latest version, then copy any bonus files you need into the gsap's node_modules folder. Then import like this.

 

Well, you didn't follow those instructions, so of course nothing will change. And that plugin is really old. The plugin should be importing from gsap/TweenLite.js, not ../TweenLite.js. 

 

 

[TerraHQ]

Hey, first of all thanks for the support on this.
I really appreciate it.

I try to add it the way you mention.

 

import { TweenMax, CSSPlugin } from "gsap/all";
import DrawSVGPlugin from "@/libraries/DrawSVGPlugin";
const plugins = [CSSPlugin, DrawSVGPlugin];

Now I'm getting another error.

 

[OSUblake]

21 minutes ago, landtco said:

I try to add it the way you mention.

 

I never said to do this.

import DrawSVGPlugin from "@/libraries/DrawSVGPlugin";

 

• Find the node_modules folder in your project. 
• Find the folder for gsap.
• Put your DrawSVGPlugin.js file inside there just like this.

 

 

You should be able to import it just like this.

import { TweenMax, CSSPlugin } from "gsap/all";
import DrawSVGPlugin from "gsap/DrawSVGPlugin";
const plugins = [CSSPlugin, DrawSVGPlugin];

 

 

[TerraHQ]

hey @OSUblake thanks for the support.

As you said I was doing things wrong, and after I follow up your instruction I was able to install the plugin without errors.
Now I'm facing some basic example is not working on my end.

<template>

    <div>

        <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

            viewBox="0 0 206.97 97.7" style="enable-background:new 0 0 206.97 97.7;" xml:space="preserve">

        <polygon class="st1" points="184.09,37.6 192.13,63.04 168.69,51.81 141.5,22.33 156.91,8.12 "/>

        <line class="st2" id="line" x1="17.29" y1="12.25" x2="45.75" y2="43.65"/>

        </svg>

        <button @click="move">Draw</button>

    </div>

</template>

 

<script>

import { TweenMax,CSSPlugin } from "gsap/all";

import DrawSVGPlugin from "gsap/DrawSVGPlugin";

const plugins = [CSSPlugin, DrawSVGPlugin];

export default {

    methods:{

        move(){

            var line = document.getElementById('line')

            var tl = new TimelineMax({});

            tl.to(line,1,{y:4})

            tl.to(line,1,{x:22})

            tl.to(line,2,{drawSVG:"40% 60%"})

        }

    },

}

</script>

All seems to be working except last tween,
 

Thanks in advice.

 

Edited October 31, 2019 by landtco
file attached was old

[ZachSaucier]

Hey landtco,

 

4 hours ago, landtco said:

All seems to be working except last tween

There's nothing wrong with your syntax. I assume there are no errors/warnings in the console?

 

Since we can't see a demo, my guess is that you're trying to animate a <line> with a fill. DrawSVG animates the stroke as the documentation says. Often times it's easier to use a <path> element instead.

 

Besides that, if you could post a demo of your issue it would help us help you. 

[TerraHQ]

Hey @ZachSaucier I'm using trying to "replicate" this example ( 

See the Pen WboKyN by maxisix (@maxisix) on CodePen

)on my code, and is not working on my end.
 

<template>

    <div class="container">

        <div class="row">

            <div class="col-sm-12">

                <div class="square"></div>

                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="350" height="200">

                        <path class="text draw-me" id="line" style="stroke-linecap: round; stroke-linejoin: round;"

                          fill="none" stroke="#000000" stroke-width="5" 

                          d="M22.328,70.018c9.867-7.4,10.724,20.434,13.014,28.694c-0.08-9.105-1.308-31.463,11.936-31.886

                                c11.313-0.361,17.046,19.368,16.367,28.098c-1.432-10.289,6.234-30.682,18.163-25.671c11.505,4.833,8.682,26.772,20.071,31.964

                                c13.06,5.953,14.854-8.305,19.734-17.017c7.188-12.836,4.933-15.417,29.6-14.8c-8.954-3.842-37.42,1.728-28.539,20.1

                                c5.823,12.045,34.911,12.583,30.018-8.873c-5.385,17.174,24.01,23.104,24.01,9.123c0-9.867,3.816-15.937,16.034-18.5

                                c8.359-1.754,18.982,4.754,25.9,9.25c-10.361-4.461-51.941-13.776-37.749,12.357c9.435,17.372,50.559,2.289,33.477-6.063

                                c-2.871,19.008,32.415,31.684,30.695,54.439c-2.602,34.423-66.934,24.873-79.302,2.134c-13.11-24.101,38.981-36.781,54.798-40.941

                                c8.308-2.185,42.133-12.162,25.88-25.587c-2.779,17.058,19.275,28.688,29.963,12.911c6.862-10.131,6.783-25.284,30.833-19.117

                                c-9.404-0.429-32.624-0.188-32.864,18.472c-0.231,17.912,21.001,21.405,40.882,11.951"/>

                        <path class="dot draw-me" id="dot" style="stroke-linecap: round; stroke-linejoin: round;"

                          fill="none" stroke="#000000" stroke-width="5" 

                          d="M247.003,38.567c-7.423,1.437-11.092,9.883-1.737,11.142c14.692,1.978,13.864-13.66,1.12-8.675"/>

                    </svg>

                <button @click="move">Draw</button>

            </div>

        </div>

    </div>

</template>

 

<script>

import { TweenMax,CSSPlugin } from "gsap/all";

import DrawSVGPlugin from "gsap/DrawSVGPlugin";

const plugins = [CSSPlugin, DrawSVGPlugin];

export default {

    methods:{

        move(){

            var line = document.getElementById('line')

            var tl = new TimelineMax({});

            tl.to(line,3, {x:20},)

            tl.to(line,3, {drawSVG:'20%'})

        }

    }

}

</script>

 

As you can see I only added an Id from the codepen example.

I don't have errors in the console.
 

[ZachSaucier]

15 minutes ago, landtco said:

As you can see I only added an Id from the codepen example.

That's not true, you changed other parts of the demo as well. For example, tl.to(line,3, {x:20},) has an extra comma at the end that shouldn't be there. It shouldn't cause an error, but it's unnecessary. You also changed the HTML. By default <template> has display: none; so it's very possible that it is working but just being hidden. 

 

It's clear that there is nothing wrong with the GSAP code. So it has to be something else with your setup. 

 

What effect does your most recent demo produce? Why not show us a minimal demo like I asked above?