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. This is my first attempt at SVG animation with GSAP...I'm not sure what I'm doing wrong!? I'm trying to achieve this simple animation on click (red/second box from left): http://callmenick.com/_development/css-hamburger-menu-icons/ I'm experiencing all kinds of weirdness...any help is greatly appreciated
  2. Hello, This is my first attempt at DrawSVG. I've got 3 svgs that appear one-at-a-time then the stroke is drawn fromTo {drawSVG:"0% 50%"}, {drawSVG:"0% 100%"} and then the y position is animated. Everything works as I expect except for the first draw. It's not honoring the fromTo position. Can you please tell me where I've gone wrong. Thanks
  3. Hi guys i realized this simple animation width an svg image; the square on the top moves automatically and the one on bottom moves right or left depending on what of the two arrows of the keyboard is pushed. The problem is that i need to stop the moving of the second square when it's in proximity of the margins of the window. How can i do? Thank you in advance. (everything is in the codepen)
  4. Hi wonder if someone could help me. I have a simple 3d rotation of a red circle on Y axis. It's working fine everywhere except on Safari and iOS8. The issue is that on safari, when it rotates it seems to be missing one half of the circle. Have attached the PEN - Pen: http://codepen.io/sonamtsu/pen/xGoRzw Page: http://codepen.io/sonamtsu/full/xGoRzw/ Any help would be greatly appreciated. Thanks
  5. Hi Guys, I was just playing with some really nice text effects from another codepen, and using GSAP to tween the filter values. I'm getting a glitch when the animation starts/resets though, so I think I need to set something at the start to get rid of it! Any ideas where the glitch is coming from? Note that it doesn't work in IE at all! Cheers, Paul
  6. GreenSock does not render animated SVG symbols properly in Chrome (44.0.2403.155.m) and IE 11.0.21 on Windows 7 SP1 x64. Please have a look at the Codepen example. The animations render properly in Firefox 40.0.2. There is no animated scale in IE and nothing is animated in Chrome.
  7. Hi, I am new to GSAP and HTML5/Javascript animation; I'm used to timeline animation in Flash and After Effects, but I think it's a good idea to learn HTML5/Javascript animation, and GSAP seems like a great tool. I wanted to test out SVG animation with GSAP, so I made a quick shape with two layers in Illustrator & then saved out the SVG code & gave each layer/shape an ID because I want to animate the circle and the check separately. For some reason, neither layer will animate... I feel like this is probably be pretty basic, but I'm not sure what's missing. Any help/suggestions are much appreciated.
  8. so i am building a bike animation, and i want to rotate the pedal assembly while keeping the pedal itself perpendicular to the ground. i am failing on that last bit. current version of the code here http://codepen.io/brountreeRS/pen/mJgNbb
  9. I'm repeatedly animating an SVG path with TweenMax.to: function wink() { TweenMax.to($righthand, 0.4, { x: 60, y: -60, rotation: -120, ease: Power1.easeInOut, transformOrigin: 'left bottom' }); TweenMax.to($righthand, 0.15, { rotation: -90, yoyo: true, ease: Power1.easeInOut, repeat: 5, delay: 0.4, transformOrigin: 'left top' }); TweenMax.to($righthand, 0.4, { x: 0, y: 0, rotation: 0, delay: 1.25, ease: Power1.easeInOut, transformOrigin: 'left bottom', onComplete: function() { $righthand.css('transform', ''); setTimeout(wink, 5000 + Math.random() * 10000); } }); } even resetting the transform property in the onComplete function. As long as the window is open, everything is fine. Now, using the latest Chrome on Mac OS X, if you keep the animation running in a background tab for a few minutes, the path slowly starts creeping away - see the attached screenshot, the hand of the animal has somehow transformed into an obscene dongus. While funny, I'd love to know if there is a fix for this. Thank you!
  10. Hey guys, Been a lurker here for a few years, but never needed to ask a question until now, so thanks for anyone that can provide any info. Working on a little SVG chess animation, as you can see in the pen. I have the timeline set to repeat. On the initial playthrough, the elements all appear correctly and animate as I've coded them to. But on any subsequent plays, you'll see that some elements jump or appear differently. I'm assuming this has something to do with the transforms I'm applying to them. If so, is there a way for all of the elements to "reset" to how they start at the beginning of my timeline on the first play? Thanks, in advance.
  11. Hello everyone. After searching through the forums i've found no particular subject related to SVG filter effects. Is there any support for these filter effects within GSAP at the moment? Attached is my codepen where I have set my SVG to have a GaussionBlur with stdDeviation of 0,50. What I want to do is animate or update that number from 0,50 to 0,0. Any ideas / suggestions as to how I might go about doing this in a timeline? Thanks for listening!
  12. I'm currently building an animated banner using Canvas. I've got coloured SVG dot graphics set as Image() objects on my canvas. I've been animating the dots on the canvas along x,y paths and I'd like the dots to fade out by the end of their animations... I can't seem to figure out how to animate opacity values in canvas using TweenLite... In fact, I'm not even sure how to animate opacity on the dots at all, even through plain JavaScript.. I haven't been able to find any answers on Google.. Does anyone here know how to achieve this desired effect? (preferably using TweenLite) For context sake, here is a small snippet of the code I'm currently working with: function drawDot() { ctx.drawImage(orDt, orDtObj.x, orDtObj.y); //draw an orange dot in the canvas } function reAnimateDot() //set dot back to it's origin { orDtObj.x = xDotOgn; orDtObj.y = yDotOgn; animateDot(); } function animateDot() { var angle = Math.random()*(Math.PI*2); console.log('>> the angle : '+angle) var radius = 100; //find the end point for our dot var xEnd = orDtObj.x + radius * Math.cos( angle ); var yEnd = orDtObj.y + radius * Math.sin( angle ) ; orDtObj.xEnd = xEnd; orDtObj.yEnd = yEnd; //reDrawUnit is a function that redraws everything during animation (refresh/frame-rate function) TweenLite.to(orDtObj, 2, {x:orDtObj.xEnd, y:orDtObj.yEnd, autoAlpha:0, ease:Quad.easeOut, onUpdate:reDrawUnit, onComplete:reAnimateDot}); }
  13. Hi, I wanted to start a discussion for feedback and thoughts on the best ways to do some masking animation. I've seen the really good one with the green grass and the star shape, but it doesn't work in Firefox. I did find a stackoverflow topic where the author found the Attr Plugin worked with changing <rect> properties! I've got a couple examples up on Codepen and wondered if anyone else has thoughts, examples or work arounds for something we do in Flash so easlily. I'm looking to try and mask an image and reveal it from the center out. clipPath, clip-path and svg are new subjects for me and I found that this works great in Doesn't work in FF http://codepen.io/kaplan/pen/waxrKe Attr Plug makes it work! http://codepen.io/kaplan/pen/bdjoRa I have a local version that does some offsetting and has overflow hidden that I'm going to put on Codepen, but it looks jumpy. This is the other forum post: http://greensock.com/forums/topic/11215-svg-masking-with-gsap-animation/ This is the SO post: http://stackoverflow.com/questions/29413359/animated-svg-clipping-path-not-working-in-firefox
  14. Hey everyone, I've been putting together an SVG animation of a falling leaf that attempts to accurately render the falling motion according to sound laws of physics -- I'm going for something like this: https://www.youtube.com/watch?v=ylrdQhlI9bo. As such, I've been trying to use the BezierPlugin to define sets of motion paths for each "phase" of the fall, and while I feel as though I have everything calculated correctly, the final result causes the leaf to veer wildly across the top and bottom of my entire SVG. I've tried varying the path properties between "left/top" and "x/y", using percentages as opposed to px, and also using "+= / -=" as opposed to exact values... and all produce the exact same motion. The main path declarations look like this... var xExtent = -100; // range spanned by x during the fall (starting from its resting point on the branch) yExtent = 180, // range spanned by y during the fall (from the branch to... you know.. the ground) fallPath = { phase1: [ {x: (xExtent * .0625) + 'px', y: (yExtent * .03) + 'px', rotationY: 0, rotationX: 5, rotationZ: 0}, {x: (xExtent * .125) + 'px', y: 0 + 'px', rotationY: 0, rotationX: 10, rotationZ: 30} ], phase2: [ {x: (xExtent * .25) + 'px', y: (yExtent * .07) + 'px', rotationY: 0, rotationX: 20, rotationZ: -60}, {x: (xExtent * .375) + 'px', y: (yExtent * .145) + 'px', rotationY: 0, rotationX: 25, rotationZ: -10}, {x: (xExtent * .70) + 'px', y: (yExtent * .175) + 'px', rotationY: 0, rotationX: 50, rotationZ: 5}, {x: (xExtent * .775) + 'px', y: (yExtent * .05) + 'px', rotationY: 0, rotationX: 80, rotationZ: 80} ], phase3: [ {x: (xExtent * .585) + 'px', y: (yExtent * .22) + 'px', rotationY: 0, rotationX: 0, rotationZ: 81}, {x: (xExtent * .31) + 'px', y: (yExtent * .36) + 'px', rotationY: 0, rotationX: -10, rotationZ: -9}, {x: (xExtent * .125) + 'px', y: (yExtent * .38) + 'px', rotationY: 0, rotationX: -60, rotationZ: -57}, {x: (xExtent * .0625) + 'px', y: (yExtent * .27) + 'px', rotationY: 0, rotationX: -80, rotationZ: -75} ], ............ .......... }; .......... for (var phase in fallPath) { if (fallPath.hasOwnProperty(phase)) { fallTl.add( TweenMax.to( leafSVG, TOTAL_FALL_DURATION / numFallPhases, { bezier: { type: 'thru', values: fallPath[phase] }, ease: Linear.easeNone } ) ); } I've also included my current CodePen, and I'm hoping someone might be able to spot an error that I'm simply overlooking.
  15. OK.. so If we need to animate a very simple shape, a vesica pisces, into simple circle.. .. Can GSAP handle that, or must we use something like SnapSVG.js? Specifically, I need to animate this shape into a perfect circle. (a solid shape with a fill, no stroke.) (They both have the same number of points.) Maybe a shape morphing plugin is in the works? MorphSVG? Thanks !
  16. Hi, I am trying to stagger the opacity of all of the polygons, lines, etc that are part of an SVG (there are 900 elements). I have a basic codePen set up and I think I would need to make an array for all of the elements inside of my SVG in order to stagger the opacity of each piece, but I'm not really sure that is the way to start. The codepen only has 4 elements to simplify things, but the SVG I wanted to animate has about 900 separate pieces. I want to target all of the pieces inside on my SVG and stagger their opacity efficiently, if I have 900 pieces... I am finding that with so many shapes, it goes very slow only because there are so many shapes and it takes time for them all to render--so I want to try and overlap them with a large number, so elements would pretty much animate at the same time... or better yet, be able to set a time so that all elements would animate in within 3 seconds... is that possible ?
  17. I think I stumbled on a bug trying to rotate text elements in SVG with Greensock... It completely ignores the rotation of the text for both the house and the sun... TweenMax.set(sunDegreesText,{rotation:degrees,transformOrigin:"50% 50%"}); TweenMax.set(houseDegreesText,{rotation:degrees,transformOrigin:"50% 50%"}); Any ideas?
  18. Hi all, The problem i'm having is a what appears to be a browser issue (namely firefox, safari). My codepen attached shows the animation I have working (using the fantastic drawSVG plugin and GSAP) at the end of which the raindrops are supposed to animate in their own timelines repeating. Chrome seems to want to animate it perfectly (why can't everyone just use Chrome!? ) but when in Safari and Firefox the paths don't want to translate position, only opacity. Any suggestions as to a workaround for this? Thanks! Oli [edit] codepen url removed by moderator [/edit]
  19. Hi There, So I've recently completed an animation using a "mask" like effect to reveal a string of handwritten text. This animation works great in Chrome, Safari and even IE(!) but in firefox the dash-array and dash-offset seem to have values that are far too small creating a really weird effect (see codepen.) Is this a known issue? Or have I set something up wrong in my SVG file? Any guidance would be appreciated.
  20. In the Codepen listed, I'm trying to tween a Snap.svg element with a dummy object. I first learned about this technique here: http://greensock.com/forums/topic/8604-snapsvg/ But... alas I have been unable to make it work. I'm not really sure why it's not working. For the record, I'm aware that Greensock has a Raphael plugin, but the project requirements commit me to using Snap.svg. I also just generally prefer Snap.svg and would LOVE to use my favorite tweening tool to make it work. I'm also aware that a forum user wrote a port for the Raphael plugin about a year ago... but there's been no recent activity on Github and I was unable to get it to work. Thanks for any and all help in advance!
  21. Wanted to document this in the event that someone comes searching. I was injecting an Illustrator SVG into the DOM via JavaScript, and the animation for polylines would get to about 80%, and then immediately jump to 100%. After playing w/ CSS properties, I found the root of the issue. Illustrator dumps out SVGs with a lot of linebreaks. I was escaping the carriage returns in JS like so: Removing the carriage returns smoothed things out immensely and all is good in the world.
  22. Hello guys, I'm new here, and i'm trying to make this SVG rotate forever, but it just won't work, i've tried making the time -1 and it still wont work. any suggestions? Thanks. <script> //we'll use a window.onload for simplicity, but typically it is best to use either jQuery's $(document).ready() or $(window).load() or cross-browser event listeners so that you're not limited to one. window.onload = function(){ var logo = document.getElementById("logo"); var tween =TweenLite.to(logo, 5, {rotation:360, transformOrigin:"50% 50%"}); //keywords tween.restart(); } </script>
  23. One really nice way to clean up your HTML is to get rid of inline SVGs and opt of object tags like this: <object id="mySVG" type="image/svg+xml" data="images/PrettyArt.svg"></object> The problem with this, is that it is technically a separate document. So the following doesn't work... TweenMax.to("#myObject",.5,{opacity:1}); It would just fail to animate, and worse, it would fail silently so I had no clue why it was failing! To make this easier to handle, it might be nice to either have some sort of logging if it doesn't find the queried object. OR the ability to either include a specific target document to query. One way to achieve this, would be to "register" the SVG document with TweenMax. Something like this: TweenMax.register("#mySVG"); In this case, TweenMax would query the current document for "#mySVG", it would find the object tag and include this document to also traverse if no objects were found in the root document. Obviously, this would work great for including one document, but multiple documents per page could be used. And that would muddy up the results of the query selector. So maybe another strategy should be used instead. What if you could force which document you want to select from... for example what if you could add a fourth/optional argument? Like this: TweenMax.to("#myObject",.5,{opacity:0},"#mySVG"); This would allow you to optionally include another document or a list of documents to query.
  24. Hello guys how are you there ? I'm quite new at Greensock because I started learning it on Saturday. But I did practices a lot and now I want to use it for my own project. But here I have a problem, that's why I come here to ask you some help ! I'm working with an SVG file and I try to animate some of my drawings on the webpage, but, I drew a background with a gradient and i wanted to change it with a transition in greensock (TweenMax etc..). I could maybe do it with javascript only (wich I used to practice with a background of only one color, changing in function of the computer time), but i wanted to use Greensock's stuff. If I want to change this gradient, it's only to make it change in fonction of time with transition so that between 5am - 8am you've got dark blue on the bottom and red-orange nuances on the top, for example. So, I hope that I well explained my problem. Sorry for some English mistakes, I'm a french student in webdev. ! Have a nice day / night / evening ..
  25. Any idea on how to animate the circle with DrawSVG plugin, from 360 to 0 forwards, and not returning backwards?