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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. In an attempt to learn GSAP and other web transitioning concepts, I've decided to start mimicking random UI concepts and examples. Any feedback, advice, best practices, other ways you might have approached the concept would be greatly appreciated. This is attempt number 2. Concept link: https://twitter.com/ProductHunt/status/782809916343984129
  2. Hi all, I'm trying to animate an SVG <line> and a <circle> which are both dashed. What I need is the dashes to be shown one-by-one (staggered, I guess ) to make the line "drawn". I've tried animating the strokeDasharray like so (where "secondStepDashedLine" is the <line> element) which didn't do anything really: tlInitial.staggerFrom(secondStepDashedLine, 1, { strokeDasharray: 0 }, 1.5); Is there any way of doing this? Thanks in advance.
  3. Sorry if this is a dupe but couldn't find anything specific to it searching. The codepen uses some code that Blake came up with to animate color lines and draw out masks for each path to reveal it, and then draw the masks back in to cover them back up. The effect is that it looks like multi-color animating lines are being drawn in, rotating a few times and then drawn back out. It works great except for this - when running the codepen you'll see at the very end, there are little remnants of the underlying paths. I've monkeyed around with stroke-miterlimit and a few other things but am still unable to figure out how to completely cover the paths with the correct masks. It varies with different SVGs too which makes me think it has to have something to do with miter settings. Has anyone encountered a similar issue and found a solution?
  4. Hey community! Can't figure this one out. I need your help! <3 I want to tween a path from "0% 0%" to "0% 100%" with the drawSVG plugin, but it behaves like the 0-position is offset from the actual beginning of the path. When I flip it around to "100% 100%" to "0% 100%" it works fine. Clueless 0.o // It seems like 0% is offset from the beginning of the path TweenMax.fromTo("#backPathP", 0.5, {drawSVG: "0% 0%"}, {drawSVG: "0% 100%", repeat: -1, yoyo: true }) // If I flip it over it behaves like I want to // TweenMax.fromTo("#backPathP", 0.5, {drawSVG: "100% 100%"}, {drawSVG: "0% 100%", repeat: -1, yoyo: true })
  5. I wondered if anyone can help shed some light on how I might be able to shift the starting point of an SVG path which forms the shape of a rectangle. I'm aware it's more to do with the SVG file itself, but it's well illustrated using GSAP's DrawSVG plugin (see the codepen) Ideally, the vertical rectangle would have a bottom right starting point, and the horizontal rectangle a bottom left starting point. Both currently start at the top left. I tried flipping the paths in Illustrator before exporting the SVG and various other things, but got the same results as far as these rectangles go. Also tried a few things with tools like SVGOMG, but no joy. Many thanks in advance for any help! (and apologies if this has been covered elsewhere – I couldn't find a thread concerned with this here)
  6. Hi All! Having a helluva time trying to animate some paths in a defs tag to reveal other svg paths. Basic setup is, have a svg path, and then have some strokes that will reveal it when animated. It essentially looks like this ( abstracted ): <!-- In HTML --> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 516.8245 197.65855"> <defs> <clipPath id="mask1"> <path d="....." fill="none" stroke="#000000" stroke-linejoin="round" stroke-width="13"/> </clipPath> <clipPath id="mask2"> <path d="....." fill="none" stroke="#000000" stroke-linejoin="round" stroke-width="12"/> </clipPath> </defs> <path clip-path="url(#mask1)" d="....."/> <path clip-path="url(#mask2)" d="....."/> </svg> <!-- This is in my JS but basically... --> <script> // DOM references const $mask1 = $('#mask1'), $mask2 = $('#mask2'); // Animation const tl = new TimelineMax( { paused:true, smoothChildTiming:true } ); tl.fromTo( $mask1, 1, { drawSVG:'0%' }, { drawSVG:'100%' }); tl.fromTo( $mask2, 1, { drawSVG:'0%' }, { drawSVG:'100%' }, '-=0.5'); // Execute tl.play(); </script> When I remove the clipPath and defs, my mask paths do animate properly using drawSVG, ( doesnt mask anything of course, but animation works well ). As soon my 'masks' are wrapped in def / clipPath, there is no animation. The mask works, however, it is just blank. I read the pinned SVG Gotchas post like 10 times but couldn't find the answer. I found answers that work with images like this post here, but not for svg's revealing paths within the same svg. I found an example attempting to do exactly what i want here, but it did not work... Played with this one especially at length to no avail. I also read that article referenced from the previous article on css-tricks to no avail to my problem. Even when using the AttrPlugin. During my frustrations, I've been able to log out that lengths are being calculated, the libs / plugins are loaded properly and exist, but just can't for the life of me get it to work. Any help here would be greatly appreciated. Thank you in advance! Always get the best advice here!
  7. Hello Guys, Seems impossible but i don't want to populate my html file with a lot of svg elements :/ I am referencing my svg files using this code so i won't see a lot in my .html file. <img src="mySVG.svg" id="mySVG" /> Would it be possible to animate the objects inside that svg file? Regards, Carlos
  8. Hi apologies, just starting out with GSAP, have been in love with svg for some time now and recently came across your product as I was looking to animate SVG's in the Pen I am looking to animate the red line then once it finishes I want the fill to animate from opacity 0 to 1. my brain has become cuffudled, its probably something stupid I'm doing but I have tried using stagger and several other approaches, but alas to no avail. This is to be part of a company logo and will incorporate 5 slices which I am looking to rotate at the same time as the segments (slices) build. Just in case you want to advise on that part. Many thanks in advance
  9. I'm trying to think of a way this can be done with GSAP: I'm currently porting this site: http://ifate.com to HTML5/JS One of the Flash effects that's used throughout the site is the "gleam" or "phong" that you see rotating around the curved borders of content areas. You can see these 'gleams' moving around the main content area in the top left of the homepage. This used to be done pretty easily in Flash with masking, and rotating a gradient object behind the border mask. I've tried doing the same thing with CSS Masking and the result is very processor intensive, super janky and doesn't look great. So now I'm trying to approximate the same effect using DrawSVG which seems to be much faster/smoother. The problem is that I don't think I can achieve the necessary gradient effect using SVG gradients animated with DrawSVG. Here's my lame attempt to do it with multiple overlapping SVG paths.... Not great. The staggered colors are much too visible for me. https://codepen.io/Bangkokian/pen/QEZGkj Is there any way to apply a real gradient to a tweened SVG? The second issue that I noticed immediately, is that when you use DrawSVG on a circle or closed shape, there's a little jumpy weirdness around the point of origin. (In this case, at the top right of the box in the Codepen above). Is there any way to smooth out the transition from 100% around to 0% to 'rotate' the visible part of an SVG path around closed shapes? I tried animating the SVG from 0% 5% to 100% 105%, but that doesn't seem to work. Is there an approach to minimize this jump?
  10. Starting by setting up a dashed line animation on a rectangle behind a mask. Then trying to use drawSVG to draw in the mask and make it look like the dashed lines are drawing in and continuing to animate. I don't see a draw in of the mask, just looks like rectangle being masked is peeking out from under the mask on the edges and then suddenly appearing. I'm screwing something up here. Been fighting this simple task all afternoon.
  11. I'm using Blake's awesome gradient colors code used to create this older codepen. http://codepen.io/swampthang/pen/wWPRzW I need to make it look like the SVG draws in while the lines animate and then, after a period of time, draw out. I was able to create something that approximates this here: http://codepen.io/swampthang/pen/jAQkqv Problem is, the client wants the lines to be animating as they draw in. So I thought, hmm, if I can create a mask for each path and assign it to each of the paths in the SVG, I could use a staggerFromTo to draw out the mask to reveal the animating gradients in the masked paths and then draw them back in to hide them again. I'm attempting to dynamically add mask paths to an SVG to cover up the initial image but am unable to get this to work. Anyone know what I'm missing? Do the masks have to be in the same grouping structure as the paths to which they're assigned?
  12. Hi there, I'm starting to use DrawSVG and I really can't make the drawing properly. I read the tutorials and watched the videos a few times and all that I need is to make the drawing properly. Firstly, I don't want the text coming up first, I want the drawing happening along the duration of the tween and revealing the text. Please let me know what's is wrong with my pen. It's an excellent plugin and we have the business club here at work, but I'm testing all the plugins before we place into our production. Any help it will be great. Kind regards, Fernando Fas
  13. I'm wondering if anyone has managed to animate multiple SVG stroke colors - on the same stroke, at the same time. What I'm supposed to try and emulate is something like this After Effects plugin... https://videohive.net/item/animated-stroke-font/11905683?s_rank=3 After reading this: https://jakearchibald.com/2013/animated-line-drawing-svg/ And looking at the first example here http://greensock.com/docs/#/HTML5/GSAP/Plugins/DrawSVGPlugin/ It seems like there should be a way of applying an array of colors to a stroke in opposite stroke-dasharray/stroke-dashoffset settings - like "80% 20%" in one and "20% 80%" in another. If it's not possible to apply more than 1 color to different offsets of a single stroke, I guess it would require making as many duplicates of the strokes as there are colors in the array and then applying those opposing stroke color draws. Anyone ever manage to do this kind of thing?
  14. I'm having to work with huge collections of simple line-art SVGs and set up an app that will find all the various elements of the SVG (line, path, rect, etc), add drawSVG to them and export out to video. There's an entire folder where the artist decided to use paths with no stroke-width but, instead, used fills between adjacent paths. Forms little 4px channels where there should be 4px stroke-width on a single line. But, in most of the other folders in the same collection, the artist used paths with stroke-widths as you would expect. Referencing the Codepen, the first 2 SVGs that appear have lines/paths with strokes and the next 2 use no-stroke lines/paths with fill in-between as mentioned. You can see that the last 2 are like, "hey, there are no lines to draw here, move along!" The other trick is that I have to be able to do this programmatically - won't know if one of these is being loaded. I could check for paths with no stroke-width, etc., but, man! Welcome to the world of high inconsistency. Does anyone know of a way to detect and hack one of these so that it draws in/out?
  15. Hi guys I've set up this animation using SVG. I want to have the infinity symbol always 50% filled and the animation to loop forever: http://codepen.io/anon/pen/AXoZpY It's the last (3rd) step of the animation I'm having trouble with. When the start of the line hits 100% the other end should be on... 150%? Back on 50%? Neither of those work. Many thanks for all your help!
  16. 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
  17. 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.
  18. 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%"});
  19. 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
  20. 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!
  21. 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.
  22. 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!
  23. 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
  24. I am trying to get a curved arrow to grow along a path, but having difficulty making it work correctly. Does anyone have any suggestions on how to make this work? MorphSVG doesn't work as desired, as I need to have it look like it the arrow head is leading the growth, rather than just transforming into another shape. Right now my codepen uses a mask to gradually show the line and I am moving the arrow head along a path using "pathDataToBezier". Which works okay, but it doesn't synchronize with the mask animation... despite my efforts to change timing and positioning of the mask, there must be a better way!
  25. 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.