Search the Community

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

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.

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 !

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 ?

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?

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]

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.

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!

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.

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>

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.

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 ..

Any idea on how to animate the circle with DrawSVG plugin, from 360 to 0 forwards, and not returning backwards?

I have relatively big SVG that I'm animating with TweenLite - drawSVG. The problem is I can't make it going smoothly - it always being slow and intermittent first 1-2 seconds and proceeding fine on 3-4th second. I've tried adding delays to make it wait until the whole page is loaded, but it doesn't give much difference. Also tried renaming 50% of .style0 classes in SVG into another class and making it non-animated and visible from the beginning - not much difference as well, first 2 second of loading are still laggy. I'm looking for a way to make it smoother without editing SVG itself. I'm using the following code to animate it: jQuery(document).ready(function($){ TweenLite.set(".style0", {visibility:"visible"}); var tl = new TimelineLite(); tl.fromTo(".style0", 4, {drawSVG:0}, {drawSVG:"102%"}, "-=1"); TweenLite.render(); });

Hello!, My code: http://codepen.io/SavanaPope/pen/xGKKzY I am sorry that my attached Codepen will not work. I am not sure how, or even if, you can use codepen with referenced svg's in the manner that I have. I am testing with XAMPP and the above code does work in that context. I am trying to animate a parent container which contains a bunch of svg object references. I would like to create an earthquake effect which requires me to rotate "Land," VolcanoOutline," and a bunch of other svg's together as a group. They need to rotate around the same origin, which I want to be able to define through this parent container. I have done this technique before using a nesting system like the following codepen, which uses <g id="name">....children with their own id's......</g> to animate the tomato as one piece. http://codepen.io/ihatetomatoes/pen/VYLMrJ This works great because I can animate the group as a block as well as the separate id's within the group. The problem is that my animation has highly complex svg's and I would like to keep the html clean by referencing them. When I try to replicate the same grouping technique with my referenced svg object's, it does not seem to work like it does when you are using inline svg. Is there any way to use GSAP TimelineMax on a parent container which holds a bunch of referenced svg objects? Thank you so much if you can help me!! P.S. - I have attached the project as well if you want to try it locally with the svg's working. FurryJean.zip

