Search the Community

Hi GSAP Friends, Question/Observation/Bug: Working on a DrawSVG animation and was having some huge performance issues on iOS mobile. It turns out that adding a size directly to the SVG element was causing the issue (adding a size to a div wrapper helped eliminate the issue). Size on SVG pen (awful on iOS): http://codepen.io/ryan_labar/pen/wWqGZk Size on div wrapper pen (much better on iOS): http://codepen.io/ryan_labar/pen/mErPEK Any reason for this issue (am I doing something wrong)? Not needing to wrap an SVG in a div would really be idea. Is it a GSAP bug, or the fault of the browser (or both)? Thanks! **UPDATE** even with the div wrapper, performance isn't great on mobile, what should I do? From my understanding, resizing my SVG's viewbox/internals may help, but IDK if that will eliminate the problem, it's not exactly a huge svg file--size or otherwise

Thought I'd share a couple of CodePen's that might help someone. I was charged with coming up with something that would allow a user to dynamically load an SVG into a container and then draw it using drawSVG. (Our organization got the Business Green membership so we wanted to get all the goodie we could get out of it!) As you know, not all SVGs are alike and we didn't have the convenience of being able to go into every SVG and add class names. So, first I needed something that would snag an svg file in an img tag and replace it with the inline version. I decided to use this (won't go into the process of doing that but it works): https://www.npmjs.com/package/inline-svg Then I needed a script that would parse through the lines, paths, etc to see what was there and draw the SVG. I wrote a really quick function that will do that and added a couple of bonus functions (center on the screen and shake) for good measure. Hope that helps someone who might have the same issues at least get started.

Hi, I created a polyline SVG curve. I am trying to a really simple tracing from 0% to 100% but I am not sure why it isn't working? Shouldn't it be as simple as: TweenMax.fromTo("#graphing", 2, {drawSVG:"0%"}, {drawSVG: "100%"});

Hi all, Trying to animate a line between 2 random points inside a circle using drawSVG. That is the end result i am hoping for. But this is a learning experience so doing it bit by bit. However, i am now stuck. I can make the points appear (currently limited to 2) but would like to animate them in on the pointsTL timeline rather than using the pointer.appendTo("#circle").fadeIn(x);. I put an example in the top left to show what i am trying to achieve but happy for direction to get back on track at the moment in terms of setting up the gsap timeline. Any help is appreciated! Phil

Hi, I'm trying to reveal a dashed line with drawsvg using a mask but the mask position seems to be off. I can increase the stroke-width for lines that don't overlap but when they do overlap in the codepen example, I need a more precise line. Anybody encounter this and know whats up? Thanks!

I would like this svg to 'appear to be drawn in a z-form. meaning top (green) line from left to right, then (red) line from where the green line leaves off and returns diagonally right to left, then finally the bottom (black & grey with shading) lines are drawn again left to right. There are two lines that form the bottom line, they should draw at the same time, each of these four lines need to be drawn separately to allow the path width to change a little across each direction change and the two lines (as well as allowing for shading of one) allows the width of the combined line to give change a little and this (I hope) lends a real sketchy nature to the final result. I understand (I think) that the there should be a tween in which each of the three individual line drawSVG effects occur (Note again that the two lines (id="line3") should draw concurrently). I was able to get the sequence right at one time, but the directions never were correct, and then it broke and would not work at all. So I have at least reconstructed it to a place that at least all the parts are present and I think the concept is pretty clear. Things that I would like to really understand; How to assign either an id or class name (I know there was much said about assigning a 'var' to each element and then using the var as the id in the svg; but there are some examples preferring use classes (not clear to me if there is a clear difference in this or cases where one works and one does not). To be honest I have found pretty much everything to be complicated (this is more a feature of JS rather than GS). By the way, I prefer a single more complicated solution that ALWAYS works than some mix of sometimes works easier methods. Once we get past the naming conventions/preferences then we have the nesting of drawing elements (timelines) or delays, either is great, but I am not totally convinced that a TL is needed for something as lightweight as this example (I do like them). Finally once this all works it is my "hope" to be able to export the shading block from the inline SVG to the CSS file. Sorry for the verbose nature of this post, I hope that this will prove helpful to others with my learning style. Something that would be really helpful is a subset of Forums that cover these just starting out sort of items. I had scanned the forum titles as well as searched for both "beginner drawSVG" and "newbie drawSVG" so I am thinking my question may be novel, but if not sorry I tried.

