Jump to content

Search the Community

Showing results for tags 'svg'.

  • 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. I can't find anything on how to create the SVG file for drawSVG strokes. I have it in Illustrator, I know how to output SVGs, but the file code is different from what your tutorial shows. What is the way to setup your SVG file from Illustrator?
  2. 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
  3. I need help trying to scale and center to a certain element within an svg. I am using jquery.ui.layout, tweenmax and draggable. I use getBBox() to get the group element's location in the svg file, and then use the values here: TweenLite.to(svgness, 1.5, scaleX: 3, scaleY: 3, svgOrigin: x + " " + y }); It sort of works, but then the element is not really centered in the window.
  4. I'm trying to animate all this element on the svg with a bit of sense, so the feet look like the walking:-) I'd like to achieve : - path { they should animate with delay, so I could have the feeling that they are walking. } - line {it's a stroke which should animate from 0 to 100%.} - polygon (are two arrow that should fade.) I hope it's something that you guys could quickly fix.
  5. 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
  6. Hello, I've created a set of 9 animations triggered by pressing keyboard keys [QWE][ASD][ZXC]. My question is about the animation triggered when pressing "C" key (i.e. the 14 small colorful rectangles arriving on the canvas). These elements are SVG <rect> grouped under a <g id="confettis">. I defined a function playConfettis() where I randomly move each <rect>. Here is a simplified version of this function : function playConfettis() { tl.set(theConfettis, { rotation:0, x:0, y:0 }) .to(theConfetti1, .3, { rotation:rand(-360,360), x:rand(-500,500), y:rand(0,-500) }) .to(theConfetti2, .3, { rotation:rand(-360,360), x:rand(-500,500), y:rand(0,-500) }) ...AND SO ON FOR EACH } I guess my code is not optimized, but I couldn't figure out how to loop through all those <rect>. Thank in advance for your suggestions
  7. Hi Guys, Good Day, I'm having an issue on MS Edge where it doesn't render the animation properly without any user interaction. Sample of interaction is resizing and clicking on the image itself. https://codepen.io/denezra/full/paKero/ P.S. The animation is working properly in MS IE 11.
  8. I am trying to animate the corners of a rectangle SVG from the centerpoint of a div, one by one to eventually take the exact shape of that target div. I have invested quite some time in this already before I realized that the points of an SVG can't be positioned in an absolute way, in the same way an HTML element can, or a canvas object maybe. Is this effect doable? In the attached CodePen I am just trying to get from the center of the target to the end in one go, and was planning to add the substeps later on. As you can see, it doesn't work. The rationale was to grab the center point of the target, and put the four corners in four arrays that I can pass to the SVG (topLeft, topRight, etc.). Then animate from the center point, to those four corners. The center point seems to work well, but the other points are not responding as they should. The idea is to eventually build a dynamic system with multiple clickable links that will open up these animations, like a fold-open modal window.
  9. 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
  10. Dear All, Hello. I have encountered a problem regarding to StaggerTo . My case is like this: 1. I have a simple svg file stored in my firebase realtime Database as a node as below (i copied the whole file as text as paste it as string node): (I know I should write my case in CodePen but I don't know where I should put my svg as an external file for CodePen to read from. I apologize for that.) <svg onload="init(evt)" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" id="slider1Svg" > <script type="application/ecmascript"> <![CDATA[ function init(evt) { TweenMax.staggerTo($('.star'), 2, {scale:3.5, opacity:0, delay:0.5, ease:Elastic.easeOut, force3D:true, repeat:-1}, 0.2); } ]]> </script> <g id="stars" fill-rule="evenodd" clip-rule="evenodd" fill="#FFF"> <polygon class='star' fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="72.574,123.936 71.155,123.877 70.302,125.014 69.918,123.646 68.574,123.186 69.757,122.398 69.779,120.978 70.893,121.859 72.25,121.441 71.757,122.773 "/> <polygon class='star' fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="163.574,167.936 162.155,167.877 161.302,169.014 160.918,167.646 159.574,167.186 160.757,166.398 160.779,164.978 161.893,165.859 163.25,165.441 162.757,166.773 "/> <polygon class='star' fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="206.574,167.936 205.155,167.877 204.302,169.014 203.918,167.646 202.574,167.186 203.757,166.398 203.779,164.978 204.893,165.859 206.25,165.441 205.757,166.773 "/> <polygon class='star' fill-rule="evenodd" clip-rule="evenodd" fill="#FFFFFF" points="163.574,247.936 162.155,247.877 161.302,249.014 160.918,247.646 159.574,247.186 160.757,246.398 160.779,244.978 161.893,245.859 163.25,245.441 162.757,246.773 "/> </g> </g> </svg> You can see I am using "onload" in the opening <svg> tag. 2. Then in my javascript file, I append the node to the div like this: firebase.database().ref('svgfile').once("value", function(data){ var svg = data.val().svg; $('#container').append(svg); }) 3. My Stars Twinkle in the below browsers (all up-to-date versions and cache cleared ): Windows 10 - chrome edge MacOs - safari firefox Android - chorme opera unfortunately the stars do not twinkle in the below browsers: ipad pro chrome safari opera and I tested on my very old ipad mini with iOS version 9.35, safari, the stars also twinkle. May I ask if this is the problem caused by the OS? My goal is to match a corresponding animation code with the svg file, so I don't need to put all the animation codes into the main.js , like below: 1.svg use "code for 1.svg" 2.svg use "code for 2.svg" etc. Beside writing the animation codes in the <script> in <svg> , may I ask if there is another way I can achieve this? Thank you very much for your help. Cheers, Alex
  11. 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!
  12. 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
  13. I am trying to create a minimap for a little game. First i started creating a full map in SVG, and then animated the player icon alongside the path. But is it possible to reverse the behaviour, so that the player icon stays, and the path itself, is animating, moving and rotating anchored to the player icon? Just like the image below. Any help is highly appreciated. current code: motionPath = MorphSVGPlugin.pathDataToBezier('#motion-path', {align:'#player-dot'}); TweenLite.set('#player-dot', {xPercent:-50, yPercent:-50}); tl.to('#player-dot', 2, { bezier:{values:motionPath, type:'cubic'}, ease: Power0.easeNone });
  14. Hi everyone! I'm Jos from the The Netherlands, entrepreneur and full-stack developer (web design, illustration design, motion graphics / animation, front-end development, back-end development). I've been following Greensock / GSAP occasionally in the past 12 months, but I haven't began actively animating using GSAP until recently. So here I am! The last few weeks I've spent quite some time researching which development workflow / stack / IDE / platform best suits my needs for animating the DOM & SVG, yet unfortunately I haven't found a proper solution. Can you help me find one? What I do know is the following, I want to keep using: my Adobe Creative Cloud subscription: Photoshop for bitmap design/editing, Illustrator for vector / SVG design, After Effects for motion graphics video (or for DOM/SVG animation would that be possible, I like AE's IDE), and maybe Adobe Animate CC (yet there doesn't seem to be a way I'm aware of for animating the DOM, only HTML Canvas, feel free to correct me if I'm wrong). Bye Adobe Edge Animate, you seemed to be a promising platform to me, but alas ... CSS for DOM-styling and simple CSS Transitions (simple hover effects on hyperlinks, buttons etc.); jQuery, (primarily) as selector engine and client-side form validator; GSAP for DOM & SVG animation. GSAP absolutely rocks! Although I'm primarily developing on an iMac5k now, I used to primarily work on a 2011 model MacBook Pro + Thunderbolt Display, and GSAP is and was the only animation software environment that didn't trigger the MBP's ventilator to behave like an aeroplane taking off! :-P Coding in GSAP using TweenMax / TimelineMax suits me fine for "relatively simple" animations; I'm not a GSAP-expert yet but as I gain experience I'll be fine coding the simple stuff I guess. However... wouldn't it be nice to be able to use GSAP in a proper IDE that looks like Adobe After Effects CC / Animate CC? With a proper multilevel visual timeline, property boxes, designer tools AND code development tools all integrated in one IDE! Also, looking at current SVG animation projects "out there in the wild" (by all animators worldwide I mean, not just myself), I've noticed almost every DOM- / SVG- / web animation lacks "object / path deforming". Compared to Adobe After Effects for video motion graphics, where path deforming of a character for example can be done using AE's "puppet tools", DOM- / SVG- animation for the web has a long way to go, I reckon! Yet, (although I haven't used it yet) MorphSVGPlugin seems to be suitable to some extent for path deforming, but it's hardly doable to switch over back-and-forth between GSAP and Adobe Illustrator for every little object/path addition to the SVGs. Scene staging is very hard as well using just GSAP coding. What are your insights on this matter? Are there proper IDEs out there I've missed? Can I indeed use Adobe Animate CC / After Effects CC running "embedded GSAP"? Is GreenSock developing their own DOM/SVG animation IDE? Thanks for your reply in advance. -Jos
  15. Hey guys I've got a question concerning transformOrigin behaviour and why there is a difference in end-location of a group in SVG; Why does this; tlBalloon1.addLabel("start", 0); tlBalloon1.fromTo(balloon1, 0.35,{ css: {y: 0, opacity: 0, scale: 0.25}}, { css: {y: "-=10", opacity: 1, scale: 1, transformOrigin:"right bottom"}, ease:Back.easeOut.config(3)}, "start"); tlBalloon1.fromTo(balloon1, 0.35,{ css: {rotation: "-=20"}}, { css: {rotation: 0, transformOrigin: "right bottom"}, ease:Back.easeOut.config(3)}, "start"); Pen A have a different outcome then this; tlBalloon1.addLabel("start", 0); tlBalloon1.fromTo(balloon1, 0.35,{ css: {y: 0, rotation: "-=20", opacity: 0, scale: 0.25, transformOrigin:"right bottom"}}, { css: {y: "-=10",rotation: 0, opacity: 1, scale: 1}, ease:Back.easeOut.config(3)}, "start"); Pen B OKAY guys I found out myself. It appears when I start with offsetting attributes and I would like to transform to original I have to set transformOrigin in altered from-section.
  16. 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.
  17. mikel

    Oooops ...

    Hi, To be honest, I just wanted to try different easings and a countdown. But with a little story it was really funny ... Kind regards Mikel By the way: GSDevTools is very helpful. I noticed, however, that in reverse, the centering of the object (pathDataToBezier) is not interpreted expected. Is that due to my coding?
  18. Hi guys, I want to know if its possible to achieve animation like this with morphSVG? (see the link below) https://giphy.com/gifs/3o6fJ1O72KpIh4YRLa. Im trying to wrap my head around how to achieve this and I liked to know how you guys would approach an effect like this.
  19. Hi everyone, Noob issue here I imagine, but it appears my SVG is overflowing it's 'bounding box' while scaling... I've searched online and can't seem to find anyone with a similar issue. Any ideas what I'm doing wrong? Thanks
  20. Hi GSAP Community! I have a small problem and haven't seemed to be able to resolve it via Google... I'd like if this SVG and all the paths would start to animate at the same time. As you can see the first animation happens, then the second, then the first... I've tried setting ", 0" at the end of each animation and also tried the position parameter by naming them. Nothing seems to be working. I'm probably just overlooking something simple. Any help is appreciated.
  21. Hi GS, I've got another question for some thing I'm trying: In the codepen I've attached you'll see a quick set up for something like a pong game. I managed to get the pong-handlers to move on click Now to move the ball I was just exploring to use the ticker and the ball position++ - Is there a way to change the velocity of such movement? Of course I have a lot of other challenges ahead, like the collision detection and the direction of the ball; But that's for later (most probably I have to consult the forum again :-)) Hope to hear from you again! D
  22. Hello, This it's my first try with GSAP and I'd need your help to understand how should I think to solve the animation process. I want to achieve Violet water drop falls down on black background Then letters start animating - For extra effect I would break "V" letter into two paths so both lines they can get animated simultaneous. My problems: My main problem is how to control timing and control visitability of these paths or groups via js How can I hide cyan letters on the beginning and start with letters animation when the water drop falls into place? In load animation part: TweenMax.from (".Vletters", 0.6, {drawSVG:"0%"}, {drawSVG:"100%"}, 2); It seams I cant add delay parameter into the function like: TweenMax.from (".Vletters", 0.6, {drawSVG:"0%"}, {drawSVG:"100%", delay:"2"}, 2); In on click function I don't understand why violet drop isn't animating. If possible I would first have Violet water drop falls V letter gets animated then this animation is taken to the next left and right letters so that whole "logo" is reveald.
  23. Super Newbie here, just trying to get the hang of GSAP (which is pretty awesome so far). I wanted to know how these dots can animate until they morph into the letters, ie I don't want them to animate forever and I can't quite get the timing down so they stop once the dot becomes a letter. The other thing is my code is rather large and I assume there is a way to shorten up everything. Maybe wrap functions around things ... Also the fill to white isn't working at the end. Any help is much appreciated! Shawn
  24. I have a lot of SVG stars that i'm trying to animate. The first time it looks very nice, up to the part where it repeats. It starts at the original position but I would love to make it look like stars are raining from the left to the right infinite times, any tips? I have added a Codepen URL
  25. How do I get an svg object to go to the position of another one? I have been banging my head against a wall. Trying to get pink to follow draggable green. Any help would be great