adiusz

thank you @mikel

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: How can I exactly do that?

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: https://codepen.io/PointC/pen/YeryYo Also, is there any simple way to reverse paths so it draw from left side to right instead of right to left?

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

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.

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

Yes i put it to main folder of my project and then run npm install ./gsap-bonus.tgz. Just like the docs says.

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.

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.

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

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.

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.

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!

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.