Jump to content
Search Community

Search the Community

Showing results for tags 'drawsvg'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

Found 163 results

  1. 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!
  2. jorma

    drawSVG bug?

    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.
  3. Dear gsap friends, I've been experimenting with DrawSVG plugin. It seems that setting vector-effect="non-scaling-stroke" to a polygon makes the DrawSVG plugin go crazy. A simple animation from 0% - 100% works without the vector-effect set. Setting the attribute makes the animation go wild Any thoughts on this?
  4. 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
  5. I hit a strange DrawSVG issue on my latest project. I was hunting every line of JS thinking I was doing something wrong, but I finally narrowed it down to the SVG stroke-linecap. If I set the stroke-linecap to 'round' or 'square', IE11 and Edge won't display the stroke as it animates. DrawSVG is animating all the values, but those two browsers display nothing. The weird thing is if I animate a new value for the strokeWidth along with the drawSVG animation, it works perfectly. Even a 1/1,000th change makes it work. Any strokeWidth value works as long as it isn't the same as the original value in the SVG. Another oddity is setting the stroke-linecap to 'butt', 'inherit' or leaving it out causes no problems either. All is fine in Chrome and FF, but the Microsoft browsers are behaving like fussy children.
  6. 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
  7. 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!
  8. 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?
  9. 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!
  10. 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.
  11. 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?
  12. 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
  13. 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!
  14. 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
  15. 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!
  16. 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
  17. 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
  18. Stagnax

    Draw svg

    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
  19. 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
  20. 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!
  21. 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
  22. 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!
  23. 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
  24. 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.
  25. 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
×
×
  • Create New...