Hello, I'm using the DrawSVGPlugin.GetPosition with good success to check if an SVG has drawn itself to a certain point before triggering a separate animation, like so - if (DrawSVGPlugin.getPosition(".svg-line #filled")[1] > 60) { do animation } else { reverse animation } This works great when using the touchpad on my macbook. However, I just noticed on mouse scrollwheels, that it doesn't seem to catch the IF statement condition if I scroll past it in 1 long flick. If I scroll even a small amount afterwards, this triggers the animation. Is there an update function or way to fix this issue? Thanks!

Hi there, I am using the below codeon our theme here: http://goodlife.fuelthemes.net/2015/10/10/sunset-overdrive-and-the-mystery-of-the-mooil-rig-review/ TweenLite.to(_this, 1, {attr:{"stroke-dashoffset":offset}}); If you look at the console, you'll see that we are getting SVG related notices: 'SVGElement.offsetWidth' is deprecated and will be removed in M50, around April 2016. See https://www.chromestatus.com/features/5724912467574784 for more details. 'SVGElement.offsetHeight' is deprecated and will be removed in M50, around April 2016. See https://www.chromestatus.com/features/5724912467574784 for more details. SVG's SMIL animations (<animate>, <set>, etc.) are deprecated and will be removed. Please use CSS animations or Web animations instead.

TweenMax.staggerFromTo(counterElement.find('g path'), details.speed, {drawSVG:"0", ease:Sine.easeOut}, {drawSVG:details.percentage+"%", onUpdate: function(){console.log(this)} }); The animation works correctly. The onUpdate is working either. Now I want to get the current percentage of the drawSVG in the onUpdate. I looked in the this result object, but can't find any variable with current percentage. How to achieve this?

Can someone help me fix my code or point me at a tutorial? I've been unable to find code that works in my searching and I'm still pretty new to GSAP. I'm trying to get a DrawSVG line animation to happen from 0 to 100 on hover of a button and then when the mouse leaves the button I want the animation to go back from 100 to 0. I'm also having trouble getting the line to start at 0. When the page loads the line is at 100. Here's my codepen: http://codepen.io/aaronsleeper/pen/JGgVzr And here's my current script: $('.btn').hover(highlightOver, highlightOut); function highlightOver(){ TweenLite.from($(this).find('.highlight'), 0.3, {drawSVG:0,ease:Expo.easeOut}); } function highlightOut(){ TweenLite.to($(this).find('.highlight'), 0.3, {drawSVG:0,ease:Expo.easeOut}); }

I just want to animate this svg left to right, however, no transition is happening. Not sure why. The SVG is just exported from Illustrator. Thanks in advance.

I am new to the DrawSVG plugin. I have researched the API and it is easy to use and understand. Good job guys! I am trying to create the Google Material spinner as demonstrated here http://codepen.io/mrrocks/pen/EiplA However my version isn't working out quite nicely. http://codepen.io/vennsoh/pen/yexzVg Here is my intent: spinnerTimeline.fromTo("#circle", 1, {drawSVG:"20%"}, {drawSVG:"20% 100%"}) <-- A .fromTo("#circle", 1, {drawSVG:"20% 100%"}, {drawSVG:"20%"}); <-- B A: Grow the stroke from 20% to 20% 100%. B: Shrink the stroke back from 20% 100% to 20%. However B is taking the shortest path to do this instead. How can I tell DrawSVG to go the other way round if you know what I mean?

Hello, I'm mystified as to why the stroke on the red bar in my pen doesn't animate like the stroke on the white bar. The only difference I can see are the coordinates of the lines. Thanks

