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, I'm having an issue with transformOrigin and svg groups. It's not really a GSAP issue, everything is working as it should be. It's more that I cant work out how to get the correct transform origin psoition. Essentially i have a bunch of concentric circles, with little dots on them. Each set is in it's own group. I'd like to rotate it so TransformOrigin: '50% 50%' might seem the logical choice. However the issue is that since I'm rotating the group and the group isn't the same size as the 'main circle' (which is also the 'rotate path') the transform is off (great if you liked spirograph as a kid, not so great for me). The problem is occurring because some of the edges of the little dots that sit on the larger stroked circles are not flush with the main circle, so the group tag naturally wraps around the outtermost elements. In the one circle group I've animated successfully, I've simply been able to set the radius of the inner circle as the Transform Origin but this only works because the top and left bounding of the group matches that of the main circle, where a dot pushes the group out at the top and left, this doesn't work. The pen will help you to understand this a little better, especially if you inspect the svg and see how the group box is larger (often on all sides) than the circle that makes up the animation path. What I was wondering is if anyone knows of a way to calculate the correct transform origin position, or if there is a simpler solution/ best practice I should be following. In the pen, the first circle in each SVG group is the 'main circle' (the stroked circle that makes up the animation path), the other circles are the little dots. Yes, I know that is a massive svg with billions of elements, and I apologise for that. http://codepen.io/peterallenio/pen/LGZYxa Thanks in advance
  2. Just curious- But in Chrome/Safrai - the svg animation flickers (at the end of the animation) and the mask is almost reset. I would like the animation to end on the solid white color. (this works in Firefox). I must be over looking something. Any help would be helpful. thanks
  3. In my last post I was struggeling with getting an on click event work within an svg image. This problem is solved, but now I'm struggeling with getting a hover to work. Here is what I my code to do: When you press one of the buttons, for example $yellowbutton, all the colored blocks except for the $yellowblock will get opacity 0. $yellowblock will get opacity 1. This is the part that is allready working. Now what I want it to do is when a button is pressed and thus a certain colored block is shown, when hovered over this block it enlarges. The code I've used to get this to work is based on this codepen demo. For now, only the orange block is working, but this might be because the orange block is the first visible block in the svg image.
  4. Hi everyone, I'm trying to animate two paths at the same time using svg paths and javascript, but seems something is not right with my codes where I can't find out what is missing. I want each box to run on the different paths. Any idea/s what is wrong with this code? See on codepen: http://codepen.io/anon/pen/WrQeOp Thank you very much in advance. Kind regards, Fernando Fas
  5. I need some help with animating certain parts of my svg image when clicked on another part of the svg image. This is what I'm trying to do: When you click on one of the smaller buttons, for example the yellowbutton, the yellowblock will appear (with opacity: 1) and the other coloured blocks will dissapear (with opacity: 0). When you click on the orangebutton, the orangebutton will appear and the other coloured blocks will dissapear etc. etc. I think I'm on the right track but something isn't working.
  6. Hi, greetings! I am a complete newbie and am very excited to get started learning GSAP for SVG animation. Right now I have one of the most basic questions: can I get a current step of a transform attribute component from an affected SVG shape using GSAP? I noticed that the amazing and intuitive capability of GSAP turns transform attribute parts into a matrix and I've come across https://css-tricks.com/get-value-of-css-rotation-through-javascript/ which is what I'll resort to outside of this forum. However, I have to ask if there's already a native GSAP method of doing this. My goal is to simply keep track of transform values in units, such as rotation of a clock-arrow, using an onUpdate function. tl.fromTo( elem, duration, { rotation : oldAngle, transformOrigin : "50% 50%" }, { rotation : newAngle, transformOrigin : "50% 50%", ease: myEase, onUpdate : function(){ // elem.currentRotationAngle = ? } }, myLabel ); Thanks, and thanks to all who made this code available for the people of Earth.
  7. Hi all, I'm having an issue with transformOrigin combined with scale in Chrome (for OSX) (not the case in FF or Opera). Check a box, and click the CORRECT button. The 'check' jumps up the the viewBox in Chrome, but stays nicely centered in FF and Opera. This Pen has been fixed to show solution. http://codepen.io/ryan_labar/pen/vNozXO
  8. Hey - I was reading an article by Sara Soueidan about grouping and reusing SVGs, so I thought I'd try implementing that on an animation I had already completed. Here's the original, using individual <line> elements: http://codepen.io/flysi3000/pen/XmaqBQ The new version with a reused <symbol> is here: http://codepen.io/flysi3000/pen/YwKedE. As you can see, the svg lines aren't rendering as expected at all. Wondering what I'm doing wrong? SVGs are still kind of mysterious to me, so any help would be greatly appreciated!
  9. I am trying to make an arrow flip horizontally using SVGMorph... however, it doesn't look like it's flipping. I tried changing the ShapeIndex but there's none that will make the flip look natural. Codepen: http://codepen.io/anon/pen/dGbOLZ Is there a better technique to do an SVG flip that will work on all browsers?
  10. Hi, I bought the GSAP update to obtain the powerfull SVG plugins. But I've readen topics about edge and svg and I cannot make it work. I don't speak english very weel, so explanations seem quite confuse for me across the many pages of the forum. Can someone explain it in a synthetic page : how to use an Illustrator SVG file inside Edge Animate with GSAP and SVG draw and transform plugins ? Thanks a lot for your precious help. If you can produce a zip sample file too, that would be wonderfull. Thanks. Zhur
  11. I did a quick hourglass spinner using an SVG graphic. It looks great in OSX Chrome and animates just fine. But the positioning seems to be off in Firefox & Safari. Is there a known issue with SVG positioning cross browser? Or possibly with transform-origin? Codepen is here: http://codepen.io/Bangkokian/pen/ZbZmmw (View in Chrome first to see the working version).
  12. Hi, I have animated SVGs with success using the morphSVG plugin within Edge Animate via the EdgeCommons library. For banner development Sizmek and DoubleClick don't host the edgeCommons library and to include it in production is almost prohibitive (69k). A solution is including only the EdgeCommons.Core.js and EdgeCommons.SVG.js. Unfortunately in doing this the latest version of jquery has to be downgraded (hosted by SIzmek and DoubleClick) and banners are limited to the number of assets. Is there an alternative to EdgeCommons? to access the SVG ID's. The solution is based on this question. http://greensock.com/forums/topic/11131-svg-plugin-with-edge-animate/ The code below works - (it's not pretty) and it relies on the libraries: https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/jquery/1_11_3/jquery.min.js https://secure-ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_18_0/TweenMax.min.js EdgeCommons.Core.js EdgeCommons.SVG.js MorphSVGPlugin.min.js EC.SVG.accessSVG(sym.$("png_upper")).done( function(svgDocument){ // var svg01_a = $("#upper_baseShadow",svgDocument)[0]; var svg01_b = $("#bulge_baseShadow",svgDocument)[0]; // var svg02_a = $("#upper_base",svgDocument)[0]; var svg02_b = $("#bulge_base",svgDocument)[0]; // var svg03_a = $("#upper_keyline",svgDocument)[0]; var svg03_b = $("#bulge_keyline",svgDocument)[0]; // var svg04_a = $("#upper_txt",svgDocument)[0]; var svg04_b = $("#bulge_txt",svgDocument)[0]; // //Animate Tablet var a = .3; var d = .1; var r = 1; var tablet = sym.$("png_upper"); var pbg = sym.$("PBG_lower"); TweenMax.fromTo(tablet, 2, {scaleY:1, scaleX:1}, {scaleY:2, scaleX:2, onComplete:svgEffect, ease:Elastic.easeOut}); TweenMax.fromTo(pbg, 3, {x:0, scaleX:1, scaleY:1}, {scaleX:1.2, scaleY:1.2, x:100, ease:Elastic.easeInOut, delay:.7}); function svgEffect(){ TweenMax.to(svg01_a, a, {morphSVG:svg01_b, repeat:r, yoyo:true, transformOrigin:"50% 50%", ease:Sine.easeOut}); TweenMax.to(svg02_a, a, {morphSVG:svg02_b, repeat:r, yoyo:true, transformOrigin:"50% 50%", ease:Sine.easeOut}); TweenMax.to(svg03_a, a, {morphSVG:svg03_b, repeat:r, yoyo:true, transformOrigin:"50% 50%", ease:Sine.easeOut}); TweenMax.to(svg04_a, a, {morphSVG:svg04_b, repeat:r, yoyo:true, transformOrigin:"50% 50%", ease:Sine.easeOut}); // } } );
  13. Hi, GreenSock developers! I'm amazed when see the latest Morph SVG Plug-in! I comparing two SVG Morph tool, but i seen you're using another way to morph, you're can share how you're doing? http://codepen.io/dalisoft/pen/qOQrwz - my pen, only for test http://codepen.io/chrisgannon/pen/QjKNeZ
  14. I'm using morphSVG to change the shape of an SVG that is already using the morph function. It works as expected if you click the trigger "Grow" button with in the first second or so of the animation, but breaks (won't morph) after that that. I'm relatively new to GSAP, so I'm hoping I'm not missing anything too obvious. I'm not sure what's causing this. Any thoughts? http://codepen.io/ryan_labar/pen/gaEEGR Thanks!
  15. I've created a 3D bar in illustrator (see codepen). Now I want to animate it with TweenMax (or TimelineMax) as if it's building up from the bottom to the top. I tried a couple of things to make this happen, but without any luck. - Created a clipping-path and then try to change the Y coordinate of the 3 polygons (or wrapped them in a <g id="bars"></g>) - Tried to animate the points of the polygon (http://greensock.com/forums/topic/8565-animating-svg-polygon-points-using-attrplugin/) I hope someone can help me with this. This is the end result what I need to create > http://postimg.org/image/pg2drnvch/
  16. For a school assignment I have to make blinking eyes using GS. I figured that If a make an SVG image with seperate eyelids I could use ScaleY to enlarge the eyelids and give the illusion that they're blinking. But for some reason the lower eyelids are acting strange and moving to different location while they're not told to. I hope anyone can tell me what I'm doing wrong and explain what to do.
  17. I'm trying to get a square to rotate around an origin whilst getting larger, however I think the origin needs to move, or do I need to use a static rect to do the rotation, with an inner rect that I grow in size (scale is no good as the line get larger which I don't want). TIA - Mat http://jsbin.com/gilale/edit?html,js,output
  18. I have an animation with lots of SVGs. They are rendered beautifully, scaled up and everything, on initial load. Once you move forward or backwards in the animation (by clicking one of the big blue arrows or a light brown mangrove root), the roots become blurry, especially the ones closest to you, even after the animation has completed. The animation is mostly one timeline which loops. It begins paused. The motion is created by advancing in time in the timeline by passing a value to pause. I looked around online and saw some suggestions like setting transform3d to auto, but that didn't work for me. I'm hoping this is a familiar problem to you veteran animators. I've attached a before (left) and after (right) picture but looking at the animation is probably the easiest way to see the behavior: http://catalyst.goodlookingsoftware.com/a/ Thanks again! Aaron
  19. You can see at line 26 in my JS that I am animating the svg text for whichever circle is hovered over. My only problem is this. Each circle is at different positions, so I need the text to animate by adding a certain number of px to it's current position. Something similar to a varible addition (x += 10;). Is this possible to do?
  20. Hello! I've tested this pen on Chrome and Safari, but I'm running into issues in Firefox. Most of the animation runs fine, but it doesn't work right when I try to animate the individual paths in the clipPath. I've also noticed the same issue in the animated previews for the pen in Chrome. I've looked around, but I'm not sure what the issue might be. Do you think it's a problem GSAP in Firefox, or is it an issue with how Firefox handles SVG? Thanks!
  21. Hi First of all, an other big up to the greensock team for their excellent work, I am so happy my transition to HTML was hassle-free thanks to tweenmax! When I upscale an SVG the SVG gets blurry while tweening. When it has finished tweening it gets crisp again. Any workarounds? Example: http://nicolasdesle.be/svgtest/ Thanks Nicolas
  22. I'm attempting to make the blades of grass sway back and forth and was wondering if that's doable. I've tried using MorphSVG, but found the results to be pretty terrible in regards to the motion created even when adjusting shapeIndex values both positive and negative. I don't have a demo ATM just curious on others thoughts based on the image attached. Achieving this life like motion is pretty difficult for me currently so would love to learn a bit more how to achieve this.
  23. Hey all, Using a technique described in Animation Distorts Initial Scale and Values, my goal is to take all of the elements in an SVG and move them to the same X and Y position. I would have thought that lines 19-23 in the JavaScript in the codepen do this, but they wind up scattering the elements all over the place. Inspecting the DOM in my real-life example, I see that all of these have a property "data-svg-origin" set that I am not setting myself. This property is different for a lot of the elements and I believe that this is what is causing the the discrepancy in the x and y positions. In my codepen, I've commented out relative transforms (+=100) of x and y. These work, but it is not what I want to do - I'd like to move everything to the same absolute position. Does anyone know how to accomplish this? Thanks! ~Mike
  24. Hey there, I have been digging into SVG a bit recently, following some of the posts of people raving all about it. I have a decent understanding of the viewbox and the coordinate system, at the very least to know there are gotchas there. In the pen attached, I have some tests about scaling and the transform origin. It is interesting to see that if I try to scale a <g> tag it will default to the top left of that tag, not the 0,0 of the coordinate system. Also if I set the transform-origin to anything other than the default value, it will - for some reason, break the actual positioning of the <g> but not in a manner I would expect. But the same thing does not happen if I try to scale up a <path> element. I have seen Chris Gannon's SVG banner, haven't taken it completely apart yet and so, I would expect to find something interesting when I do. anybody with some insights as to why this behavior when manipulating the transform origin?
  25. Hey all! In the attached codepen, my tween causes the element in question (a red treble clef) to become huge before moving. Is there a way to stop it from jumping size and positions like that? As you can see in the codepen: setTimeout(function() { var clef = document.getElementById('Clef_0_1@1'); TweenMax.to(clef, 10, { x: 100, y: 100 }); }, 1000); The JavaScript only specifies a translation, but I get the sense that the original position is shifted first and it's clear that the original scale is obliterated. Many thanks for your help!