Search the Community

Hi, Receiving this "Module not found" error while importing DrawSVGPlugin module. the base gsap is working fine, just the drawSVGPlugin is throwing this error. import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin'; export const PathAnimation = () => { gsap.registerPlugin(DrawSVGPlugin); } I am using NextJS 14.1.0. I tried importing the plugin from "/dist" "/all", but the issue persists. Thanks in advance for help.

I current signed up and bought the package to become a club house member, I love what you guys do and wanted to show my support! So I have been working on my React Portfolio Website recently and used the DrawSVGPlugin, I installed the zip file and everything works on my localhost, but when I deployed to Netlify it doesn't show up. When I inspect the page using the dev tools I see my image and logo outline are there but hidden. I have attached bellow the code and pictures from the localhost and live site any help will be much appreciated thank you in advanced!!

Hi just joined to club GreenSock and I'm trying to make animation with DrawSVGPlugin ,following steps of codepen example, and Nextjs. The SVG renders for 1 second then it disappears. I attach a image with the code I have

import { useEffect, useRef } from 'react' import gsap from 'gsap-trial' import DrawSVGPlugin from 'gsap-trial/dist/DrawSVGPlugin' import LogoS from '../../../assets/images/logo-s.png' import './index.scss' const Logo = () => { const bgRef = useRef() const outlineLogoRef = useRef() const solidLogoRef = useRef() useEffect(() => { gsap.registerPlugin(DrawSVGPlugin) gsap .timeline() .to(bgRef.current, { duration: 1, opacity: 1, }) .from(outlineLogoRef.current, { drawSVG: 0, duration: 20, }) gsap.fromTo( solidLogoRef.current, { opacity: 0, }, { opacity: 1, delay: 4, duration: 4, } ) }, []) return ( <div className="logo-container" ref={bgRef}> <img className="solid-logo" ref={solidLogoRef} src={LogoS} alt="JavaScript, Developer" /> <svg width="559pt" height="897pt" version="1.0" viewBox="0 0 559 897" xmlns="http://www.w3.org/2000/svg" > <g className="svg-container" transform="translate(0 457) scale(.1 -.1)" fill="none" > <path ref={outlineLogoRef} d="m2930 4560c-344-16-623-85-915-228-231-114-406-241-600-436-61-60-145-137-188-169-432-325-715-757-806-1230-109-564 21-1117 384-1641 250-360 780-877 1547-1511 451-373 600-505 803-708 215-216 275-293 350-448 55-114 75-188 82-298 6-96-6-173-39-257-21-53-27-59-73-76-136-51-374-73-521-46-401 71-763 376-1088 916-21 35-43 63-50 63s-32-13-57-29c-74-48-229-141-233-141-3 0-54-31-113-68s-135-84-168-102c-33-19-67-39-77-45-9-5-56-34-105-63-48-29-153-94-233-143s-152-92-160-96c-26-12-144-86-180-114-19-15-137-88-262-164-130-78-228-143-228-151s30-70 66-137c207-379 396-640 644-887 219-218 401-350 665-480 247-122 484-196 775-241 172-27 628-38 819-19 636 61 1161 302 1561 716 47 48 128 120 181 160 402 304 684 722 804 1189 61 240 70 318 70 640 0 259-3 304-23 418-84 467-268 823-647 1257-192 218-401 409-1095 995-637 539-1034 894-1208 1081-152 163-223 311-223 465 0 43 2 83 5 88 20 32 266 41 394 15 322-65 649-312 972-731 39-51 70-83 82-83 10 0 283 234 615 528 328 290 684 605 792 700s197 181 199 191-38 62-100 131c-399 446-754 740-1106 918-314 159-659 255-962 268-63 2-135 6-160 7-25 2-110 0-190-4zm570-58c671-123 1188-450 1813-1144 53-60 97-112 96-115-1-12-411-367-423-367-6 0-20-13-31-28-11-16-164-156-340-312l-320-283-18 24c-239 311-459 523-675 651-99 59-246 117-344 137-112 23-311 21-416-4-200-48-373-182-450-349-32-70-34-82-34-176 0-179 64-318 229-494 182-195 573-545 1213-1086 693-585 897-771 1085-985 379-434 563-790 647-1257 20-113 23-161 23-398 0-300-10-384-70-620-97-379-302-729-586-1e3 -105-100-185-166-191-159-9 8-63-29-92-63-48-57-291-191-482-266-202-79-481-143-735-167-188-18-606-8-779 19-290 45-528 119-775 241-385 190-680 444-972 836-118 159-345 527-332 538 46 36 763 456 773 453 16-7 36 11 30 27-3 9 131 99 212 142 28 15 203 122 231 141 21 14 23 13 45-23 225-384 515-687 794-829 164-84 300-115 503-115 125 0 235 15 340 46 17 5 22 4 17-4-13-22 24-13 47 11 12 13 53 40 91 61 193 105 351 279 418 462 18 49 21 82 22 199 1 165-11 222-79 363-75 156-135 232-355 453-208 208-355 338-808 713-766 633-1288 1142-1537 1501-305 440-449 908-415 1355 24 318 109 596 262 848 74 123 192 277 231 301 18 11 43 38 56 61 24 42 155 164 277 255 293 221 660 367 1050 419 167 23 601 15 754-13zm-2357-938c-321-485-398-1123-203-1693 70-208 178-417 315-615 250-360 780-877 1547-1511 451-373 600-505 803-708 215-216 275-292 350-448 65-136 80-200 79-343-1-134-15-186-80-302-60-108-201-244-326-317-53-31-55-28-31 35 12 33 17 79 17 184 1 165-12 222-79 363-75 156-135 232-355 453-208 208-355 338-808 713-766 633-1288 1142-1537 1501-305 440-449 908-415 1355 34 454 190 817 504 1174 58 66 264 256 277 256 4 0-23-44-58-97zm2095-529c212-43 445-176 659-378 129-121 368-406 360-429-2-6-95-93-208-193l-204-182-18 24c-105 137-202 250-307 355-191 192-351 304-540 380-145 58-234 72-415 67l-153-4 24 47c28 57 121 159 181 200 71 49 158 88 240 108 99 25 274 27 381 5zm-2672-5486c233-416 511-757 812-997 275-219 616-385 967-472 225-55 364-71 669-76 307-6 445 3 666 43 255 46 474 119 698 233l117 60-75-71c-377-356-881-572-1471-628-188-18-606-8-779 19-465 72-868 244-1222 521-180 141-402 382-575 625-130 183-342 550-326 566 11 11 446 277 454 278 4 1 33-45 65-101z" /> </g> </svg> </div> ) } export default Logo