Hello, What I am trying to do is combine the DrawSVG plugin with this awesome pen, so that a line can be drawn based on the location of the browser scrollbar. Ultimately I would like to make the dotted line reveal with the rocket ship, so that it appears as though the rocket is leaving the line as a tail behind it. What I hoped to do was create 2 timelines so that I could match up the timings of the rocket and the line reveal. What I can't seem to do is get the DrawSVG plugin to respond to the custom code which links up the timeline to the scrollbar. I was also thinking there might be some simpler way to do this by revealing the line with a mask, but I was not able to find any methods which might work with the browser scrollbar. I'd really appreciate any tips, similar projects, or help you might be able to give. Thanks a ton, Savana

A few days earlier I know, but I am off to the beach tomorrow. I wanted to say a big THANK YOU to the awesome GreenSock team. Thank you for all the new features, plugins and the incredible amount of work put into the GSAP tools that make our lives so much easier. Also a big thanks to everyone contributing to this forum for helping newbies and pros getting to know GSAP, brainstorming ideas and for simply being so helpful every time. https://ihatetomatoes.net/happy-new-year/ Happy new year. Petr

Hey - I was reading an article by Sara Soueidan about grouping and reusing SVGs, so I thought I'd try implementing that on an animation I had already completed. Here's the original, using individual <line> elements: http://codepen.io/flysi3000/pen/XmaqBQ The new version with a reused <symbol> is here: http://codepen.io/flysi3000/pen/YwKedE. As you can see, the svg lines aren't rendering as expected at all. Wondering what I'm doing wrong? SVGs are still kind of mysterious to me, so any help would be greatly appreciated!

Hi All, I'm working on a custom radio checkbox using drawSVG and am having a bit of trouble getting my animation to play more than once. I'm thinking that resetting the timeline once the animation is completed is how it should be done, but I'm not able to quite figure that out. Please see the Codepen ( details. Thanks! Ryan

Any idea why the path isn't starting at the 0 point and ending at 100?

Hi Again i have a problem and i need help. I have written a code to animate svg on hover and it does so also but the problem is when i quickly hover again and again it redraws and looks broken i looked in jquery they have something .stop(true, false) with .animate but which cant be used as i am using greensock and it works differently so i tried with pause but its just pauses the animation. I have looked in forum and found this but i am not sure how can i +=20 with SVG http://greensock.com/forums/topic/8786-equivalent-of-jquery-stop/ I hope i have created a proper codepen this time. Thanks, Fahim

Hi, I was just testing out DrawSVG on Codepen for the first time. I was animating a circular stroke, and I couldn't figure out how to make the animation go counter-clockwise, instead of clockwise. What would be the best way to achieve this? Any suggestions are appreciated!

Hi! I'm trying to animate an svg path using the DrawSVG plugin and can't seem to find a way to seamlessly loop the path using a consistent width around the connected path. I've seen examples of this accomplished with css but can't seem to be able to accomplish this using the plugin. Does anybody know how this can be done? Thanks!

Hello, I have a short animation made using the DrawSVG Plugin. There's a lighting bolt in the middle. Problem is, it shows a long white line at the very beginning and then when in animates, it just jumps at the end to close off the object. I need this line to be invisible at the beginning and for the animation to run smoothly. Please check my Codepen URL. Thanks, -Stefan

I've got a great SVG animation almost ready to share but need some last round tips. My code has been refined plus the integration of pointers Blake gave me in a previous thread, but it seems I'm having difficulty pausing the orbs when they reach the end of their individual bézier paths (i.e. x: 0, y: 0). Any advice? When each brain wave signal fires from the orbs the wave should be firing when x is 0 and y is 0 just to repeat myself if I wasn't clear. Thanks!

Trying to create a floating orb effect where each orb bubbles in and then sends a transmission to the child's brain. Each orb will send a transmission at different times, but avoid being close w/one another in terms of the actual transmission sequence. At some point during the entire animation the orbs that send the signal in diff. intervals eventually sync up. What would be the best way to control the transmissions from overlapping one another? BTW it is required that each orb float all the time even when another adjacent orb is transmitting.

Hello, This is my first attempt at DrawSVG. I've got 3 svgs that appear one-at-a-time then the stroke is drawn fromTo {drawSVG:"0% 50%"}, {drawSVG:"0% 100%"} and then the y position is animated. Everything works as I expect except for the first draw. It's not honoring the fromTo position. Can you please tell me where I've gone wrong. Thanks