Search the Community

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

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 172.10.1.10 to 172.10.0.6, 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?

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

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

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

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

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!

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.