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. Hey forum! I'm looking for strategies to animate between different SVGs with the same IDs for elements. For example, if I have: <svg id="svg1"> <circle id="foo" cx="50" cy="50" r="40" stroke="black" stroke-width="3"fill="red" /> <rect id="bar" width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" /> </svg> and <svg id="svg2"> <circle id="foo" cx="100" cy="20" r="70" stroke="black" stroke-width="3"fill="red" /> <rect id="bar" width="25" height="1000" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" /> </svg> is there a way that GSAP can recognize similar elements in the two SVGs and animate between them? I ask this because I am working with a piece of software (GNU LilyPond) that can create SVGs of musical scores with the elements id'd and I'd like to animate between similar scores that have just a few changes (for example, notes of different sizes, some notes higher, some lower, etc.). Otherwise I can write a parser that harvests this data from the SVGs and pumps them into GSAP's JavaScript API, but this is a bit of a pain.
  2. violacase

    Canvas or SVG?

    Hi folks, Not a specific GSAP related question I guess, but perhaps still a bit... In this forum a lot of focus is put on SVG manipulation and just a little bit on canvas. I would like to know what display 'system' javascript experts would choose in the year 2016 and why if they would start a blank web page project with lots of GSAP. SVG or Canvas?
  3. PointC

    SVG Path Builder

    Hey everyone , This isn't GSAP specific, but it came across my Twitter feed today and I thought it looked like a pretty handy little tool for creating paths without having to jump into other vector software so I thought I'd share it with the forum. http://anthonydugois.com/svg-path-builder/
  4. I've got a complicated background image that I want to move subtly. I was thinking I could morph it back and forth between a few different versions, with the same number of polygons, but slightly different points/colors. As far as I can tell (I'm new to GSAP) morphsvg will only take one svg element and morph it into another, but doesn't morph one full svg into another. Maybe I can loop through an array of polygons in the svg to morph, but I think that would take forever and really bog down the site. I don't have to use morphsvg of course, but I can't think of anything else really that would give me a nice slightly shifting effect.
  5. Hi, Can you help me to explain the reason why rotationX or rotationY 3D transforms are not applied to children elements of SVG (rect, circ)? This issue manifests itself only in Safari (Mac Safari version 8.0.5 (10600.5.17)) and Mobile Safari (iOS 8.3) AND only in GSAP TweenMax.js version 1.16.1 (linked from CDN or locally). View this Codepen example in Safari: http://codepen.io/Dima-L/pen/ZGGKqz – notice the linked cdn js file (//cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js) Here is an identical code where rotationY/X 3D transforms ARE applied: http://codepen.io/Dima-L/pen/ZGGKqz – the only difference from above is that here linked TweenMax.min.js is version 1.14.2 Is this in fact an issue with TweenMax.js 1.16.1 or is my setup wrong?
  6. Hi If you've read this thread you know I've been trying to animate SVG masks. From what I gather, this is only possible by manipulating the SVG attributes directly, not with CSS transforms – which makes it easy for things like a circle's radius, but less so for rotation. Here's how I've attempted to do it (you can check the linked codepen): tl.staggerTo(el, 1, { cycle:{attr:function(){ var a = {cx:0, cy: 0}; a.cx = Math.cos((tl.progress() - 0.5) * 2 * Math.Pi) * 20; a.cy = Math.sin((tl.progress() - 0.5) * 2 * Math.Pi) * 20; return a; }}, ease: Linear.easeNone }) The goal is to change the cx and cy attributes over time so that the SVG element moves along a circle. There are two problems: using cycle and attr in conjunction doesn't seem to work? The function returns an object that should look like {cx:..., cy:...} but it's not interpreted correctly. I suspect I'm doing something really wrong here that has to do with not knowing javascript enough... here I'm trying to use tl.progress() to calculate cx and cy depending on the animation's progress, but this approach doesn't work; the progress is always 0 when accessed within the timeline itself I think, since the calculations are made prior to it running. How could I make it update properly? Using an onUpdate function, maybe? Cheers
  7. Hi, I'm a designer by trade but I'm dipping my toe into the world of SVG animation, forgive me for the messy code! What I'm trying to do is animate the individual elements of the SVG (Mountain1, Mountain2, Mountain3 and Flag). I'm trying to clear the stage by moving all of these elements downwards out of sight, I want them to pop-up into the scene. I've already applied a clipping mask FYI. Any help on this will be hugely appreciated! Thanks, Jimmy
  8. Hi everyone If you've been following my threads: this is the last bit of animation that I need to do, the thing that I picked GSAP for... animating SVGs. Up until earlier today I was having trouble implementing this, but... it was totally my fault, some sort of typo among the variable declarations messed it all up. Whoops... Anyway, I fixed that and got the animation to work in Chrome just like it did before I moved to GSAP! So I switched over to FF where it was having issues, and... well the same issues are still here? It seems you can't change the transform-origin of masks in Firefox (or IE, for that matter)? Check out the (fun) pen I made to illustrate the issue. It works perfectly in Chrome, and when you open it in FF you see that the transformOrigin var isn't working. Ideas on how to fix this...?
  9. I've got this scene where a scale and transform-origin are being used together. On Safari the effect never takes places and I know of a hacky way to fix this, but wondering what a better solution would be? Here is the code I'm discussing. tl.to(worm, 1, { scale: 1, transformOrigin: 'bottom center' });
  10. Hello All, I successfully created a self contained SVG ad banner with Tween Max as per Chris Gannon's fantastic tutorial https://www.youtube.com/watch?v=S6P_N2JWSrc (Thanks Chris!) My test works in the browser but not in WordPress. Has anyone found a way to get WordPress to play nice with self contained SVGs? This would be an ideal way to deliver ads to WordPress clients without needing to supply all dependencies. Thanks. Janet
  11. I know this has been asked in the past and that you need the SnapPlugin to morph svg paths. But I though I saw a tweet the other day between GreenSock and Sara Soueidan about this being include in v1.18 but it was undocumented. Maybe I'm crazy. Is there now a way to morph shapes with just the GSAP library? Ex. shapes: <path d="m 14.201849,1.5439136 0,4.2992953 -8.2513192,8.6128771 -4.1523786,-4.022205 0,-4.2992963 4.1523786,4.0222073 z" /> <path d="M 3,3 7.5455556,3 13,7.9995 7.5455556,13 3,13 8.4544444,7.9995 3,3.0000001 Z" />
  12. Hi all, In the codepen attached I have a menu prototype that i'm building. As you can see there are a few actions on the hover state of the red open / close button. I have a timeline firing the circles behind the actual hit state and a separate action firing the SVG path state. The thing that's really bugging me and i'm at a serious loss to figure out is that once you click the open button and the timeline to open the button fires - the hover state stays in the position the button was originally (unless you move the cursor then the SVG goes back to it's normal state and the timeline to show the circles reverses. I'm not sure this is directly a GSAP question, but if any of you kind souls could please assist me - i'm going crazy here! Cheers
  13. Greetings I'm trying to change the color of an SVG but it appears this functionality is not supported or I'm doing something wrong. here's what I've tried arrow is the name of my svg, and tweening width/height works but not color changing TweenMax.to(arrow, 2, {fill:"#ff0000"}); TweenMax.to(arrow, 2, {color:"#ff0000"}); TweenMax.to(arrow, 2, {css:{fill:"#ff0000"}}); Can anyone please point me in the right direction? Thanks
  14. I have an issue in Firefox. The timelines are not playing. If you click on 'Start X-Ray/Calibration' and 'Select Start' and any of the steps below, a timeline should play. It works great in Chrome and IE, not Firefox. I am using SVGs (mainly for positioning and scaling) and basically just showing and hiding elements within SVGs. An example of the code in question is: TweenLite.to('#glow1, #glow2, #glow3, #startBtn2, #okayBtn1, #okayBtn2, #stopBtn, #calibrate, #yesBtn, #operatorBtn1, #barHighlight', 0, {autoAlpha:0}); var popover1 = new TimelineMax({paused: true}); popover1.fromTo('#glow1', .3, {autoAlpha:0}, {autoAlpha:1}) .fromTo('#glow1', .2, {autoAlpha:1}, {autoAlpha:.3}) .fromTo('#glow1', .2, {autoAlpha:.3}, {autoAlpha:1}) .to('#glow1', .2, {autoAlpha:0}) .to('#baseImage1', 0.4, {autoAlpha: 0.3}) .fromTo('.col-9', .4, {background:'rgba(180, 180, 180, 0.0)'}, {background:'rgba(180, 180, 180, 1.0)'}) .fromTo('#popover1', .8, {autoAlpha:.15, scale: 0.08, x: 679, y: 174}, {autoAlpha:1, scale: 1, x: 0, y: 0}) .to('#stopBtn', .2, {autoAlpha:1, scale: 1.5, delay: .5, transformOrigin:"center center"}) .to('#stopBtn', .2, {autoAlpha:0, scale: 1, delay: .5, transformOrigin:"center center"}) .to('#stopBtn', .2, {autoAlpha:1, scale: 1.5}) .to('#stopBtn', .2, {autoAlpha:0, scale: 1, delay: .5, transformOrigin:"center center"}); $("#overlay20Link, #dotNav2 .page20").click(function(){ TweenLite.to('#popover2, #popover3, #popover4, #popover5, #popover6, #popover7, #popover8', 0, {autoAlpha:0}); popover1.restart(); yes.pause(); calibrate.pause(); popover2.pause(); popover3.pause(); okay2.pause(); }); Other GSAP animations run fine on the same page, it's just these timelines triggered with restart(); that are not working... navigation.js also contains GSAP code for global controls... Any suggestions? Thanks in advance!
  15. Hi all, Apologies for a very green question here but I've searched through the interwebs and the forums here and can't seem to land on an answer (unless I have already and just didn't recognize it...) I'd like to explore the DrawSVG plugin to animate the outline of a word, much like the example used on the DrawSVG page here. However, I'm not clear on where/how the original illustration is created - in Illustrator or purely in code? Is the graphic first drawn in illustrator, exported as an svg file and then animated with GSAP? When looking at the source files for this tutorial, I don't see any Illustrator files, just the svg code in the html. Is this being drawn with coordinates and then animated? Likewise, when inspecting the source for the DrawSVG banner, the green-caped greensock illustration is composed of several "path class="gray-line"" lines - was this logo first created in Illustrator and the coordinates copied in Illustrator somehow? Again, apologies for what I'm sure is a simple answer via my verbose question but I'm not sure where to dive in so I can start animating. Any help is much appreciated!!
  16. Greetings to all, So I am trying to make a sort of trickle down effect in an svg. I have a open medicine capsule and I want the granules coming out of the capsule to fall down like a waterfall effect. Although I have tried making this effect using 'y' and fade with yoyo, It doesn't look very realistic. Can you give me some pointers on how to make this better? Thanks!!
  17. Hello to all! Total noob at GSAP. I'm trying to make a loader (as you can see in the codepen is a carrot), and while it's loading the leaves in top of the carrots will have a wink effect. But I cant figure out how I can make the rotation smoothly! The timeline is: -15deg and then 15deg I tried to add one more tween for 0deg but without success, also I tried the yoyo but the same bad result. With CSS I would just add "alternate" on animation shorthand and "infinite". Thanks
  18. Why for example animating the fill attribute of an element inside a <symbol> has no effect but manipulating it once using jQuery's attr() function has?
  19. I'm having in issue where DoubleClick is throwing an error when uploading a standard banner with inline svg; to DoubleClick Campaign Manager. It seems to have proplems when the inline svg references clip paths and fills using url(). The SVG that illustrator outputs has two parts in it where I'm using a basic mask and a gradient fill. Like this: clip-path:url(#SVGID_2_); fill:url(#logo_1_); When you upload the banner DoubleClick detects those two as url requests and looks for files named "#SVGID_2_" and "#logo_1_" which obviously don't exist because the are references to ids in the inline svg code. DoubleClick throws and error saying there are missing files. This is basically putting a halt to wrapping up what was a finished banner until I tried to upload it. Has anyone else experienced this and found any work around? I'm doing some pretty basic stuff with SVG here so it is rather disappointing to run into this. Thanks.
  20. For some reason Firefox Stable on Mac Yosemite appears to be somewhat choppy when it comes to the orbs floating animation in the pen shared. Any suggestions for improving that sequence or thoughts on why Firefox is reacting the way it is? My setup is very straight forward: var bezier_topleft = [ { x: 0, y: 0 }, { x: 5, y: 12 }, { x: -4, y: -24 }, { x: 1, y: 24 }, { x: 5, y: 0 }, { x: 0, y: 0 } ]; tl.to(node, config.duration, { bezier: { type: 'thru', values: config.bezier }, onComplete: function() { fire(); }, ease: Linear.easeInOut });
  21. I've got a great SVG animation almost ready to share but need some last round tips. My code has been refined plus the integration of pointers Blake gave me in a previous thread, but it seems I'm having difficulty pausing the orbs when they reach the end of their individual bézier paths (i.e. x: 0, y: 0). Any advice? When each brain wave signal fires from the orbs the wave should be firing when x is 0 and y is 0 just to repeat myself if I wasn't clear. Thanks!
  22. Trying to create a floating orb effect where each orb bubbles in and then sends a transmission to the child's brain. Each orb will send a transmission at different times, but avoid being close w/one another in terms of the actual transmission sequence. At some point during the entire animation the orbs that send the signal in diff. intervals eventually sync up. What would be the best way to control the transmissions from overlapping one another? BTW it is required that each orb float all the time even when another adjacent orb is transmitting.
  23. Hey there! I'm having an issue rotating an SVG element from its center. I know that it's one of GSAP's strengths to take care of the complexity behind transform-origin for SVGs and I never had this issue before. Basically I have an infographic SVG that has 4 main circles with illustrations and I want to rotate them a bit on hover with this: jQuery("g#weight-lifting-p, g#sprinting-p, g#cardio-p, g#walking-p").hover( function() { TweenMax.to(jQuery(this), 0.2, {rotation:15, transformOrigin:"50% 50%", ease:Back.easeOut}); }, function() { TweenMax.to(jQuery(this), 0.2, {rotation: 0, transformOrigin:"50% 50%", ease:Back.easeOut}); } ); The strangest thing is that it works for g#weight-lifting-p, g#sprinting-p, but the other 2 won't rotate from their center in Chrome and Safari. All 4 work perfectly in Firefox and I can't tell for IE because I don't have any way to test it there. They rotate with a transform-origin that's wrong. It almost feel like something is wrong with my SVG that confuses GSAP or Chrome/Safari? I exported the SVG from Illustrator. I had a designer create it and it works with a legacy version of Illustrator, but I put the finishing touches and did the SVG export from the latest Illustrator CC. I tried exporting with different options, still no luck. I also looked into the SVG code around one shape that works fine and one that has issues, but everything seems consistent. My SVG starts out like this <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 612 1010.4" style="enable-background:new 0 0 612 1010.4;" xml:space="preserve"> And I use jQuery to load the SVG like this: jQuery( document ).ready(function() { jQuery("#staging").load('http://paleoleap.com/infographics/exercise-infographic2.svg',function(response){ I'm not sure if I'm doing something wrong, but like I said it's the first time that this happens, because normally doing any transforms from a transform-origin of 50% 50% works like a charm with GSAP. If anybody has any idea why this is happening I would greatly appreciate. Seb
  24. Hello everyone, I am just getting started to use GSAP to animate SVG graphics. I want move a 'leg' and yet the shank separates from the 'leg' in moving. The key codes are: " TweenLite.to(leg, 1, {rotation:"-30",svgOrigin:"155 150"}); TweenLite.to(shank, 1, {rotation:"30",svgOrigin:"155 250"}); " Though I think it is the problem of maintaining the status of matrix of the shank, I do not know how to fix that. Somebody can help? Thanks.