Search the Community
Showing results for tags 'drawsvg'.
-
Hi, I wanted to create similar animation like on this website http://thieb.co/ when you must click and hold to enter. With this svg file. But with drawSVG plugin i can't animate fill. I searched just any solution but it has not helped me. Thank you for answer.
-
Hi I really hope someone can help, I've got a pie chart animating perfectly in all browsers EXCEPT IE Edge. It even works in IE10 / 11 fine. Just Edge I'm having issues with. It doesn't render anything. If I remove the tween animation then it renders fine, so the issue can't be with the mask - it's got to be with the tween. I've researched the forums and seen other code pens (by other devs) using the same concept that don't work in Edge edge either, here's one example: https://codepen.io/PointC/full/ZWEqdK again it works fine in all other browsers, just Edge! Any help will be much appreciated. I'm scratching my head here. Thanks Louisa
-
Hi, I have a rotator and I want to draw a dashed stroke between icons. How can I keep the dashed stroke with drawSVG plugin? And, how can I use variables instead of values to get stroke only between icons? I need something like this: TweenMax.set(circle, {drawSVG:"variable1 variable2"}); How can I use modifier plugin for this? Thanks!
-
Hi everyone, For my school's graduation showcase website, I have a DrawSVG element in which when completed, will perform an animation on other elements. You can view the code in main.js file here. The problem is on https://fmsstories.com, when loaded, there will be: 1. A slight blink of the original DrawSVG element 2. The elements that were supposed to be animated to view after DrawSVG element is completed drawing comes up first, and THEN disappearing and then appearing again after the animation is complete. This is especially apparent in mobile (i0S 11, Chrome, Safari). How do I fix the 2 problems? I have always thought it might be caching problem, but I have already tried to fix it using caching meta tags but the problem still persists. Is it a possibility on how I write the JS? (sorry, I'm still a newbie in JS!). Thanks, Alfian
-
Small issue with my circle here, it works the first time on hover (in & out) and then changes direction. Any ideas why it breaks after the first hover? It should look like this. Many thanks, Smallio
-
Hello, I'm trying to use DrawSVG for the external border . As you can see I have 4 blocks that appear one by one . What I'd like to do is : As soon as the first block appears a border should start and complete its path as the last block appears I hope I'm clear what I want
-
Hi everyone, I am trying to perform an animation with a delay on every subsequent SVG 'path'. In this Codepen link you can see that every letter of the SVG logo is separated by a 'path'. How do I perform a DrawSVG animation delay for each path, similar to how it looks like in here. This was animated using Anime.js, but sadly it couldn't control the animation using events as good as DrawSVG, but the delay of each letter was what I'm looking for. Is there a quick way to do this? Or would I have to manually delay every path by giving it IDs? Thanks
-
I’ve seen a few questions recently about getting better morphs so I thought I’d share a little tip that may help my fellow AI users. Whether you’ve created your own vectors or downloaded some stock artwork, the scissors tool is a quick way to get better morphs. You can also completely control the start point of your DrawSVG animations. I have an example using a couple heart shapes. This is just an icon from a collection I downloaded. The designer has the first point in the upper right curve of the heart. That’s probably not the best start point for any type of animations, so that needs to be fixed. Step 1 – Cut that path. Grab your scissors tool (it’s in the fly-out menu under the eraser). Line that up with the anchor point at the bottom point of the heart and cut. You’ll now have two anchors at that location. Step 2 – Select the points at the cut location and then join them together. It’s under the Object --> Path –-> Join (or Ctrl+J shortcut.) That is now the new start point of the path. You can now export the SVG. Here’s the difference with DrawSVG. You can see on heart one (as originally designed) the path starts drawing from an unnatural position. In heart two I’ve made that cut at the bottom and the animation feels better and animates the way a heart would naturally be drawn. Here’s the difference with MorphSVG Again, the first heart and star are left as the original designer created them. You can see the morph looks pretty good, but it has a bit of a twist to it. I used the scissors on both heart two and star two with a cut right at the center of the bottom. This morph looks much more natural. The bottom point of the heart splits into the bottom two points of the star and the twisting motion is now gone. There's your hot tip for Valentine's Day. Happy tweening and morphing everyone.
-
Hi guys, This is more of a pre-sale question than a problem, to be honest. But I do need some help with the Javascript/jQuery. I'm working on an SVG animation using Anime.js, but I feel that there are limitations to the animation that's possible for SVG. I was trying to replicate https://thieb.co homepage animation. So basically on mouse down, the animation starts playing, and mouse up, the animation reverses to the empty state. Due to Anime.js's limitations, I was wondering if DrawSVG is able to replicate the aforementioned effect? With a 'completed' callback to prevent the animation from reversing once completed, etc. Here's what I got so far: http://alfianridwan-fms-stories.netlify.com/ with Anime.js Is it possible to replicate this with DrawSVG? (before I purchase the membership and find out that I can't replicate it!) Thanks, Alfian
-
Hey guys! I've been using this library for a couple of days now and it's very exciting! One problem I have run into, however, is this: I've recreated the Icon of our company in a SVG-File using Inkscape. Very ugly for now, but I wanted to use it as a proof-of-concept. However, DrawSVG didn't work out of the box because I had to change portions of the SVG-File from something like: <svg> <circle style="stroke-width:0.04409721;stroke:#58575a"/> </svg> to: <svg> <circle stroke-width="0.04409721" stroke="#58575a"/> </svg> It worked relatively well from thereon out. I thus wanted to ask, before I need to write a problem that converts these SVGs automatically, whether you know of a way to force Inkscape to adjust the way it creates styles out-of-the-box, or to tell the DrawSVGPlugin to look a little harder for the styles in the first place. Disclaimer: I realize this may be a question better fit over at the Inkscape Forum, but I thought I'd give it a shot here, since the connection to the GSAP library is already established. Thank you in advance!
-
Hi All, I'm hoping to get some help with some animations I've been working on. It works well all browsers, except FireFox. In the console I can see an error `TypeError: i is undefined`. On my local it appears that this error is originating on line 97 of DrawSVG plugin. I was looking at the plugin code and noticed that there is a Firefox bug for when an element isn't visible - I wonder if that's what's happening here. I'm trying to find out what exactly is happening so I can fix it. The idea of this project is to funnel users into their appropriate usage category. Each question displays an animation and asks a question. The first animation runs, but when I try to click 'Get Started' the JS is blocked, so I can't click to the next question. I've attached the codepen for reference. If anyone could shed some light on this, I would so appreciate it. Thanks!
-
Hello guys, I'm trying to do some animation using draw SVG plugin. What I want to achieve seems really simple but I cannot do it. I've searched on the internet and the GSAP forum to see if someone faced a situation similar to mine but all in vain. Hence I'm posting the issue here. If you take a look at my codepen you can see the logo animating. What I need is the bottom two lines of the logo to "Un draw" themselves from the center upto a certain point. I'm attaching an image to show you how the final state of the bottom two lines will be. If anyone can help me figure out how to do this with drawSVG plugin or whether what I'm trying to achieve is possible at all that would be great. Thanks again.
-
So here is my intro animation in CSS. I'm trying to re-do this in Greenock so I can chain it to the rest of my site but it's not animating again. Pretty sure It's just something small. This time I've drawn the circles with the SVG circle properties, vs in illustrator... I thought ahh nice and easy... Wrong lol. I've tried to follow this pen & I can't really see what I'm doing wrong. Could someone point me in the right direction please? Many thanks, Smallio
-
Ello guys, Trying to do something like this with Draw SVG. I've watched the tutorial and seen that everything needs to be a stroke which is why I'm guessing that's why this isn't working? How can I convert these letters to strokes while keeping the same shape and thickness? I've tried adding strokes via css/tl.set which works but they are on the outside. I want each letter to be their own stroke if that's possible. Starting with the first letter "S" I'm trying to draw it out from top to bottom. What's the best way to achieve this kind of style? Top pen is what I'm trying to do, the bottom is my current pen I'm practicing on. Thanks, Smallio
-
Hi @GreenSock I think about something, but without affecting to your bussiness model, can i do that? I explain this below: Let's say, i creating web-sites, mobile apps, own personal websites with one-off sold, as i know one-off sold doesn't require GSAP license. If i'm create plug-ins (GitHub repo, No-License, without license no-one allowed to use app) for GSAP for myself like morphSVG, drawSVG (i sure your plug-ins great, but my budget not good to be member of Club, thanks to GSAP anyway), i not required to buy license? I can use GSAP for free, usually i'm use TweenMax, TimelineMax. Thanks for reply.
-
Hi, First of all. We love Greensock. We have used it on about 3 new client projects already and find it incredible! So great work! I'm trying to get the following animation to work however and am having some issues. This is the following animation. See screenshot. The animation should be as follows: The T appears The line from the T to the D animates the stroke with DrawSVG. The D appears The line from the D to the L animates the stroke with DrawSVG. The L appears The line from the L to the T animates the stroke with DrawSVG. This is the following code that I have: const tl = new TimelineLite({delay:0.5, repeat:-1, repeatDelay:2}); tl.from(this.letterT, 0.25, {scale:0, opacity:0, transformOrigin:'center', ease: Bounce.easeOut}) .from(this.line1Path, 5, { drawSVG: "100% 100%" }, { drawSVG: "0 100%", ease: Linear.easeNone}) .from(this.letterD, 0.25, {scale:0, opacity:0, transformOrigin:'center', ease: Bounce.easeOut}) .from(this.line2Path, 5, { drawSVG: "100% 100%" }, { drawSVG: "0 100%", ease: Linear.easeNone}) .from(this.letterL, 0.25, {scale:0, opacity:0, transformOrigin:'center', ease: Bounce.easeOut}) .from(this.line3Path, 5, { drawSVG: "100% 100%" }, { drawSVG: "0 100%", ease: Linear.easeNone}) Now if I'm correct each .from should run after each other. This is working fine with the letters but the line ones run the moment the animation starts. I've tried using the Position Parameter on those line ones to no avail. Any help with this would be greatly appreciated. Thanks
-
Hello, I'm following along with the DrawSVGPlugin tutorial on the website, but seem to be having trouble getting DrawSVG to run. I am a Club Greensock member, so I believe I've pasted in the latest version of TweenMax, which should give me access to the plugin, correct? Thank you for your help.
-
Hi there, first post on the forums. Excited to be using Greensock, it's been great so far. I'm trying to accomplish 2 drawSVG staggered animations on an SVG path using Timeline: 1) Draw the stroke 2) Draw the fill If I combine them into one Tweenmax.from() call, it works great. However, when I stagger them, the 2nd from() call where I'm passing fill is trying to redraw the stroke as well. Is it possible to let the call know to ignore the stroke in the 2nd from() call? Thanks!
-
Hi! Does anyone have any experience in animating paths (drawSvg style) with greensock in Animate CC? Does drawSvg translate in to use in Animate CC? regards,
-
Hi there, Why is the line drawn with breaks?
-
There seems to be a problem with DrawSVGPlugin for me: I can not make it work when I try with the hosted file and not within Codepen. I am ShockinglyGreen member so there is no issue with this. The problem is that I run the same code against Codepen-specific version and against the hosted version of the script. You can see the result yourself: Codepen-specific (where lines get drawn): And here is the other version with the file being self-hosted on a server: As you can see in this second case, the lines do not get drawn and the whole contour shows up instantly What do I miss here? Thank you.
-
I have been working on this project for the past few months where I use drawSVG to draw an SVG. Everything seems to work as it should in Chrome and Safari but it won't draw the lines in IE. I pulled the code from my project and put together this pen. If you run it in Chrome you will see the lines draw on the screen. If you run the pen in IE the shape just appears. I opened up the javascript console in IE and I notice it is throwing an error, SCRIPT65535: Unexpected call to method or property access. DrawSVGPlugin.min.js (13,1184). Anyone have any ideas as to what I am doing wrong?
-
I'm trying to draw the stroke, then fill the shapes. What am I missing here?
-
Hi, Is it possible to animate a filled path so it effectively draws like the drawSVG plugin does for stroked paths? Will it be a case of having to learn how to animate SVG coordinates (if this is even possible?). I have seen a (somewhat complicated) method on StackOverflow on how to convert a filled path into a stroked path. Any tips / suggestions on further reading on how to create a 'draw' effect on filled paths would be wonderful (if it is possible to do). Thanks, Emily.
-
Hi, all. When I try to import the DrawSVGPlugin to a NuxtJS project, I get the following error: TypeError: Cannot read property 'defaultView' of undefined at /Users/mdf/Sites/nuxtproject/node_modules/gsap/DrawSVGPlugin.js:19:27 at Object.<anonymous> (/Users/mdf/Sites/nuxtproject/node_modules/gsap/DrawSVGPlugin.js:202:54) at Module._compile (module.js:569:30) at Object.Module._extensions..js (module.js:580:10) at Module.load (module.js:503:32) at tryModuleLoad (module.js:466:12) at Function.Module._load (module.js:458:3) at Module.require (module.js:513:17) at require (internal/module.js:11:18) at r (/Users/mdf/Sites/nuxtproject/node_modules/vue-server-renderer/build.js:5812:16) at Object.<anonymous> (webpack:/external "gsap/DrawSVGPlugin":1:0) at __webpack_require__ (webpack:/webpack/bootstrap 8aad739dc52752aa5015:25:0) at Object.70 (2.server-bundle.js:123:77) at __webpack_require__ (webpack:/webpack/bootstrap 8aad739dc52752aa5015:25:0) at Object.61 (pages/index.vue:7:0) at __webpack_require__ (webpack:/webpack/bootstrap 8aad739dc52752aa5015:25:0) The error is related to the call to `_doc.defaultView` and only happens when the page is server rendered, not when it is client rendered. I'm not sure if there is an issue with the vue-server-renderer package or if I'm not importing the plugin correctly. I've tried importing the plugin from the assets folder import TweenLite from 'gsap'; import '~/assets/DrawSVGPlugin'; as well as copying it into the gsap folder in node_modules import TweenLite from 'gsap'; import 'gsap/DrawSVGPlugin'; Both produce the same error. The error is also not Nuxt-specific but happens whenever Vue server-side rendering is used. I put together a bare-bones example to illustrate the problem here https://github.com/michaeldfoley/vue-ssr-drawsvgplugin-error. Any help would be appreciated.
