Search the Community

A warm hello to all of the community! (Apologies if the preamble's a little boring, you can always just skip to the heading below where I'll start cutting the mustard.) I'm Alex, and I started using GSAP a few months ago, after immediately falling in love with its robustness and sheer performance. It was at that very time I started my new job, and it was time to start using GSAP in all of my front-end projects I decided. So, I posted about one or two things here on the forums, and was further overwhelmed by the quality of support provided from GSAP's developers, and other members of the community. The weekend before I started that job, I spent the whole time beginning to write a little library that'd allow me to easily make calls to GSAP with some pre-determined transitions I find myself using a lot in my projects. It was largely an exercise in using GSAP and I thought it could be helpful to me in future. As I went along, using it in development, I encountered bugs and realised that I needed to add many features and improve a lot of aspects of it for it to "just work". So, I kind of flew by the seat of my pants with it and bolted in new things or fixes and continued to use it in development. Since then I've been using it in 'live' releases (i.e. other people have been using the projects but thus far they're internal), and I haven't encountered any major issues. Though there is a lot of work and improvement I know I would do if I had the time. Anyway, it has ultimately saved me loads of time and been a pleasure to use, since I can quickly adapt the transitions I'm using, I don't need to repeat large chunks of code spuriously through my different projects, and it's designed to be very easily intelligible to people who haven't even used it before (or GSAP.) To quote Jack, "But in fairness to Julian, he really wasn't trying to build a tool that's as robust as GSAP - Velocity is more for simple UI animations in the DOM.", the thing I like to be able to do is harness GSAP's power and flexibility where necessary, but also make simple UI animations in my projects. Since GSAP is clearly the most performant/cross-browser animation suite available for the web, those benefits are important even in the websites I make, where I can often be using things like Skrollr.js too, and require backwards compatibility to the older, often nasty versions of IE. So that's the purpose of QUI really, and I hope other people find it useful Without further ado I've made it available as a project on GitHub, it can also be installed via Bower and it uses GSAP as a dependency, so if you have those tools installed and are a little familiar with the command line it can be added to your project in no time. I'd love it if people made pull requests and possibly even helped motivate me to think more about this project. I would say at the moment it's still very usable for most purposes, but I know that some of the transitions haven't been updated since I better learned how to implement them. I haven't yet written documents for the project, though I am planning to this afternoon. I'm going away tomorrow and I need to pack etcetera but I think I'll have time anyway. That'll probably make a big difference, so I'll post about that when I have done. Seriously, there are tonnes of things I know I could do to improve this, but I figured if other people had a tinker it'd happen a lot faster. The main thing for now I suppose is it works and seems to add very little overhead to my projects, both in terms of loading times and execution. GitHub page: https://github.com/Quasso/qui GitHub site (it's a small demo): http://quasso.github.io/qui/ Install via bower: bower install qui (--save-dev) Really looking forward to hearing any feedback anyone may have. Docs soon!

I had a need for controlling a sprite-sheet, with pause, play, and go-to-frame functionality. Also needed practice creating jQuery plugins. The result is jquery.gsap.sprite.js. Gitub: https://github.com/agrothe/jquery.gsap.sprite Demo: http://jsbin.com/quvuzo/6/edit?html,js,output Sample Usage: var mark = $(".mark").sprite({ frameWidth: 24, frameHeight: 70, sheetWidth: 120, imageSrc:"https://dl.dropboxusercontent.com/u/6801572/marksprite.png" }); // Pause the sprite mark.sprite("pause"); // Play the sprite mark.sprite("play"); // Resume the sprite from where it was paused mark.sprite("resume"); // Restart the sprite from the beginning mark.sprite("restart"); // Stop the sprite mark.sprite("stop"); // Goto first frame (0 indexed) and stop mark.sprite("seek", 0, true); // Goto thrid frame (0 indexed) and stop mark.sprite("seek", 2, true); // Goto thrid frame (0 indexed) and continue mark.sprite("seek", 2); A few advanced features are overrides for TweenMax and TimelineMax libraries, as well as passing in your own Timeline object for maximum control. Comments and suggestions more than welcome.

Not sure if this should be Flash or JS, but its a crossover project. I've recently been working on a big campaign, that uses a large amount of character animations, and our team was using a mixture of Flash and After Effects to achieve these great animations. Then came the mobile placements, and I found that the actual delivery platform itself had no support for canvas or easelJS and barely any SVG support. So I ended up creating spritesheet animations using CSS and manually setting up frame by frame animations in Illustrator, the problem was now that these animations didn't match what the rest of the team was doing in Flash. So I looked into exporting the spritesheet from Flash itself so it would capture frame-by-frame movements, but the issue was Flash Spritesheets place the character in an X and Y fashion, rather than all being on 1 line. I played around with a Codepen to make it work and used the onUpdate ticker to make it work with an array of all the possible background positions. Then I thought, why not make this an export option straight out of Flash? Its a little work-in-progress, but I hope this gives an idea of what I wanted to achieve. It just exports out a HTML page that uses GSAP to animate the background position from an array dataset. https://gist.github.com/joemidi/87168087b5c0eae36e86#file-gsap-spritesheet-plugin-jsfl

I have been working on a 2d/3d transition effect module, and I have been running into some issues integrating with gsap (TweenLite). Most of the Tweens require updating on every $("window").resize() function if they have any media queries. Unfortunately I have been running into issues overwriting TweenLite.to's that involve rotations. A good example of this is a simple "hamburger" icon animation. In the below codepen is a decent example of the issue. If you resize the window while the button is in the X state (or navState = 1) the rotation tween acts as though its stuck in the tween.progress=0 state; http://codepen.io/anon/pen/MwYmVW By changing rotationZ: to rotation: the tween rotation get stuck in the tween.progress=1 state. http://codepen.io/anon/pen/MwYmxa If anyone can shed some light on this issue it would be much appreciated. Thanks, Daniel

Hi everyone, first of all, this is my first day using gsap and I am like a child ! Awesome plugin. Aaand I just Edit it because it was a really stupid question when you search a little more. I am very sorry. At least this is my first post in this forum.

This question has probably been asked, but my searches have not turned up anything of value yet. Basically I have an animation sequence that will be used on multiple timelines. Is there a way to 'package' a unique timeline and apply it to others? An example I might come up with is the flapping of a birds wings (I'm not writing that btw). The sequence I might use to flap the wings could be generally applied to a number of wing images, and bird bodies. Apologies in advance if this noob question has already been addressed.

I was bidding on a project today and requested to use GSAP as my Javascript animation engine (they had originally said CSS transitions). The one question they had was 'how far back' GSAP goes — that is, will it work in IE9, IE8, and other older browsers? I had never thought of this and didn't know the answer. Also they wanted to know if GSAP 'degraded gracefully'. If GSAP doesn't work on all older browsers, how do I handle that? I know Modernizr can be used (or could be used) to provide fallbacks, but I don't know that it has a test for Greensock. What would I test for? Are there polyfills? Thanks for any info!

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.

Hey, i cant seem to find a way or an example of how to replay an animation like this one, any help would be highly appreciated Heres a link to codepen of the animation i want to restart on hover: http://codepen.io/acronamy/pen/QwmdBL

After a lot of back & forth regarding animation on a current project, I whipped up an export script to translate After Effects CC compositions into TweenMax/TimelineMax documents. I'll be adding more documentation & examples, but if you'd like to give it a try, you can find the script at: https://github.com/Meandmybadself/AfterMax

[sEE CODEPEN] I'm trying to make an easy way to implement multiple views on a single webpage using HTML5 GSAP animation. So I declare an object constructor "pageElement." Inside I have a method that triggers an animation based on object properties declared earlier in the constructor given if I want the object on or off screen. The code throws an error [sEE ATTACHMENT.] Essentially what the error tells me, is that within the GSAP declaration, it does not accept methods within methods (method-ception). I hope there's some error in my code... This would be awesome. Anyway, thanks for taking a look, and have an awesome day Jacob Alford @jacob_alford

Hi, I am newbie to GSAP, I've read the documentaion http://greensock.com/docs/#/HTML5/GSAP/TweenLite/ Here I see the play, pause reverse all the stuffs for tweenlite. So. I am trying to add multiple elements, like doing it in timelinelite. You can check the code pen url(used tweenlite JS not timline). Play, pause, reverse those stuffs work only for the single object tweens, or we can add multiple tweens in the tweenlite. When I try to add another tweens, animation is working but in console is throwing an error says that undefined is a function and duration info is not printing. So, kindly help me, whether am doing the right thing or not.

Hello All, In my attached file, I have tried to modify a simple slider as per my requirement. But, when I slide the slider, the target image gets displayed only after slide animation is finished. Can someone help? Also on mobile, it is sliding very slowly. Please help. I have attached my file for your reference. index.html

Hi there, I've been using TimelineLite and TimelineMax. Recently I noticed that the file size in my network inspector was much larger than advertised when including the CDN links from your site. I use GSAP as an alternative to jQuery in some instances due to the faster performance and the smaller download size. TweenLite + CSSPlugin | 15kb --> Actually 60.06kb TweenMax | 23kb --> Actually 99.63kb Why are these files so much bigger than advertised? It is a problem for me.

Hello! I have a little problem with Draggable Plugin and the snap option. draggable = Draggable.create(__that.$slideshow, {type:"x", edgeResistance:.5, throwProps:true, lockAxis : true, bounds:__that.$bounds , snap: { x: function(_x) { var newX = (_x / __that.totalFlowWidth) * __that.totalFlowWidth; return newX; }, } }); In the above example, totalFlowWidth represents the total width of my container. The problem is that the value are correct but the snap tween is not launched in the return. When i put a number instead of variable newX, it works. When i switch to newX (which return a number value), nothing happens. It's very weird. Need some help. Thx

Hey guys, Quick question that's been bothering me. Is there any way to have multiple values for repeatDelay? Example: Animation plays for 5 seconds 2 seconds delay Animation plays for 5 seconds 5 seconds delay ... Thanks, Marko

I saw this tweet today: https://twitter.com/MiguelCamba/status/560806390210363393asking about whether the Web Animations API will ultimately make GSAP obsolete, so I figured I'd offer a few quick thoughts here and invite others to chime in if they'd like. For those who don't know, the "Web Animations" spec I'm talking about is described here: http://www.w3.org/TR/web-animations/ I think it's a great initiative by some browsers to address quite a few major deficiencies in the current crop of animation technologies that exist inside the browser. For example, if the spec is adopted, you'd be able to create tweens and timelines that have a lot of the controls that GSAP users have enjoyed for years (play(), pause(), resume(), reverse(), etc.). Awesome. Big step forward for the native browser. Web Animations also aims to unify some pieces of SVG animation capabilities and CSS animation capabilities. Again, bravo. I have spoken to some of the editors of the spec (super smart, and super nice guys) who have consistently maintained that they don't see Web Animations as competing with tools like GSAP. Instead, they're intended to be complimentary. They recognize that tools like GSAP offer a lot of sugar on top that makes things far more practical for real-world animators. So if Web Animations get adopted by all the major browsers (and that's not guaranteed - only Firefox, Chrome and Opera have said they'll adopt them last time I heard), tools like GSAP could leverage them under the hood where appropriate to potentially get a speed boost or additional capabilities. Excellent. Why not just use Web Animations instead of GSAP? I don't mean this to sound critical of Web Animations, but since we're being asked to explain why/where GSAP fits in, allow me to point out a few important factors to keep in mind: Animate scale, rotation, skew, and position independently - this is a BIG deal for real-world animators, and since the Web Animations spec is built on top of the CSS spec which shoves them all into a single "transform" property, it's impossible to manage them in a truly independent fashion. GSAP, on the other hand, makes it easy. I had a long talk with the editors about this a while back, and although they really wanted to find a solution, none of us were able to find one because of the need to maintain backward-compatibility with the CSS spec. So a tool like GSAP is necessary to get robust independent control. Transforms are definitely the future of animation because they can be GPU-accelerated and don't affect document flow (better than "top" and "left"). Compatibility - GSAP works back to IE6. Web Animations aren't fully implemented in any browser today, but are partially implemented in Chrome and Opera. Microsoft may never implement them. Not sure about Apple either. There is a polyfill that's considered "beta", but when I tested it there were huge performance problems and garbage collection bugs that crashed the browser in my tests. It didn't seem ready for production use. Keep in mind that the spec itself is in flux, so you may write code today that'd break when the spec gets finalized. Works beyond the DOM - GSAP can be used to animate pretty much anything JavaScript can touch including canvas library objects, generic objects, or whatever. The Web Animations spec is for DOM elements. Solve SVG (and other browser) bugs and inconsistencies - GSAP solves problems with things like transform-origin behavior and harmonizes it across browsers. See http://css-tricks.com/svg-animation-on-css-transforms/Web Animations don't solve problems like that. GSAP "just works" where standards fail. Plugins and conveniences for real-world problems - there are all sorts of problems that animators face and GSAP solves. The spec won't do that. For example, overwrite management, physics, scrolling, relative values, directionalRotation (clockwise, counter-clockwise or shortest), rounding, labels, etc. More easing options - GSAP offers RoughEase, SlowMo, and more. See http://greensock.com/ease-visualizer/ One of the biggest promises of Web Animations is that it'll tap into the browser's native power to make things perform better, like layerizing things and shoving them to the GPU efficiently. I sure hope that happens and that it translates into real-world gains. GSAP already does some of that by leveraging 3D matrices during tweens, although I'd bet it could be faster if it was done directly by the browser. The problem is that in tests I've done with CSS animations (which use the same engine under the hood), they really weren't much faster in most cases, and JS was often faster. I know, it sounds crazy. JS execution is super fast these days (when written well). But if the browsers do indeed make things faster with Web Animations, that'd be amazing and GSAP can just tap into that under the hood. Again, I don't mean to criticize the Web Animations spec at all - I think it's a cool initiative and I hope the browsers get better and better an animation. The more tools they give us, the more GreenSock will leverage them and create even more refined tools for that special breed of top-notch animator out there who needs to solve real-world problems. GSAP + Web Animations could be a great combo eventually. And I'm confident that Web Animations won't supplant GSAP. Feel free to correct me about any assertions above. I'm admittedly no expert on the Web Animations spec.

I have been trying to work using the skewX and skewY properties. For some reason skewY has been acting very strange, although skewX seems to work fine. Here : http://codepen.io/praneybehl/pen/lkhFn Is this a bug? Thanks, Praney

Has anyone created a Durandal transition using Greensock? They have some basic instructions (http://durandaljs.com/documentation/Creating-A-Transition.html) and a very complicated sample (https://github.com/BlueSpire/Durandal/blob/master/src/transitions/js/entrance.js) but I don't know how to translate this to the GSAP world. For one thing, the transition module must return a promise. I have a pretty good idea of what a promise is but am, again, unsure of the GSAP code to make this happen. If anyone has any example code that would be most helpful — or some pointers. Thanks!

Hi i'm trying to create stagger effects on my app dashboard, but the problem is i follow all the documentation guide lines, but there is no way to create Stagger that trigger different directions. only the given parameters and all object stag to the same pattern, but i need to stagger it from different directions. eg : Use case scenario that i'm trying to archive. 1). Top bar comes in document top position 2). Sidebar comes in right side 3). Body element comes in bottom and so on.. i know i can use Timeline Max for this situation, but i need to create this from stagger Effect for re-usable purpose. and trigger from click event

