Search the Community

Hey, guys. I'm having some trouble moving my CSS3 animations to GSAP. I'm new to this animation library so bear with me. I have several elements starting off-screen and dropping downwards into their final resting places. Each element has its own unique CSS transform string, containing some or all of the following: perspective, rotateX/Y/Z, and skewX/Y. My first attempt was to use from() and have GSAP do all of the heavy lifting interpolating from a base state I defined in a JSON object to the state defined in my CSS transform strings. Unfortunately, I couldn't get any 3D transforms to occur; only the vertical translation. In other words, the elements would move but would look out of place since their final state had no rotation or skewing present. I posted a question on SO and Jack recommended I move away from these transform strings entirely and use GSAP native animation properties. (He also pointed me to these forums.) So, I switched from, ah, from() and moved to, uh, fromTo(). I explicitly defined the initial and final states in JSON objects and handed them off to fromTo() for animation. I used my original CSS transform string values (i.e. transform: perspective(400px) rotateX(39deg) etc etc) in my GSAP state objects (i.e. 'transformPerspective': 400, 'rotation': 0, 'rotationX': 39). Unfortunately, the end result is fairly different from the pure CSS transform version. I came up with two fiddles to demonstrate the difference: Pure CSS: http://jsfiddle.net/nLohzgzb/4/ Pure GSAP: http://jsfiddle.net/fuoch37v/ Note that the animation itself is different (no "blowing in the wind"-type effect) and the end results aren't identical either. I'm sure I'm just doing something wrong or missing something obvious. Could someone point me in the right direction? Thanks.

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>

Hello in the given pen i want to achieve : 1) Only the elements inside the circle area to be visible with ease effect of gsap.i.e on increasing the radius they must appear onto screen via gsap and on decreasing similarly should disappear 2) the elements to appear or disappear should be draggable with the container as the max limit of circle. 3) the elements should be clickable. 4) the circle opacity should be reversed i.e right now it is rgba(0,0,0,0.8) inside the circle i want it to be outside the circle so as to give the selection effect waiting for help. Thank you

Hi guys, today i was trying to reproduce a kind of fountain effect made of div with the following concept: Create a javascript array Push a div into the array Initialize its position with css wherever you want Move the dive like a water spurt Repeat with setInterval Well as you can see it's quietly easy, not that complicated but i was wondering how can i realize the fountain effect? well i mean, which kind of function do i have to use to give my animation this effect? Here's an example of what i'm trying to reproduce. http://cssdeck.com/labs/html5-canvas-fountain-exploding-particles-with-gravity Note: the previous example is realized using a canvas, i'd like to reproduce it without canvas, only using divs, jquery and the TweenLite library. TL DR: Which is the function i should use to reproduce something like that: http://cssdeck.com/labs/html5-canvas-fountain-exploding-particles-with-gravity using the TweenLite library?

Hello I want to create a animation in which following events occurs 1) A custom horizontal scrollbar on the bottom of the page,this bar ro remain constant and do not move 2) A horizontal navigatable website( using magicscroll.js) 3) All the animation is related to horzontal scroll movement of the custom horizontal bar Animation required 1) As soon as i move the below horizontal bar the #cover div should reduce the opacity for the radius and the div behind it should be visible. How is this animation achievable using GSAP. Please help I am a newbie to GSAP

Hi guys, today morning i was reading the "get started page" on the GSAP web site, i was finding it really interesting, then i decided to try it. But as soon as i wrote my code and launched on google chrome, it didn't seem to work at all. Then i started wondering if there were some problems with my browser even because i tried the same code on CODEPEN (http://codepen.io/RyanLeenox/pen/EjWNRg) and it's working perfectly. So my question is, what to i have to do, to run the code on my browser? ps. I'm new here, this is my first post and i really hope this is the right section, these are the right topic tags, if not i'm really sorry about it.

hello, thanks for this awesome GSAP i have one question, a simple code as below var tl = new TimelineLite(); TweenMax.set($a, {autoAlpha: 0, display: 'none', top: 100}); tl.staggerTo($a, 1, {autoAlpha: 1, top: 0, display: ''}, 0.2); tl.play(); staggerFrom seem better for my code but i cant get it work, i will try again late so now i set the $a property by TweenMax first. if i set the property by css file not by TweenMax, and then play with TimelineLite, will i get the nice performance from gsap too? e.g set translate, opacity, z-index, scale etc any different between set property from css / TweenMax? which one is better? sorry for my language skill, thanks so much

I'm not sure if it's a bug but the latest Chrome under iOS 8 (old iPad2) behaves different than Safari while swiping/dragging content. Can be something in GSAP as well but guess it's Chrome for now. If you drag/throw a page while your finger leaves the screen the throwprops plugin detects you left and just does what it's supposed to do. Well, that's for iOS Safari, Chrome does the same except if you leave the screen while you swipe to the top and leave screen while swiping over the it's browser bar. If you do so the draggable/throwprops will just stop moving until you drag within the screen again. It's annoying since with my navigation you have to swipe/drag/throw from bottom to top to scroll the site. Works perfectly if you keep you fingers on screen. I made a little page which shows the problem: http://ozboz.nl/dragger/ It's like the browser bar gets the focus or something. Hope someone can give me a fix (or Google for that matter).

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.