Jump to content

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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







Found 19 results

  1. 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.
  2. 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).
  3. 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; }
  4. 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.
  5. 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
  6. 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.
  7. 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!
  8. 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!
  9. 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?
  10. 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.
  11. 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
  12. 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
  13. 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?
  14. 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
  15. 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
  16. 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
  17. Hi wonder if someone could help me. I have a simple 3d rotation of a red circle on Y axis. It's working fine everywhere except on Safari and iOS8. The issue is that on safari, when it rotates it seems to be missing one half of the circle. Have attached the PEN - Pen: http://codepen.io/sonamtsu/pen/xGoRzw Page: http://codepen.io/sonamtsu/full/xGoRzw/ Any help would be greatly appreciated. Thanks
  18. Hello, I'm finally starting to get somewhere with DrawSVGPlugin and I really like it! However, I have 2 questions. I posted my project in the CodePen URL and would like to know this: 1. How do I autofade a fill in and set the stroke to 0? Right now, I have the lines being drawn and then at the end of the animation, it sets the fills back in. But when they come in, they just appear, they don't fade in (as how I want them to). .set(".aux-sym-1-shadow, .aux-sym-2-shadow, .aux-a-line, .aux-u-line, .aux-x-line", {fill:"#75674a"}); 2. How can I call the onComplete trigger at the end of the animation? Thanks!
  19. hey wondering if there is a simple way to adjust where an enclosed path is drawing from, using this plugin. i'm assuming its starting from the beginning point of the path, but when output from illustrator or such, we dont always have control on where on the object is going to be defined as the beginning or end of a path. so for instance if i have a polygon and out of the box the outline draws in starting at 12 o'clock and fills in until its enclosed, what if i wanted the line to beign at 3 o'clock or something else? thank you.