Hello, how much does the different GSAP components really weigh? When you download from the greensock CDN, it says: But when I look in the chrome network inspector, I see: TimelineLite weighs about 11 kb and TweenLite weighs 25kb compared to 6kb like it says on the greensock website. What's up with that? I suppose that I should trust the network inspector, but I really want to believe that it only weighs 6kb (which seems way too good to be true). Thanks! /Alex

I am trying to rotate an element(button) counter-clockwise 90deg using TweenLite. It is working fine in chrome and firefox but misbehaving in IE9. Expected behavior is that it only rotate but in IE9 along with rotation it is changing is position also. This behavior is consistent in IE9 and is produced only in special case, with simple rotation test in IE9 the behavior is as expected. Here is a video for reference (notice the button labeled button 17): http://screencast.com/t/waaEX1NxWcTd The HTML of button looks something like: <div data-id="animWrapper_spin9ivgo7os" style="height: 11.2%; width: 8.65979381443299%; position: absolute; top: 17.6%; left: 67.5257731958763%; z-index: 8; -webkit-perspective: 400; -webkit-backface-visibility: visible; -webkit-transform-style: preserve-3d; display: block;"> <button checked="checked" tagname="BUTTON" src="" srcsize="0" srcduration="" srcformat="" domstyle="[object Object]" name="button 17" class="button adelem" data-id="9ivg" adtype="button" style="width: 100%; height: 100%; left: 0px; top: 0px; z-index: 8; -webkit-perspective: 400; -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d;">button 17</button> </div> The rotation is applied to the div wrapping the button [data-id=animWrapper_spin9ivgo7os], which is inside another iframe. I am unable to reproduce the error in simple page. Please help me if someone know what could have been the reason.

