Search the Community

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

I'm working on a site which will use like 7 slides in a kind of stair way. I was now trying to use Draggable for my navigation but I want to prevent the user to get lost. Since you can use type:x or type:y I thought I might get somewhere if I could change that type on the fly after Draggable.create. That doesn't seem to work. Maybe someone knows if that's possible or if I better can look for a solution based on a combination of tweens and scrollTo? To be clear an image attached of the layout. Every screen will cover the entire window.

Hey all! I've been doing a lot of animating along bezier curves and created a simple little helper tool/function that converts an SVG path into an array of cubic bezier points that can be plugged directly into GSAP Tweening functions. It's still missing a little functionality for quadratic and elliptical arc movements, but I haven't come across any issues with it yet converting SVGs saved out of Illustrator. Just thought I'd share in case anyone else finds it useful. http://github.com/mattanglin/svg-to-cubic-bezier I'll update to incorporate the other SVG movements (and cleanup the code. It's pretty quick and dirty at the moment...) as I have time. Any feedback welcomed. Thanks!

Please help. Despite many efforts this is not rotating the ellipses.. ive followed the same syntax which has worked before with other attributes being animated, and checked other codepens which seem to work! GSAP seems very sensitive to syntax, and the docs on line are not helpful... thanks

I have an object that is within scope of two tweens. I want to relatively tween a numeric property of this object in both tweens, however the tweens both seem to be making their own internal copy of the object during the tween and overwriting the object. Thus the resulting value of the object is equal to the value of the tween that finishes last and thus gets to overwrite the property the last. See my codepen for an example. How would I make these tweens compete against each other?

I am having some issues related to tweening HTML elements in 3d — specifically <li>'s in this case. I'm working on a site which is generated by PHP and have a menu generated for me of this type (the real menu is longer) <ul id="menu-main" class="menus menu-secondary sub-menu sf-js-enabled"><li id="menu-item-42" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-42" style="visibility: visible; opacity: 1; transform: translate3d(0px, 0px, 0px);"><a href="http://whatever.com/category/about/">About</a></li> <li id="menu-item-1350241" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1350241" style="visibility: visible; opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);"><a href="http://whatever.com/search/">Search</a></li> <li id="menu-item-47" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-47" style="visibility: visible; opacity: 1; transform: matrix(1, 0, 0, 1, 0, 0);"><a href="http://whatever.com/category/popular/">Popular</a></li> </ul> Wanted to fool around with some simple GSAP animation, and all works fine but I cannot get the li's to tween rotationX or rotationY within the jQuery hover callbacks. rotationZ works. If someone could point out the obvious point I'm missing I'd be grateful. initMenus(); function checkMenuItem(theTween) { if ($(theTween.target).hasClass('current-menu-item')) { tl = new TimelineMax(); tl.to(theTween.target,.25,{ease:Quad.easeInOut,scale:1.5}); tl.to(theTween.target,1,{ease:Bounce.easeOut,scale:1}); } } function menuover() { var tl = new TimelineMax(); tl.to(this,.25,{rotationX:'+=30deg',ease:Quad.easeIn,scale:1.5}); tl.to(this,.35,{rotationX:'-=30deg',ease:Quad.easeOut,scale:1.25}); } function menuout() { TweenMax.to(this,1,{ease:Bounce.easeOut,scale:1}) } function initMenus() { var tl = new TimelineMax({}); $('#menu-main li').css('visibility','visible'); $('#menu-main li ').hover(menuover,menuout); tl.staggerFrom('#menu-main li ',1.4,{onStart:checkMenuItem,onStartParams:["{self}"],alpha:0,x:"-=100",ease:Elastic.easeOut},.15,.1); }

So I have this idea to do an landing animation for my new website with svg animation. Where I'll have multiple parallax cloud layers animating. However, I am having issues getting the idea to work in all browsers, and can't even get it to work at all in CodePen for some reason. There has to be an easier way to do this kind of animation. I'm just looking to get pointed in the right direction here as I am getting frustrated trying to get this to work. The animation works in Chrome, but Firefox reports the initial position of the clouds and never updates for some reason no matter what I've tried with jQuery anyways. http://timherbert.net/sandbox/ I also accidently linked the private codepen. Here is the public one: http://codepen.io/timherbert/pen/vzuDr/

Hi again. I've started a beginner tutorial series for people looking to get started with HTML5 game development using jQuery and GSAP. Thought I'd link here for those who might be interested. I hope this is relevant, if not, feel free to moderate. The series will cover prototyping with JSBIN (substitute codepen, jsfiddle), animation (GSAP of course), basic collision detection and added particle effects with canvas. Part 1 covering prototyping and animation is fresh of the press and working on the collision detection next. Thanks, Andrew