Hi there, I would like to have the same effect as on this tutorial: https://codepen.io/PointC/pen/c07761a17f94434f1229e11e798f1a3d Everything is going well, except the drawing of the dashed line. I think I took all the necessary information, and even when I'm copying the code from codepen, the dashed line will not show up. If is remove the part 'mask="url(#theMask)"', the dashed path is showing up. Can somebody please help me? Thanks in advance! Below the result of my code:

Hello! I am new to GSAP and I started angular project with gsap 2, I have issue with DrawSVGPlugin, on my LocalHost I have setup animation with drawsvg, it is working as expected, but after production build and deploy, this lines stoped to drawing and just loaded http://prntscr.com/q5r0jc Here is link to my server http://185.233.116.112/ and I have also attached GIF from my LocalHost. I hope someone can advice how I can find reason or any way to debug it since I don't have any errors. Best regards

Hi, I am working on a project using the DrawSVGPlugin, and using native JS that's compiled with gulp and webpack. I'm importing gsap and the plugin as such : import gsap, { TimelineLite} from 'gsap'; import * as drawSVG from '../gsap-extras/DrawSVGPlugin.js'; and the registering the plugin in the constructor of my component's class using : gsap.registerPlugin(drawSVG); Then, I simply want to test the plugin doing something like : new TimelineLite().set([this.anchorCircles, this.anchorFillCircles], { drawSVG: 0 }); This is actually working as long my gulp server is watching the changes and displaying the development JS, but after running a build, I'm able to log the drawSVG imported, but the TimeLine().set wont have any effect on my elements. I can't provide my gulp config if this is needed, but may be there's something simpler that I am missing here.. Thank you EDIT: // Finally found that the way the webpack was configured prevented the minified plugin to work. I had to change the webpack babili plugin to webpack minify plugin !

Hi all, I am trying to animate SVG elements for the two states (play/pause) when you click on each button. So far the animation works from play to pause but the reverse animation doesn't happen, it just jumps straight to the play icon. Although, after pressing play I set a timeout function that reverses the animation from pause to play after 5 seconds. Surprisingly, the animation works here even though the parameters are identical to the ones that don't work on click. Does anyone have any idea why is this not working? Thank you

Hi there, I would like to use the DrawSVG Plugin to draw a line as you scroll down/up the page. I worked out the percentage of the page that gets scrolled. I need the animation to start once you get passed the first block so I added the calculations in the JS function on scroll I have also set the SVG line to 0 gsap.set(pathID, { drawSVG: 0 }); I pass the percentage scrolled value to the drawSVG parameter but it doesn't get triggered for some reason. Does anyone know what's missing? Thank you

