Search the Community
Showing results for tags 'drawsvg'.
-
Hi guys, So what I'm trying to create is an animation where: Circle element starts the animation with a radar blip effect - DONE My dashed path with mask is supposed to animate from where the circle element is positioned to the right and creates a circle - DONE After animation is complete I'd like for the animation not reverse back but have the path from where it starts follow the path and end at the animation. I guess follow the animation? Sorry lack of a better description I've included a screen grab of what I have since my codepen is not animating at all? Thanks! gsap-animation.mov
-
Wow, this title must make sense. Hopefully the Codepen helps making this clear. So i have this path that i draw with DrawSVG, and it's "removed" after the whole line is drawn. Now i want the remove-effect happening while the line is still drawing on the other end. Lowering the delay on the remove-effect is not working so i think i'm going about this the wrong way. How should i do this?
-
Hi, I have been trying to use DrawSVGPlugin on our site but it is not working. I am trying to animate a simple SVG for testing. I am not sure why DrawSVGPlugin is the only script that does not work. <svg id="demo" xmlns="http://www.w3.org/2000/svg" width="5000" height="2000" viewBox="0 0 500 200"> <title>Untitled-1</title> <rect width="500" height="200" fill="#29abe2"/> <path d="M51,88c41.25-35.3,99.44-74.35,148-57,31.92,11.41,37.73,39.34,70,53,28.68,12.14,77.52,12.7,164-49" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="4" fill-rule="evenodd"/> <path d="M302.31,164.42a86.72,86.72,0,0,1-34.09-6.58C252,151,242.37,140.67,233,130.68c-9.69-10.35-18.85-20.13-34.69-25.8-37.38-13.36-86.51,5.7-146,56.64l-2.6-3c60.69-51.94,111.15-71.24,150-57.36,16.76,6,26.68,16.58,36.27,26.82,9.07,9.69,18.44,19.7,33.84,26.22,39,16.51,93.54.1,162.06-48.79l2.32,3.26c-39.27,28-74.39,45.68-104.39,52.51A123.49,123.49,0,0,1,302.31,164.42Z" fill="#f2f2f2"/> </svg> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> <script src="{OUR_SITE}/js/DrawSVGPlugin.js"></script> const tl = new TimelineMax(); tl.from("path", 2, { drawSVG: 0, yoyo: true, repeat: -1, repeatDelay: 1, ease: Power2.easeInOut }); Thanks!
-
I am trying to recreate the instagram loading for the stories with gsap. Something similar to this https://codepen.io/inertia/pen/MvGOeJ?editors=1100 (but better ) I have 2 circles with the stroke, but I am having problems to draw a dashed line with drawSVG. what I am doing wrong? do you have any suggestions? thanks
-
Hi All, & Thanks in advance for any help. I have a selection of arrow heads I want to move along separate paths... I've followed some existing Topics here to get me most of the way, but am struggling with inconsistency between the different shapes. Some of the arrow heads are drawing in no problem (all the straight ones, that makes sense), but others do while similar ones don't - see #i-line_5. That works well, whereas #i-line_3 doesn't. It seems to be partly to do with the arrow head origin-position, and partly autorotate, but cannot get a fix whilst I change these. I also suspected the origin of each arrow-head may need changing (eg, which point comes first in the Path parameter), but have struggled to update them / make any change to the outcome. Thanks Jake.
-
Hey all, after adding SVG support for elCanvas I wanted to also add the ability to draw an svg outline In the code pen I attached( which i used the public examples version of drawsvg on) I am attempting this 1) Draw a svg on the document with the same paths as the one in the canvas 2) Animate the svg outlines with drawSVG 3) On update match strokeDasharray to setLineDash and lineDashOffset so the canvas shape gets updated As you see it works! However every time I would need to draw an svg into the canvas I would first need to put one on the document, I wanted to ask is there a way around this? Is there a way to get the lineDash/DashArray data without having to draw an svg visually? When I put some animations with this effect into our game the devs might get upset I'm drawing all these elements just for reference I guess this is mainly a question to you awesome devs that made the lib in the first place @GreenSock but also to anyone else who might know. I had another consideration where I could make modifications to the plugin itself, but I really didn't wanna touch that, trying to do this without needing to modify Gsap code Thanks in advance!
-
Hi Guys, I'm trying to animate this hamburger menu. The hover works but only once and the click doesn't work so it's not a pretty picture Basically on click I need to draw #x_right and #x_left to 100% to form the X to close the menu and draw all the rest of the paths to 0% What am I doing wrong? Thank you!
-
I have an SVG path styled to look like a dotted line. I want the path to look like it's drawing in. I created a mask and tried to animate the mask path but it refuses to draw. In the Codepen example, I found that the mask animation worked if I modified the SVG and gave the path a few bends. Does the straight line confuse DrawSVG because it doesn't know what the start/end points are? How can I get the straight line's mask to animate? edit: Fix appears to be adding maskUnits="userSpaceOnUse" to the mask definition in the SVG. Stack Overflow link
-
I am trying to figure out a method to create the illusion that a tiny segment of a line is traveling along the path it's on. In my codepen, I thought the right place to start was to draw the path on, then draw it off as shown first. What I imagine is there is a way to do this in rapid succession so as it is drawing each new part of the path, it is also undoing the portion behind it (desired result shown next to animation). Thanks for your help!
-
So i'm having trouble getting an SVG to draw when the index.html is first reached. The problem only seems to be on chrome for mac, the animation works fine on any other browser and loads on page load as intended. The SVG will also start to draw as soon as the page is refreshed, just not on the first load automatically. I am using barbajs for smooth internal page navigation and have included all my tweens in the relevant page 'onEnter' function, i guess this is why its working on the other browsers. var Indexpage = Barba.BaseView.extend({ namespace: 'indexpage', onEnter: function() { var drawlogo = new TimelineMax(); // TweenMax.from("main.home",8,{autoAlpha:0}); TweenMax.to("main.home", 1, {autoAlpha:1, ease: Expo.easeOut, force3D:true}); TweenMax.from(".logotop",2,{autoAlpha:0}); TweenMax.from(".frontlogo1,.frontlogo2",5,{drawSVG:0}); TweenMax.to("main.home",1,{autoAlpha:0,delay:5}); TweenMax.to(".logotop",1,{autoAlpha:0,delay:5}); TweenMax.to(".frontlogo1,.frontlogo2",1,{autoAlpha:0,delay:5}); TweenMax.from(".logoblue",2,{autoAlpha:1,x:-220,ease: Expo.easeOut,delay:4.8}); TweenMax.from(".burger",1,{autoAlpha:1,x:100,ease: Expo.easeOut,delay:4.6}); TweenMax.to("#intro",3,{autoAlpha:1,ease:Expo.easeOut,delay:5.8}); TweenMax.to("#sectionone",3,{autoAlpha:1,ease:Expo.easeOut,delay:6}); TweenMax.to("#sectiontwo",3,{autoAlpha:1,ease:Expo.easeOut,delay:6.2}); TweenMax.to("#sectionthree",3,{autoAlpha:1,ease:Expo.easeOut,delay:6.4}); TweenMax.to("#contactus",3,{autoAlpha:1,ease:Expo.easeOut,delay:6.6}); console.log("enter"); }, onEnterCompleted: function() { // TweenMax.to("main.home", 1, {autoAlpha:1, ease: Expo.easeOut, force3D:true}); // TweenMax.to(".title-container *", 1, {autoAlpha:1, ease: Expo.easeOut, force3D:true}, 0.1); }, onLeave: function() { }, onLeaveCompleted: function() { // The Container has just been removed from the DOM. } }); // Don't forget to init the view! Indexpage.init(); Ive tried adding the tweens to barbas default fade in function but as expected, doesn't effect anything. Maybe i'm missing something simple?
-
Hello, I found out about Greensock some days ago and immediately started using it. I think is really cool but I have some issues with some specific tasks. I am trying to: - Draw an svg line in portions as you scroll. (using also scrollmagic here) - Have a circle that will follow the svg line as it draws. (If I manage to do this, then I want multiple circles in a group follow the line as it's being drawn). From my codepen you will see not a perfect way to draw the line which I think I can make it better but my main issue is with the circle follow the svg. As a first step, I am just trying to follow the SVG (not the line as it's being drawn) but using the MorphSVGPlugin.pathDataToBezier to get the path of the svg, the return path does not really follow the svg. I think maybe my SVG needs more points so that the bezier path is more accurate but I am not sure if this is the case here. Also I would like to know for ideas if I am thinking this solution completely wrong and there is an easier way to accomplish what I need. Thank you,
-
Hello everyone! I had hoped to unveil this animation to you all when it was completed and running smoothly. Thanks to the the shear volume of detailed answers on this forum and the amazing community of contributors behind it, someone who has no experience with JS , HTML, or even CSS can learn without even asking a question. You should all know how amazing your contributions to this forum are, and I hope this conveys the genuine appreciation from this lurker/beginner. I think it was Craig who said that he started learning JS by copying and pasting, well thats exactly how I learned to make this animation. It's a bit of a Frankenstein's monster, but I understand what I built. Unfortunately, I will have to interrupt my gushing to also add a question. Although my SVG animates exactly how I want, the rendering is obviously jittery. From what I can tell this is in large part due to the strain put on the browser attempting to render: ALL these filters and alpha changes 48 objects simultaneously What can I do to optimize the rendering efficiency of my animation? As far as I've read from this forum and outside sources I have a few options: Slim down and clean up my script. (However, this doesn't fix the rendering problems) Combine GSAP with another js rendering library like three.js or pixi.js (This would fix the rendering strain on the browser. But where to even begin? Also from what I gather rendering SVG paths in WebGL is more challenging, as the WebGL API is primarily built for rendering many triangles.) I understand if what I'm asking might be outside the scope of GSAP. Still a thank you is necessary for getting me to this point.
-
Hi, as the title says... If I read correctly drawSVG draws a stroke of a path (or other shape). In this case I have a somewhat simple path. I want to have it drawn, but can't seem to figure out what i'm doing wrong here. The result are not what I expected to say the least The goal is to have a signature drawn with svg paths (as if it was written realtime) But when clicking on a button I see a lot of points, within the paths, being hustled around and then stop. The first SVG was drawn with the pen tool in Illustrator. The second SVG was drawn in Figma and exported. I wonder if the setup of the SVG is perhaps incorrect, because I don't think I'm doing anything significant coding wise.
-
Hi guys, I'm trying to use the DrawSVG plugin for the first time, and I can't get it to work (ie nothing is animating, my SVG just loads in full straight away and does not animate at all). Clearly there is something I am missing, but I cannot for the life of me work out what it is. Before I throw my Mac out of the window I thought it would be best to ask for help Thanks in advance, Keith
-
Hi there, I got a weird issue. Somehow, my SVG path is appearing outside the SVG scope. Could be my messy javascript (if anyone has tips on how to do it cleaner, please). The SVG in the yellow box should be right in the center. Anyone know how to fix this? Thanks!
-
The initial state of the animation the very first time the page is initialised seems incorrect. The line in my CodePen is drawn from the start state of the last tween, not the first. This only happens the first time the drawing is animated. To reproduce this behavior just change the log text and watch the animation.
-
Hello everyone! I'm trying to make a responsive website utilising svg animations, however I noticed, that when using drawSVG tweens, the length of a path gets only calculated once, during the initialization of a tween. My question: Is there a way to trigger path length recalculations during the drawSVG tween without stoping/restarting it. Attached to this thread is a codepen illustrating the problem. Top path is what it's supposed to look like (yellow path hitting the red dot on extremes), and lower path shows what I'm getting. Thank you in advance
-
Hi guys, new to Greensock so trying to learn as quickly as possible I cannot find anywhere how to load the Draw SVG plugin via a CDN (as it looks like it is not part of the 'tweenmax.js' file which IS shown how to load via CDN in the docs. Can anyone help please? Thanks in advance, Keith
-
Hello. Thanks as always for the awesome product! This problem is driving me nuts, and i know this includes Scrollmagic, but can you just tell me WHY this doesn't work? I'm sure you've seen it before and maybe have a simple answer. WHAT IS SUPPOSED TO HAPPEN My svg animation is supposed to play on init, then when i scroll up, the animation reverses, and when I scroll back down, it plays again. Here's a pen of just the animation and some play and reverse buttons that is working as it should without scrollmagic. THE PROBLEM Once I define the reverse tween for scrollmagic (even using pause:true) it shows the svg statically on init, it won't play. Here's my pen that just won't work: Can you please show me how I can play this animation and still use scrollmagic? Any insight you have will be greatly appreciated!
-
Hi, In the codepen I make multiple calls to rotation of the cog, but it only actually rotates once. I see the multiple rotations in the console. console.log("rotation ******") tl.to("#cog", 3, {rotation:360, transformOrigin:"50% 50%"}) (I tried variants such as adding "+=0" at the end of the call) I successfully got movements of dots in and out of the rectangle. But I had to slip in fictitious calls between two calls to the animLine function tl2.to("#toto", 1, { x: 1000 }); Does the drawSvg plugin have specific requirements as to timeline calls? Or is my understanding of timelines lacking?
-
so i am trying to put together an animation wherein the writing is being drawn out. I have all the SVG done, with each letter being composed of multiple strokes, but I immediately have gotten stuck trying to set properties with GSAP and the drawSVG plugin. If anybody might be able to help me it would be much appreciated, thanks!
-
Hi! I am taking Diaco's SVG path range slider as a reference and implementing it for some other types of SVG paths like curve and smooth curve. In Diaco's case, he has given the value 'bezier' and the type as 'quadratic' for the SVG path type quadratic bezier curve. What value should be given for a curve and for a smooth curve?
-
I am using a draggable knob along an svg path. The path is a quadratic bezier curve which has the y coordinates going up and then down. How should I progress the draggable instance so that I am able to fill the path while dragging the knob on the path? To simply put it, I want the path to be filled while dragging the knob and the portion of the path to be filled should be only upto the knob. Also the mouse pointer should be in sync with the draggable knob. Any suggestions or leads are appreciated.
-
If someone could help...when I load my page, my drawSVG works fine, but I cannot get a gradient to fill in the country when the drawSVG completes. I'm sure it's something small I'm missing, could use a second perspective. Thanks
-
Hi everyone, this is more of an ask-for-help and guidance rather than actually coding help, but I came across a very nice website page transition, which include its website logo transitioning between 2 pages. I was wondering if its possible to apply with GSAP? Here's the animation I am referring to: https://cl.ly/rXmT It would be great if someone could forward me to somewhere where I can learn to replicate the aforementioned effect. Thanks!
