Jump to content

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

Search the Community

Showing results for tags 'drawsvgplugin'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. 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:
  2. 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 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
  3. 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 !
  4. 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
  5. 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
  6. 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
  7. 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?
  8. 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!
  9. 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!
  10. 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.
  11. 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).
  12. 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; }
  13. 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.
  14. 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
  15. 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.
  16. 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!
  17. 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!
  18. 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?
  19. 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.
  20. 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
  21. 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
  22. Hello, I'm new to GSAP. I have done a few tutorials on Tweenmax and I have basic understanding of GSAP. However, I am struggling with GSAP integration with VisJs library. GOAL: I am trying to visualise network traffic between hosts using VisJs. I would like to animate the connections between hosts using GSAP. Please have a look at static visualisation here: http://legendary-broccoli.azurewebsites.net/Home/VisJs. The lines between nodes represent a connection and I would like to animate the diagram when a new connection is added or old one is removed. For example, if there is a new connection from to, I would like to start drawing a line from a source host to a destination node. Current tool: To draw Bezier curves between the nodes I am using VisJs library. The library is using quadraticCurveTo method to draw lines between nodes. /** * Draw a line between two nodes * @param {CanvasRenderingContext2D} ctx * @private */ }, { key: "_line", value: function _line(ctx, viaNode) { // draw a straight line ctx.beginPath(); ctx.moveTo(this.fromPoint.x, this.fromPoint.y); // fallback to normal straight edges if (viaNode.x === undefined) { ctx.lineTo(this.toPoint.x, this.toPoint.y); } else { ctx.quadraticCurveTo(viaNode.x, viaNode.y, this.toPoint.x, this.toPoint.y); } // draw shadow if enabled this.enableShadow(ctx); ctx.stroke(); this.disableShadow(ctx); } }, { key: "getViaNode", value: function getViaNode() { return this.via; } Questions: Is it possible to achieve the goal using GSAP while integrating it with third party libraries? What would be the best way to achieve the goal? My assumption was to use Bezier and DrawSVG plugins. If possible could you provide some examples/code spinets? Is there anything else I should know?
  23. I'm trying to make an element appear as if it's drawing a path as you scroll down the page. I have it mostly working fine, but the the object doing the following slowly drafts away from the intended path the further into the animation it gets. Unsure why this is. There's an additional problem where it completely misses the path data for the last "hump" too, you'll see what I mean towards the very end of the line (maybe this is related?) To draw the path I'm revealing the line by animating a duplicate path with a white stroke above it. The pathDataToBezier function is fed the original path data though. Open to alternative ways of doing it if I can't find a solution. You may have to maximise the preview window to see it draw properly. Thank you
  24. I'm trying to use DrawSVGPluging but as a beginner user, I'm doing something wrong but I don't know what is wrong. I want that the "Q" appear in color green, so far only the grey appear in the animation. The gray is the base and the animated draw should be green, as in the example given by the GSAP video tutorial. Does anybody could take a look at my code in codepen and tell me what's wrong? Thanks
  25. Hi, I want to change the color of this box/background, smoothly from one color to the next. Right now, each time it changes color, it jumps back to alpha 0 and then fades the new color in. If I set alpha to 1 then the last color covers the other colors. You'll see what I mean in my pen. Thanks, -Stefan