Search the Community
Showing results for tags 'drawsvg'.
Found 163 results
-
I am working on this animation, it looks great in firefox, however it does not work properly in chrome. Am I missing something to make it work properly?
-
Ran into an interesting bug the other week. I was using DrawSVG to make an element follow an SVG path (technically a polyline), and Morph SVG's pathDataToBezier feature to grab and convert the polyline to path data. I found that if I named my polyline with a specific naming convention, MorphSVG broke. The ID name I used was path_1_1_1 and for some reason the specific sequence of a repeated underscore and a number broke the plugin. The console log reports "ERROR: malformed path data" but the path is fine; it's the _#_#_# name that breaks things. Please see attached Codepen for a demo. Changing my ID name fixed everything but it took a few hours of QA (and baffled coworkers) to resolve. Since I didn't see any online reports of this issue, I figured I'd post here to bring attention to it.
-
I'm trying to change the origin point of my staggering elements. Both are a path which visualy start drawing at the top of the line then goes down. Is there any way to tell GSAP to start at the bottom of the path then up. I tried with transform orignins without success. Thanks in advance!
-
Hi, I try to control two objects by hover: http://codepen.io/mikeK/pen/ZBqPdB But I can not find a way to "block" the non-active "line". Plus, if hover change is too fast, the animation of SVGs will be disturbed. Best regards from Hamburg Manfred
-
Hi everyone, I'm hoping you can help me. I'm putting together an animation of a play button. Everything works fine on mouseenter and mouseleave, but my problem is, the SVG is not rendered on page load. The circle, that is. What I tried: When I removed `.fromTo($circle, .3, {opacity: .5, drawSVG: '100% 100%'}, {opacity: 1, drawSVG: 'true', ease: Expo.EaseOut})` from my timeline, the bug disappeared. For some reason, the drawSVG of 100% 100% seems to be applied to the svg even though the timeline is paused? Timeline.progress has not worked, but clearProps: drawSVG did fix it (although obviously I can't clear the drawSVG on init). Any help would be hugely appreciated. Thanks! PS. Sorry a codepen isn't included. I don't have a PRO account so I couldnt upload GSAP to it. LMK if you'd still like me to create it if it makes it easier for you to debug. $playButton.each(function (index, elem) { $this = $(this); var $circle = $this.find('#play-icon__circle'); var $caret = $this.find('#play-icon__caret'); TweenMax.set($caret, {transformOrigin:"50% 50%", scale: 1}); TweenMax.set($circle, {opacity: 1, rotation: "-90", transformOrigin:"50% 50%"}); var playButtonTimeline = new TimelineMax({paused: true}); playButtonTimeline .fromTo($circle, .3, {drawSVG: 'true', opacity: 1}, {opacity: .5, drawSVG: '100% 100%', ease: Expo.EaseOut}) .set($circle, {rotationX: -180}) .fromTo($circle, .3, {opacity: .5, drawSVG: '100% 100%'}, {opacity: 1, drawSVG: 'true', ease: Expo.EaseOut}) .to($caret, .2, {scale: .7, ease: Expo.EaseOut}, '-=.4'); $this .mouseenter(function () { if(playButtonTimeline.isActive()){ e.preventDefault(); e.stopImmediatePropagation(); return false; } playButtonTimeline.play(0); }) .mouseleave(function () { if(playButtonTimeline.isActive()){ e.preventDefault(); e.stopImmediatePropagation(); return false; } playButtonTimeline.reverse(0); }); }); -
I'm playing around with a whiteboard drawing idea where a hand with a pen draws in the SVG. (i know it's not really a new idea - just playing around with it) I've got it working but when the hand jumps to start drawing in a new line, it's immediate. Wondered what the best way to tween the hand to the first coordinate of a bezier curve would be. Is there some built-in GSAP magic or should I create a bezier from the current point of the hand to the first point of the next line? Any ideas?
-
Hey guys! I'm trying to draw out a rather dense set of SVGs. Ideally I'd like to draw out EVERYTHING, including the boxes on top, and the text (if that's possible?). But either way I'm having weird issues with the timing. I'm guessing it's related to how I am calling the "shapes" variable, like maybe it's running through a LOT of shapes, but only really drawing the lines? Any suggestions would be helpful!
-
This is not as much a "having a problem with.." issue as it is a best practice question. Might even be an SVG gotcha. The codepen shows attaching a drawing tool (like a pencil or whatever) to a drawSVG line drawing by using MorphSVGPlugin.pathDataToBezier and following drawSVG. Got it working pretty quickly but when I started testing a few SVGs, I ran into compound paths - where there were multiple M's in a single path creating separate visual lines. When drawSVG runs by itself (with no visual pen image following along) it's not noticeable that compound move-to paths are drawing multiple lines in at the same time. But, when you're trying to make it look like a pen is drawing a line at a time it quickly falls apart visually. So, I wrote a rather ugly function to check for and break apart compound paths and then replace them all. function breakApartPaths(paths, svg) { var sepPaths = []; for ( let path of paths ) { var pdata = path.getAttribute('d'); pdata = pdata.trim(); var subArr = pdata.split('M'); for ( let M of subArr ) { if(M != "") { var newPath = document.createElementNS("http://www.w3.org/2000/svg", 'path'); for ( var a = 0; a < path.attributes.length; a++ ) { var N = path.attributes[a].name; var V = path.attributes[a].value; if(N != 'd') { newPath.setAttributeNS('',N,V); } } newPath.setAttributeNS('','d',`M${M}`); sepPaths.push(newPath); } } } return sepPaths; } I get the sepPaths array, and then remove all the paths, replacing them with the new paths like this... var paths = document.querySelectorAll(`${svgID} path`); var newPaths = breakApartPaths(paths,$(svgID)[0]); for( path of paths ) { $(svgID)[0].removeChild(path); } for( path of newPaths ) { $(svgID)[0].appendChild(path); } It works but feels a little dangerous. Anyone know a little safer, more DRY way to do this?
-
Hi I've started using the drawSVG plugin and I have a problem with my animation, namely the path itself is being broken up into individual sections. I cannot seem to get to the root of the problem. I've copied the code into this codepen http://codepen.io/pauljohnknight/pen/WGkbjB to illustrate what is happening. I've included two sets of SVG, the first is the code for the original SVG and the second is the problematic one with the animation on. My initial thoughts are I need to change the something about the source SVG code, but I can't seem to work out what aspect of it may be incorrect. Thanks in advance for any help. Paul.
-
Good evening, We having some problem with Drawsvg Plugin. I try to explain what is our problem: In this case, I have a Timeline, with the three states of some button ( the labels "over", "out" and "cli" severaly). In the third state ( the last), it launch the event "click" to execute the code in the "cli" Label. But, as we could see in the developer inspector, the property stroke-dasharray has changed when the DrawSVG is doing when we don´t change this element (polyline class="st1") in anytime. In the inspector you can see this value: stroke-dasharray: 0px, 999999px; Here we put the URL of the codePen that I make like a example: http://codepen.io/stoicom/pen/rrdAJj If you should take a look, and tell me which could be the problem, or error? Thank you very much for yout support. Best Regards!! Rogelio Silván.
-
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
-
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.
-
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?
-
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 })
-
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)
-
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!
-
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
-
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
-
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?
-
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.
-
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?
-
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
-
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?
-
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?
-
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!
