[Draw a simple line using DrawSVGPlugin]

thank you @mikel

[Draw a simple line using DrawSVGPlugin]

Thanks @ZachSaucier, now it's more clear to me. I prepared my assets as you described and it works like a charm. 

 

But one question about this:

On 10/22/2020 at 3:07 PM, ZachSaucier said:

But you can also use DrawSVG to reverse the direction by switching the start and end values.

How can I exactly do that?

[Draw a simple line using DrawSVGPlugin]

Hello there.

I'm trying to draw these paths you can see in the example, but instead if simply drawing paths I managed to draw "border" around the path. 

I would really like these paths to just start from one point and finish in another in straight line.

 

Just like here:

See the Pen YeryYo by PointC (@PointC) on CodePen

 

Also, is there any simple way to reverse paths so it draw from left side to right instead of right to left? 

See the Pen MWebrxq by adiusz (@adiusz) on CodePen

[DrawSVG not working]

It turns out that the problem with the CodeSandBox was about gsap-bonus files. I managed to get it on by removing this from package.json and deleting imports of DrawSVGPlugins. So now it works, and you can see it live here: codesandbox.io/s/beautiful-feather-gh8e2

[DrawSVG not working]

12 minutes ago, ZachSaucier said:

Does Netlify have a way to host files not in a repo? That way you could add the .tgz there. If they don't, use a private repo as your Netlify source and add the .tgz file.

 

Your CodeSandbox server fails to build. Please try to get it working  

I don't think they do. But I'm facing this issue in my actual project, with a private repo. 

Also guys I don't know what is going on with that CodeSandBox, to be honest I never used it  

 

@OSUblake corrected. 

[DrawSVG not working]

3 minutes ago, OSUblake said:

You need to ignore it in your gitignore.

!gsap-bonus.tgz

 

Ok, thanks. I missed exclamation point.

 

I still got this error on Netlify:

4:19:57 PM: npm ERR! code ENOENT

4:19:57 PM: npm ERR! syscall stat

4:19:57 PM: npm ERR! path /opt/build/repo/gsap-bonus.tgz

4:19:57 PM: npm ERR! errno -2

4:19:57 PM: npm ERR! enoent ENOENT: no such file or directory, stat '/opt/build/repo/gsap-bonus.tgz'

4:19:57 PM: npm ERR! enoent This is related to npm not being able to find a file.

4:19:57 PM: npm ERR! enoent

4:19:57 PM: npm ERR! A complete log of this run can be found in:

4:19:57 PM: npm ERR! /opt/buildhome/.npm/_logs/2020-08-26T14_19_57_717Z-debug.log

 

I still cannot make this plugin to actually draw my SVG. You can check the code on repo here:

github.com/adiusz/gatsby-gsap-example/

or on CodeSandBox:

https://codesandbox.io/s/peaceful-river-noqyw

 

[DrawSVG not working]

1 minute ago, ZachSaucier said:

Did you install GSAP via the .tgz as the installation docs and video say to do?

Yes i put it to main folder of my project and then run 

npm install ./gsap-bonus.tgz. Just like the docs says.

[DrawSVG not working]

3 minutes ago, ZachSaucier said:

 My understanding was that Gatsby can run the code on the server where the window doesn't exist. Since GSAP requires the window to exist to do these sorts of animations, you only do them if it exists.

 

I think you're correct, and I found solution to this problem on this very forum. Here it is:

if (typeof window !== "undefined") {
  gsap.registerPlugin(ScrollTrigger, TextPlugin, DrawSVGPlugin);
}

It works for ScrollTrigger and TextPlugin. Not only on my local development.

 

[DrawSVG not working]

8 minutes ago, ZachSaucier said:

What error? 

Sorry, here it is: 

 

ERROR #98124  WEBPACK

Generating development JavaScript bundle failed

Can't resolve 'gsap/DrawSVG' in '/Users/path/to/project/pos-gatsby/src/pages'

If you're trying to use a package make sure that 'gsap/DrawSVG' is installed. If you're trying to use a local file make sure that the path is correct.

[DrawSVG not working]

And here is the CodeSandBox link: codesandbox.io/s/peaceful-river-noqyw

[DrawSVG not working]

Hi @ZachSaucier, thanks for responding. 

 

Ofc I won't include it anymore, I did it cause Netlify's log said that it couldn't find gsap-bonus.tgz file. I removed it already. 

Also, I know you are a Superhero here, but shouldn't import looks like this?

import { gsap } from "gsap";
import { DrawSVGPlugin } from "gsap/DrawSVGPlugin";

gsap.registerPlugin(DrawSVGPlugin);

At least this is what Docs are saying. I tried your version and I got error. 

[DrawSVG not working]

I can see that @Richard1604, but it's not saying much to me - there is no guide for setting up bonus plugins for React. Also it doesn't resolve my primary problem, which is svg icons not drawing.

[DrawSVG not working]

Hello guys. 

I have 2 problems.

 

First I was trying to use DrawSVGPlugin with Gatsby, I followed docs, checked examples but svg doesn't draw or even appear at all. So i decided to recreate this problem with git repo, so I can share it with you. I decided to host this repo to Netlify, but then I realized it couldn't build my site. This is the error I'm getting: 

 

1:44:01 PM: npm ERR! code ENOENT

1:44:01 PM: npm ERR! syscall stat

1:44:01 PM: npm ERR! path /opt/build/repo/gsap-bonus.tgz

1:44:01 PM: npm ERR! errno -2

1:44:01 PM: npm ERR! enoent ENOENT: no such file or directory, stat '/opt/build/repo/gsap-bonus.tgz'

1:44:01 PM: npm ERR! enoent This is related to npm not being able to find a file.

1:44:01 PM: npm ERR! enoent

1:44:01 PM: npm ERR! A complete log of this run can be found in:

1:44:01 PM: npm ERR! /opt/buildhome/.npm/_logs/2020-08-26T11_44_01_285Z-debug.log

1:44:01 PM: Error during NPM install

1:44:01 PM: Error running command: Build script returned non-zero exit code: 1

1:44:01 PM: Failing build: Failed to build site

1:44:01 PM: Failed during stage 'building site': Build script returned non-zero exit code: 1

1:44:01 PM: Finished processing build request in 33.57453424s

 

 

Also, here is the repo I mentioned: 

github.com/adiusz/gatsby-gsap-example/

 

All the actions are taking place in src/pages/index.js file. I would really appreciate if someone look into this and tell me why I'm failing. 

Thanks!

[DrawSVG build failed (Gatsby)]

Hey @Loopspeed, where should I paste this code fragment? I get syntax error highlights wherever I put this inside of component function or outside of it.