Hi there, I'm trying to animate an SVG using DrawSVG on mouse down/up. On mouse down the animation seems to be working fine but when you release the mouse and try to press it down again the animation doesn't happen. Instead, these parameters go down to: stroke-dashoffset: 0; stroke-dasharray: none; Does anyone know why is this happening? Thank you

so I have this piece of SVG, the lines seem to be fine, but for some reason when I try to drawSVG them they start with dashed lines and then in the end of duration just jump to 100%, instead of animating. When I just drop it on Vivus Instant (https://maxwellito.github.io/vivus-instant/) it works just fine. Can anyone please point me what might be the cause?

Hi, I have been trying to use DrawSVGPlugin on our site but it is not working. I am trying to animate a simple SVG for testing. I am not sure why DrawSVGPlugin is the only script that does not work. <svg id="demo" xmlns="http://www.w3.org/2000/svg" width="5000" height="2000" viewBox="0 0 500 200"> <title>Untitled-1</title> <rect width="500" height="200" fill="#29abe2"/> <path d="M51,88c41.25-35.3,99.44-74.35,148-57,31.92,11.41,37.73,39.34,70,53,28.68,12.14,77.52,12.7,164-49" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="4" fill-rule="evenodd"/> <path d="M302.31,164.42a86.72,86.72,0,0,1-34.09-6.58C252,151,242.37,140.67,233,130.68c-9.69-10.35-18.85-20.13-34.69-25.8-37.38-13.36-86.51,5.7-146,56.64l-2.6-3c60.69-51.94,111.15-71.24,150-57.36,16.76,6,26.68,16.58,36.27,26.82,9.07,9.69,18.44,19.7,33.84,26.22,39,16.51,93.54.1,162.06-48.79l2.32,3.26c-39.27,28-74.39,45.68-104.39,52.51A123.49,123.49,0,0,1,302.31,164.42Z" fill="#f2f2f2"/> </svg> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> <script src="{OUR_SITE}/js/DrawSVGPlugin.js"></script> const tl = new TimelineMax(); tl.from("path", 2, { drawSVG: 0, yoyo: true, repeat: -1, repeatDelay: 1, ease: Power2.easeInOut }); Thanks!

Hello and my apologies in advance if this has been answered; couldn't find anything in the forum. I recently bought the members-only GSAP pack in hopes of integrating DrawSVGPlugin into a Laravel project. I don't want to belabor everything I've tried so far so if anyone has done this successfully, please feel free to reach out. Thank you!

So I've been getting to know the morphsvg and drawsvg plugins the last day or so, and my goal has ultimately been a curved arrow that animates as you see in the attached codepen. The issue I'm having now is that the line for this arrow should be dashed and I'm not sure what the problem is. There's a stroke-dasharray setting on the svg to begin with, but the drawsvg animation seems to override that. So I tried adding a strokeDasharray property to the tween itself but that seems to have no impact (first time using that and honestly not sure if I'm using it properly; couldn't find any documentation on it and only a couple codepen examples of it being used). I have a few, more drastic solutions in mind that seem very hacky to me so I'm hoping there's a clear approach here that I'm just unaware of. Also, if you disable the js and run the pen that will show what I am trying to get the line to look like.

I'm trying my hand at animating SVGs with gsap and having a very rocky start. My ultimate goal is to be able to just animate an arrow to follow a specific path and to autorotate along the path (so that the tip of the arrow is always centered on the line). I figured an easy start to understanding this would be to take the gsap demo code and just make minor changes to it. In this case, I simply replaced the balloon path with an arrow tip and made sure the ids were matching in the js. The problem is that the arrow seems to be all over the place in regard to the line it's supposed to be following. I've tried some minor changes in the code (adding transforOrigin properties, changing the x and y percentages on the set method) but I feel like I'm sort of throwing darts here and not seeing any real progress. If anyone could clue me in as to what I'm missing here, that would be fantastic (hopefully this exposes a fundamental misunderstanding I have of SVGs and animating them).

Inspect the codepen preview window to see the values on the svg. I've tried exporting from Illustrator and from Figma (using SVOMG), but no difference in the result. Anyone an idea how to fix this? the values: element.style { stroke-dashoffset: -1; stroke-dasharray: 1e-05px, 11px; }

Hey so I'm currently making an animated graph to show how often I skip a song on Spotify. All I'm trying to do right now is bring in "Spotify" however no animation plays despite chrome dev tools saying there is no error. Also, I commented out line 209 in my HTML because for some reason it cannot link my DrawSVGPlugin. If anyone can help with one or both of the problems I'd greatly appreciate it; thanks.

Hi everyone, I try to import DrawSVG with webpack but I have an error. ERROR in ./resources/assets/js/plugins/DrawSVGPlugin.js Module not found: Error: Can't resolve 'TweenLite' in import { TweenMax, TimelineMax } from "gsap"; import DrawSVGPlugin from './plugins/DrawSVGPlugin'; import Draggable from 'gsap/Draggable'; For informations, Draggable works well. The DrawSVGPlugin version is the last : 0.1.2. Thank's

Hey everyone, Judging by the forum posts, i'm pretty certain this issue has been posted a thousand times before but after a few hours I thought I'd try here. I've done the following: - created a new project created with preact-cli, - copied club member minified plugin DrawSVGPlugin, Draggable and ThrowPropsPlugin to a /src/vendor directory - imported DrawSVGPlugin in my app.js I recieve the following error: ✖ ERROR ./src/vendor/DrawSVGPlugin.min.js Module not found: Error: Can't resolve '../TweenLite.min.js' in .... Attempted to add the aliases to the preact.config.js file by adding config.resolve.alias.TweenLite = [path to node_modules gsap] but it didn't work. I haven't posted any code but I can setup a dummy project if need be. Any help is greatly appreciated. Cheers, Topher.

I have been working to animate a path which is working great thanks to the community suggestions! I am stuck on what I think is just the beginning and end fromTo params. I am trying to make the stroke start off of the screen, grow in length, and then "shrink" as it goes back off the screen again. ...then as you can see I'd like to repeat that animation. I think I'm close, but just not quite finding the correct numbers. Any suggestions would be greatly appreciated!

Hey guys! I've been using this library for a couple of days now and it's very exciting! One problem I have run into, however, is this: I've recreated the Icon of our company in a SVG-File using Inkscape. Very ugly for now, but I wanted to use it as a proof-of-concept. However, DrawSVG didn't work out of the box because I had to change portions of the SVG-File from something like: <svg> <circle style="stroke-width:0.04409721;stroke:#58575a"/> </svg> to: <svg> <circle stroke-width="0.04409721" stroke="#58575a"/> </svg> It worked relatively well from thereon out. I thus wanted to ask, before I need to write a problem that converts these SVGs automatically, whether you know of a way to force Inkscape to adjust the way it creates styles out-of-the-box, or to tell the DrawSVGPlugin to look a little harder for the styles in the first place. Disclaimer: I realize this may be a question better fit over at the Inkscape Forum, but I thought I'd give it a shot here, since the connection to the GSAP library is already established. Thank you in advance!

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?

Currently I'm animating simple SVG lines using the drawSVGplugin (version 0.1.1). The from and to values of the <line> are in ems instead of pixels. To my surprise doing a fromTo from { drawSVG: '50% 50%' } to { drawSVG: '0% 100%' } is showing a messed up animation with dashed lines. So it's using the wrong (or zero) values for the dashArray. Converting the em-values in the X1,Y1,X2 and Y2 attributes of the <line> elements to pixels fixes this problem and shows the animation like expected; filling the lines from the middle to the outsides. SVG does support ems, also inside attributes and it's working in Chrome, Firefox and even IE without problems. So it seems I'm missing something here, or drawSVGplugin isn't supporting ems. Since the rest of my project is in ems for scaling, I'd like to make the animation work with ems too. Is this possible? Should drawSVGplugin support ems? solutionTl.staggerFromTo( this.solutionLines, 1.5, { drawSVG: '50% 50%' }, { drawSVG: '0% 100%', ease: greensock.Sine.easeIn }, 0.5 ); I tried creating a codepen to show this, but it is complaining about the drawSVG pluging requesting its license over an unsecure http connection instead of https, so this isn't working.

Hi there, before a couple days a friend of the forum show me how to run svg's one after another and so on... i need something different if its possible and if anyone can help me with it, i need to have 4 svgs to the same position and when the first animation complete the first svg goes hidden and in his position comes the second one starting its animation and this continues as a loop best regards george douvogiannis

Hi there, I've got an SVG circle that I'm drawing using the DrawSVGPlugin. Say I want to draw from 12 o'clock to 9 o'clock, I would use `drawSVG: '0 75%'`. However, when I do this, for some reason my drawing is always starting at 3 o'clock. So `drawSVG: '0 75%'` ends up animating from 3 o'clock to 12 o'clock. My questions are, why is my animation always starting at 3 o'clock? And how do I get it to start at 12 o'clock? Maybe this is more of an issue with my SVG? I'm a rookie at SVGs so I'm not sure. I've attached a codepen which will hopefully illustrate the problem. Thanks