Hey guys, I'm not too sure if I've simply been staring at this too long or if I'm just having one of those off days where simple math decides it's gonna kick my teeth in. I'm trying to animate the stroke-dasharray of an svg path with multiple dashes "chasing" one another through the path --similar to christmas lights that chase one another in a sequence. I've roughly figured out what I need to do here, but I can't seem to figure out a way to address a second and third dash to enter in. Basically, I need to start one, and then continuously check to see if the current dash(es) have animated far enough to start entering in the subsequent dash and similarly I think I'll need to check the same "offsets" when it reaches the end of the line. Anyone feel like taking a stab at a sane approach for this? If even just high level of how I might store some "mock" variables to watch in order to make the process easier, etc. As always any help is greatly appreciated! P.S. - A side note is I'm not sure why the ease isn't working on the "chase" (it's set to Bounce atm for ease of visually seeing if the ease is being picked up)

I have an svg animation (created with Blender). It is a chained animation that loops (repeatCount="indefinite"). I want it to play once and stop. Since it is a frame animation, setting to each animate tag's repeatCount="1" leaves the previous displayed. Can I use GSAP to send an endElement()? Is there a good way control the playback? here is a link to the svg: http://www.prime37.com/images/u1.svg

Hi all, I'm quite new to GSAP, but I'm really enjoying using it! I'd like to animate the anchor points on a path in an svg image, is this possible using TweenMax or a plugin? I've found another library (Two.js - https://jonobr1.github.io/two.js/examples/morph.html), which does this quite nicely, but I wanted to see if I could use TweenMax as an alternative. Thanks in advance!

Hi! I have a static svg that I add some content to from JS and then I move it a bit in a tween. I have mainly svg texts and svg rect-s with a gradient filled each with. The main idea is to slide the rect and then the texts to their final position. Well this works just fine with Firefox, but Google Chrome fails to move the texts. Although I am able to move texts with jQuery like $('.foo').attr('y', $('.foo').attr('y') + 100); but not with tweenmax. Any thoughts? Regards, Robert

Hi, I'm working on a new interface using SVG, GSAP and JQuery. I'd like a fluid interface with smooth interactions, and without staggered effects as you can see on this codepen (when the mouse move too fast between the plygons). I'd like something like this (each area back to its place before activating the new MouseEvent) but without the memory effect wich append a new Timeline each time the mouse is over a new area. I tried a lot of things like tl : new Timeline ({onStart:removeMouseEvent, onComlpete:addMouseEvent}) but the result is never what i want exactly. Is there a way to do that ? I hope I was clear enough, my english is pretty approximate. Thanks for reading and thanks for your amazing API.

Hi, I'm having some issues with some simple rotation animations in all browsers. They are inconsistently choppy and I do not understand why. I have done significantly more complex animations on other sites without any trouble, so I'm just puzzled as to what the issue is. You can view the animations here: http://guzu.looseygooseyart.com/home.php I am referring to the section that shows a box closing it's doors and then sliding off. At times it runs perfect and others not so perfect. My javascript for the animation is as follows: function Close_Doors(){ var anim_rotation = 135, anim_duration = 0.35, anim_easing = Power1.easeIn, anim_delay = 2.05; TweenMax.to('#left_door', anim_duration, { rotation:anim_rotation, transformOrigin:"bottom right", ease:anim_easing, delay:anim_delay, force3D:true }); TweenMax.to('#right_door', anim_duration, { rotation:-(anim_rotation), transformOrigin:"bottom left", ease:anim_easing, delay:anim_delay, force3D:true }); TweenMax.to('.package', 2, { delay:2.8, x:1000, ease:anim_easing, force3D:true }); } As you can see I am forcing 3d acceleration, which seems to be the "go to" solution throughout the forums.

First check this link in Chrome, Firefox and Safari: Jug Bug Notice in Chrome and Firefox it animates the scent on rollover... But in Safari it only animates a portion of the tweens. Specifically, the transforms do not work in Safari when calling TweenMax.fromTo(). Interestingly, if you create a simple TweenMax.to() tween, it functions fine. But if you use TweenMax.fromTo() or try to use TweenMax.set() right before calling TweenMax.to() then Safari will not animate the transforms... just standard properties. I assume this is due to the special SVG browser handling in TweenMax... Most likely it's a bug with TweenMax.set() because I assume TweenMax.fromTo() is just a helper method that actually calls TweenMax.set() before calling TweenMax.to(). Right?

So I've been struggling to figure out how to resolve this issue and figured there has to be some kind of resolution to this by now as I've seen people reporting this bug with chrome for years it seems like. I managed to get it working in Firefox and IE, haven't checked anything else. Although Ie has issues with unset SVG Widths and Heights so it seems like I need to setup a backup script to set that on load for IE. But this is driving me nuts. I just want to animate some simple clouds through a background. The only problem is the clouds are using an alpha mask which won't seem to animate. Also this isn't the final animation, I am just trying to get it to work before I spend more time on it. Any help would be greatly appreciated! Thanks.

Hello again! What would you think is the best way to animate a huge circle with GSAP? I've tried : Changing the width/height of a div with border radius (small to big) Changing the scale of a div with border radius (big scaled down to small and then scaled back up) Changing the width/height of a svg circle For example, http://plnkr.co/edit/vgmRe65FmzmzpcpHR7KM in full screen. But the animation is not really smooth on Firefox. I was wondering if my only option is to use a canvas element. Any ideas? Thanks

Hi, I am having an issue animating/tweening the width of a rect element within an SVG. When using scaleX with a percentage value, the rect animated perfectly, however the SVG stroke scales with the box, which is not ideal, I would also prefer to specify a specific value as opposed to a percentage. When using width with a pixel value (without appending "px"), the rect does not animate. If you inspect the element you will notice the animation being applied to the correct element, however the value being applied to the rect is specified in pixels with the "px" appended, which is not a value SVG elements recognise/respond to. I hope my explanation makes sense. If anyone can shed some light on this it would be greatly appreciated. Thank you.