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. hello everyone, i'm wondering how can i centering my svg object exactly in the center of the screen. I give a style for my svg like position: absolute, top:0,left:50%, transform: translate(0,-50%). how can i move it to the center of the screen with gsap?
  2. hello friend , in above codepe link it shows blinking light animation it work on google chrome but not in mozilla firefox so please check and give suggestions thnx...
  3. I am animating a photo within an SVG clip-path, what I have below works in IE11, Chrome and Desktop Safari, but doesn't work in FF and iOS Safari http://codepen.io/mattparkerseverin/pen/OMYEbX I've been researching this issue here on the forums, and elsewhere, but I can't seem to implement the fix suggested here - http://greensock.com/forums/topic/12062-masking-with-clippath-and-svg/ I understand the the Attr plugin could work, but I'm not quite sure how to utilize it.
  4. Hello, The following code pen example shows unwanted morphing behavior: http://codepen.io/anon/pen/YwJZBe I played around and realized that the underlying issue is caused by the value in the paths 1e-5 and 10e-6. The following changes: Change 1e-5 to 0 in path1 Change 10e-6 to 0 in path2 can be seen in this codepen example: http://codepen.io/anon/pen/bEmWOp And this is the expected behavior. I am using Inkscape to create the svgs. I played around with the precision and saving as an Inkscape SVG, Plain SVG and Optimized SVG, but I didn't have any luck getting rid of the precision whilst preserving the shapes. A quick Google search on how to handle numbers in that notation turned up this stackoverflow: http://stackoverflow.com/questions/10943997/how-to-convert-a-string-containing-scientific-notation-to-correct-javascript-num Would it be possible to have the MorphSVG plugin filter the numbers in that way? Could I get an unminified copy to make the adjustment myself? Or can anybody offer some other work around advice. Thanks!
  5. Hi all I need to animate an svg with gradient and I'm using SMIL at this time. Unfortunately in IE and Edge it doesn't works Is it possible to animate it with GSAP? Thanks in advance
  6. Just wondered if any geniuses out there had any tips for a clean undulating animation for a path? Like a balloon string, or water, or a cape or sheet in the wind? I know there are various ways to approximate it, and I have fiddled around a bit previously, but wondered if there is a good method to do this. Perhaps an SVG path with lots of points and straight lines between, where you can run a stagger animation on the points? But then you'd have to be able to target points specifically in the SVG somehow. Would love to know your thoughts. Very basic example included, but you can see the curvy paths with control points don;t animate so well. Thanks
  7. Hi Friends, I'm hoping someone can help me to understand the behaviour I'm experiencing when trying to use svg masks dynamically. The codepen technically works as intended however the only way I can seem to get them to work is using the .fromTo() function and I imagine the .to() and .from() although I haven't tried them specifically. I am however wondering if I can preposition the svg out of it's mask with the mask property remaining intact and the mask remaining in place by using perhaps the .set() function although I can't seem to get that to work. Also using translate transforms doesn't seem to work. Any guidance is much appreciated, Adam
  8. I'm trying to create an SVG that has clickable shapes, which, when clicked fills the entire shape from the inside out. http://codepen.io/anon/pen/OMBPar ^ This works well for filling the entire region at the same time but what I'm trying to achieve is a "ripple effect" which will fill outwards from the point at which the click took place. So the fill "diffuses" out to the edges of the shape (and stays within the clicked shapes). Essentially, I'm after something like the following effects: http://tympanus.net/Tutorials/SVGRipples/ http://codepen.io/zavoloklom/pen/wtApI http://codepen.io/Craigtut/pen/dIfzv http://codepen.io/anon/pen/BjYQeM But ideally just using Tweening - is this possible? Any help is much appreciated! Thanks.
  9. I have an SVG with a number of drawn paths/lines. How would I go about giving them a very subtle, minor movement effect in the same direction as the cursor that is being dragged across them? For example, if you move your mouse through the lines on the Codepen, they gently and briefly move downward, then return to their original position - almost as if a light breeze had hit them. But how can I make them go whichever direction the mouse passes through? Or maybe even something cooler, like the particles.js repulsion effect? I'm not looking for an entire code solution; just a helping hand to get me started. I'll be updating my Codepen slowly as I work out how to go about this. Thank you in advance.
  10. Hello, I have a square that I want to morph into three circles. Is it possible to morph one shape into multiple smaller ones in one transition - versus having it transform into each individual shape? The Codepen I've included has a square that transforms into one blue circle - but the actual 'whole' shape is three circles lined up. Thank you! tl = new TimelineMax({}); MorphSVGPlugin.convertToPath("circle, rect") tl.to("#red", 1, {morphSVG:"#blue", fill:"#0000FF", ease:Back.easeOut.config(1), y:0}, "+=0");
  11. Hello! A new project has brought me to GSAP and I'm starting to wrap my head around what's possible, how to do things, etc. Please forgive me as I fumble my way through this… Rather unsurprisingly, I've stumbled into a wall with regard to the first animation this project requires, which can be described as scaling a huge svg by a large number … but perhaps it's better to link straight to a demo page. Forgive me for not using CodePen—they have a file-size limit and this demo exceeds it: https://jsfiddle.net/163eys6b/7/ Give your browser a little extra time to process that page; like I said, the SVG is huge. The project calls for a big map of (almost) the entire world which starts zoomed all the way in to Amsterdam, which then slowly zooms out all of the way, from scale:1600 to scale:1. In the above JS Fiddle, you'll notice that it does what it should do, but it does it with a stutter (I'm using the latest version of Chrome stable as I type this, version 47.0.2526.111). I can remove the stutter by removing force3D:false, but that results in a very blurry experience about 5 seconds after the zoom-out animation begins. Am I doing this right? Or, is this SVG + scale combination just too much for the browser to handle comfortably? Thanks for your time!
  12. I'm trying to animate fills on SVG paths. I can use Tween to fill the entire paths progressively but I'm looking to animate the filling progressively from an origin and was wondering whether this was even possible with GSAP? In the linked Codepen (http://codepen.io/anon/pen/RrYxXq), I've been able to fill each pencil in-turn, but the desired effect is to have each pencil filled one-by-one from the bottom upwards, (filling each pencil from white to the full colour from the bottom up as if filling with water) - sort of an equalizer effect. Any help/guidance would be much appreciated! Thanks!
  13. Hey there I was simply wondering if there existed, somewhere, a practical workflow that one could follow when working with SVG – the aim being to streamline the process of creating SVG in Inkscape or Illustrator, then translating it into markup that GSAP understands. I am not facing any particular issues at the moment, but I just finished working on an animation and it did cause some head-scratching. For instance, if you save an Illustrator project as an SVG file and then look at the code, and paste some of the information on there in your JS files to feed them to GreenSock, the result often differs. The reason for that is that, when you apply some transforms to your shapes in Illustrator, the software interprets some of it as actual transforms (which go into a transform matrix) and some of it as simply changing the shape's x and y coordinates. Then, when you enter the same info into your code, I think GreenSock just converts it all to a transform matrix, leading to varying (and sometimes wildly unexpected) results. Add to that traps like unaccounted-for changes in transform origins... and it can get pretty messy. I'm not looking for a solution to the situation I described above, nor for explanations as to why it happened the way it did... like I said, I don't actually face any problem at the moment I'd just like to know if there are best-practices and methods that are compiled somewhere that I could learn, to save some time for a future project. There's http://greensock.com/svg-tips, but that only provides examples of how GreenSock achieves various effects, not how to integrate all of those together and within a larger workflow. As an example, I know that it's usually more efficient to use relative values in your GSAP code instead of relative ones (like x:"+=10"). I'm not sure I would be able to explain why, but I found that it led to less errors – not on GSAP's side, mind you, but on the translation from vector-editing software to JS code. The issue's on the human side more than anything Cheers!
  14. This is my first time trying to use the Bezier plugin and I'm very confused as to what I'm doing wrong here? In the codepen example I've attached, I've added borders to show where to hover to fire the animations. I'm trying to loop through a bunch of SVGs and tell the polygon inside of each of each SVG to animate down the path inside the same SVG. If you hover over the box on the far left, this is acting exactly as expected - the arrow animates down the path and does a little bounce at the end. However, none of the other ones inside the loop work as I'd like. The positioning of their arrows get progressively worse and I'm not sure why? I've logged the path data that I'm passing to the timeline and it looks correct, so I'm really confused as to where I've gone wrong in my code. Any help is greatly appreciated
  15. GSAP Masters, Have come across a situation that you are all more than likely preloaded to fire back a response to explain why. The codepen example above is handled allot different in chrome as it is to firefox or internet explorer (all that I have tested at this stage). I was looking for a way to only transform on one shape but then pattern that render across the whole page as opposed to transforming lots of shapes all together (was killing my cpu). Chrome let me believe I was close to an answer until yeah the other browser checks bummed me out. Looking forward to your response. Cheers, Bundy
  16. Hi, After reading the documentation on how to morph more than two objects, it seemed like the code wasn't any much longer. However I'm wondering if I'm missing anything within my code that is preventing that, as the shapes only morph from the first to the second and gets stuck there. It doesn't move on to the third shape. http://codepen.io/anon/pen/pgKEQP Thank you - I really appreciate it! TweenMax.to(pink, 2, {morphSVG:"#red", fill:"#ED1C24"}, "+=1") .to(pink, 2, {morphSVG:"#black", fill:"#000000"}, "+=1");
  17. Hello, I was following along with the MorphSVG demo, and was wondering how you would change the color of the second shape? Both shapes have their own color, but the morphing keeps it at the #start fill color. http://codepen.io/anon/pen/jWxeVY Thank you!
  18. Hi, GSAP is really impressive, but I'm searching for a tip to playing with visibility or display in svg. I make a 0s transition but it's look stupid tl.to('#el',0,{autoAlpha:0}); In my codepen I try to wink
  19. Hello, Im trying to use MorphSVG but it isnt working. I made a realy simple example but even this doesnt work. So basically I want to first use DrawSVG to draw a stroke and then morph it into a filled shape (not in codepen). But the morphSVG isnt working. I created a very basic codepen and even this is not working. Could it be because of my SVG?
  20. Hello, I'm mystified as to why the stroke on the red bar in my pen doesn't animate like the stroke on the white bar. The only difference I can see are the coordinates of the lines. Thanks
  21. Hi, I'm using an svg as a background image, but it pixelates when scaling It resets itself to a sharp vector once it's finished scaling Any ideas how to fix this? Thanks
  22. A few days earlier I know, but I am off to the beach tomorrow. I wanted to say a big THANK YOU to the awesome GreenSock team. Thank you for all the new features, plugins and the incredible amount of work put into the GSAP tools that make our lives so much easier. Also a big thanks to everyone contributing to this forum for helping newbies and pros getting to know GSAP, brainstorming ideas and for simply being so helpful every time. https://ihatetomatoes.net/happy-new-year/ Happy new year. Petr
  23. Hi folks, I am creating my prototype in Framer.js and using GSAP to animate the SVG in it. However the SVG inserted aren't detectable. Hence GSAP can't animate it? But I check the DOM, they are there. Weird? Framer.js spinner = new Layer({ width: 207, height: 207, backgroundColor: 'transparent' }); spinner.html = '<svg id="dots" xmlns="http://www.w3.org/2000/svg" width="207" height="207" viewBox="0 0 207 207">' + '<path id="top" d="M103,1A12,12,0,1,1,91,13,12,12,0,0,1,103,1Z" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="3" fill-rule="evenodd"/>' + '<path id="right" d="M193,91a12,12,0,1,1-12,12A12,12,0,0,1,193,91Z" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="3" fill-rule="evenodd"/>' + '<path id="bottom" d="M103,181a12,12,0,1,1-12,12A12,12,0,0,1,103,181Z" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="3" fill-rule="evenodd"/>' + '<path id="left" d="M13,91A12,12,0,1,1,1,103,12,12,0,0,1,13,91Z" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="3" fill-rule="evenodd"/>' + '</svg>'; GSAP function getSpinnerTimeline(){ var tl = new TimelineMax(); tl.to('#dots', 1, {rotation: 90}) .to('#top', 1, {y: 10, repeat: 1, yoyo: true}, 0) .to('#bottom', 1, {y: -10, repeat: 1, yoyo: true}, 0) .to('#left', 1, {x: 10, repeat: 1, yoyo: true}, 0) .to('#right', 1, {x: -10, repeat: 1, yoyo: true}, 0); return tl; } var mtl = new TimelineMax(); mtl.add(getSpinnerTimeline()); mtl.timeScale(2.5); mtl.play(); If I insert my SVG into HTML directly, it works like a charm. If I insert my SVG using jQuery, it works like a charm. But when I combine Framer.js + GSAP it doesn't work. Here I attach a screenshot of the generated DOM. The SVG with the id(s) are there.
  24. Does anyone know why when animating the scale of an svg, it gets blurry in IE, and only looks clear in Chrome and Safari once the animation has finished? In this quick test (http://www.brendyn.com/test/) the top image is SVG and the bottom is a PNG. If looked at in IE, once it gets big, you can see it's very blurry, which an SVG shouldnt be. The PNG is only slightly blurry (which is expected). I assume it's a core browser difference, but I would have assumed TweenLite would have taken care of that. Can anyone offer any insight? Thanks very much in advance.
  25. Hello, I'm a bit lost in Morph magic. Please take a look on my noob approach http://codepen.io/Dikus/pen/pgbQEe to morph one logo into another - It's messy and it fails on start. I would love to know how to prepare SVG from Illustrator so that MorphSVG can handle the rest. I've watched a lot of tutorials about morph, and I experimented with few demos on codepen but all SVG's there are nice and clean - I wonder, how to simplify them to paths? I'm tired of hitting walls with my head - paint is already falling of - so please aid me a bit, give me some clues, anything ! Probably I'm doing something very stupid so be gentle ^_^''