Jump to content

Search the Community

Showing results for tags 'drawsvg'.

  • 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, 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%"});
  2. 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
  3. 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!
  4. 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.
  5. 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!
  6. Hi I think a project I will be doing soon will require the drawSVG plugin to animate an svg path. I know that this is a benefit of the GSAP membership and the files are downloaded from the member area. What i would like to know is the drawSVG plugin an additional js file that will need to be included in the creative and therefor its file size or is it included in the file size exclusions that GSAP generally benefits from. thanks
  7. 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.
  8. 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?
  9. 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}); }
  10. 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.
  11. 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?
  12. 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
  13. 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
  14. 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
  15. 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!
  16. 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
  17. Any idea why the path isn't starting at the 0 point and ending at 100?
  18. 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
  19. 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!
  20. 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!
  21. 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
  22. 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!
  23. 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.
  24. 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
  25. I've got a strange problem with DrawSVG animating an SVG graphic I made. The graphic seems to be animating at a speed much faster than the duration setting. TweenMax.fromTo(".flourishsvgclass",6, {drawSVG:0}, {drawSVG:"102%"}); This *should* take 6 seconds, but it's over in about 1. The only thing that I'm doing that's slightly different is that I'm declaring the SVG as a javascript variable. But I'm not sure why that would make any difference. You can see the issue in this Codepen: http://codepen.io/Bangkokian/pen/yNqVGr Any idea why it's ignoring the duration?