Hi there. I am trying to setup doubleclick with GSAP. However, when I add the enablers and etc, it causes my ad to freeze. I created a codepen. Please let me know if you see something obvious that I'm doing wrong. Thank you!

Hi there. I'm working on developing a demo to present to my company tomorrow on the wonders of GSAP. However, for some reason, on my company network, my ads aren't displaying. Here is an old ad that i made that I made as a demo that I know worked before, yet is showing as blank. http://simplisticallycomplicated.biz/portfolio/2013/01/09/dsg-ad-created-with-html5-animation/ Here is my new code that I'm working on, super simple, yet the tweenlite calls aren't being made. You can see I'm linking to the JS files, locally, even. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style> #adcontainer { width:300px; height:250px; overflow:hidden; border:1px solid #A7A7A2; background-image:url(../images/background.jpg); } #gearup { font-family: Anderson 1938, Verdana, Geneva, sans-serif; font-size:56px; text-align:center; color:#fff; opacity:0; } </style> <title>Snowsports HTML5</title> </head> <body> <div id="adcontainer"> <div id="gearup">GEAR UP</div> </div> <!--- The following scripts are necessary to do TweenLite tweens on CSS properties --> <script src="/js/CSSPlugin.min.js"></script> <script src="/js/EasePack.min.js"></script> <script src="/js/TweenLite.min.js"></script> <script> window.onload = function(){ TweenLite.to("gearup", 1, {alpha:1}); } </script> </body> </html>

I'm using Greensock animations for a web app I'm developing. On iOS, desktops the scroll animation plays really smooth, there's no problem. On Android browser things get complicated. On some devices it plays good(Nexus 5, Galaxy S4) on others it's choking(Nexus 7) I've tried setting the z property(TweenLite.set(element, {z:0.1}) , using x, y instead of top, left but nothing changed. I'm wondering if there's anything I can do to speed up GSAP on android browser. Any help is appreciated. https://dl.dropboxusercontent.com/u/4605534/examples/ztyga_gsap_test/index.html