Jump to content
GreenSock

Search the Community

Showing results for tags 'tween'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

  1. Hi all, First of all can I just say how amazing this engine is to use! I've only been using it half a day and I have to say it is really amazing. My boss introduced me to it as he uses greensock for actionscript, and seeing as I am no flash programmer, he asked me to talk a look at the javascript version and its amazing My question is probably more a javascript question rather than a question about the actual engine files.. I have 2 divs (but want to add more), the first one called firstSlide and the second one secondSlide and what I want to do is once the animations are complete on the first slide, I want to add a delay of 5 seconds and then transition out the first slide and then show the second. Could someone please point me in the right direct of how I could do this please? Thanks in advance!
  2. I'm new to GSAP and really like it so far. I have one challenge that I think could be easily solved by SplitText, but unfortunately my company isn't interested in going the membership route. Is there an alternative to achieving the same thing? I have a parent element with a header and a variable amount of paragraphs. I'd like to animate the header, then each paragraph in turn. That is, once the first paragraph is finished animating, the second paragraph starts animating. When the 2nd paragraph is finished, the 3rd starts animating, and so on. Here is some sample HTML: <article> <h1>My header</h1> <p>First paragraph</p> <p>Second paragraph</p> </article> Does GSAP have an equivalent of jQuery's $.each() function, such that I could call the same animation on an element with a class, like: $( 'article p' ).each( function() { tl.from( $( this ), 1.5, { rotationX : -90, transformOrigin : 'left top', ease : Elastic.easeInOut } ); } ) That's just pseudo code to convey my idea. I realize it won't work Thanks in advance for any help!
  3. Hi, I have a text (blockquote) that should move from right to left constantly. It should start with opacity 0 then go to opacity 1 in 2 seconds. After that, it should keep moving constantly (same speed) for about 10 seconds and then fade out (back to opacity 0) but keep moving in the same speed. I've tried this way, but it doesn't get the correct movement I want: var tl = new TimelineLite(); tl.to('.quote1', 2, { opacity:1, right:"+=50px", delay:3 }) .to('.quote1', 10, { right:"+=150px" }) .to('.quote1', 3, { opacity:0, right:"+=50px" }); What I want to know is if it's possible to have a timeline for each property (e.g. "right" and "opacity") or if there is a better way to achieve the same result with only the object timeline...
  4. I have a few tweens as part of a TimelineMax instance that have a speed of 0. However they are executing out of sequence with the rest of the tweens, seemingly running at the very start of the timeline playback. Changing the speed to 0.1 fixes this issue. Here's a fiddle: http://jsfiddle.net/wxxkA/2/ Any ideas? Thanks
  5. Frans

    Noob needs help

    Hello, i am an absolute noob with javascript and superscrollorama. I am trying to fly in a few images when you scroll down the page. The first images needs to fly-in from the left and the 2nd from the right. It worked for 1 image but when i try to make other images fly-in non of them work (or only the first one). Please help me! html: <h2 id="fly-it"><img src="img/image1.png"></h2> <h2 id="fly-it2"><img src="img/image1.png"></h2> script: controller.addTween('#fly-it', TweenMax.from( $('#fly-it'), .5, {css:{right:'1000px'}, ease:Quad.easeInOut})); controller.addTween('#fly-it2', TweenMax.from( $('#fly-it2'), .5, {css:{left:'1000px'}, ease:Quad.easeInOut}));
  6. Hi there! I hope that somebody can help me out with a problem I stumbled upon. I want to animate on a scroll by using the superscrollorama plugin. With GSAP I can use a timeline to change the position of an element on scrolling. I want the following actions to take place: Move the element from -1900px to 550px on screen by scrolling After that, let the element stay at it's position while scrolling a certain amount of pixels (let's say 2000px) After the 2000px without movement, let the element move from it's current position to 1900. So we have an animation of an element from the left side of the screen, to the right with a pin moment. I hope someone can help me out here because I have not succeeded in writing a code that doesn't conflict with the first animation and a pin moment. This is what I have so far: controller.addTween('body',(new TimelineLite()).append([TweenMax.fromTo($('#vogel'), 1, {css:{left: -1900}, immediateRender:true}, {css:{left: 550}})]), 1000);
  7. This may have nothing to do with GSAP as I have both a jquery library and a pathfinding ai library, but I'm not getting any errors, and the coords spit out by my ai seem fine. After the third click on the screen the entire window (chrome) has to be closed and reloaded. Any ideas? I really want to have my basic movement down so I can actually get to building my game http://jsfiddle.net/ccarterc1984/BfpF2/
  8. I have several elements which will be using the same animation functions. So I want to have a timeline for animating 20 px to the left for instance. How do I pass in the element to the timeline without knowing before hand which element will need to be moved? I imagine the most efficient way is to not create a new timeline variable each time which what I think is throwing me for a loop. e.g. http://jsfiddle.net/ccarterc1984/6LQhJ/ This is my first day trying Greensock so be gentle.
  9. Noticed a bug involving positional tweens for a DOM element with a dropShadow filter. The reason for the CSS3 dropShadow filter is that I have a transparent PNGs I'd like to provide a shadow for, and GS's box-shadow only adds a shadow to the rectangular block shape of the element. Unfortunately, I've noticed that whenever the filter is applied to an element, I can not position the element via standard GS Tweens. (Ideally this would be as part of a TimelineLite, but the same bug applies to TweenLite / TweenMax calls). Here's a fiddle that shows the phenomenon. By default, the element tweens just fine. However, toggle on the .shadowfilter class (which adds the webkit and FF versions of dropShadow), and the element no longer translates. Any ideas for workarounds for this? Or is this a known bug? I realize that as dropShadow is a filter, this is not going to be supported by GS for sometime, but can I at least still move a filtered element around? http://jsfiddle.net/tkshredder/tYZ8E/9/
  10. Hi, I am trying to make an animation where a wheel eases in to rotate quickly then stops really slowly for 10 seconds. So I would like it to run slowly for about the last 3 seconds. I am struggling to get this really slow ease out and was hoping someone would have some advice? I have looked at every ease class available, I have tried making my own custom ease, but it seems I just cannot physically achieve the ease out I want. I have also tried using the ThrowProps plugin but again the easing was not good enough. All I want is an ease out that causes the rotation to move really slowly for the last third of my animation. I generally use the TweenLite.to() method to start my animation. Thanks!
  11. Hi - I am sure this is really easy but I can not see how I can use the TweenMax.to but play when I get to the frame. I have tried so many combinations. This is my TweenMax.to that will get me to the frame label, but pauses when it gets there. It is controlling a Movie Clip that has frame labels. function Park_Play(e:MouseEvent):void{ TweenMax.to(CharacterMovie, 0.5, {frameLabel:'Park'}); }
  12. Hey guys so im having a little trouble here. So i have a textField that updates after each hitTest which is called levelText. So what im trying to accomplish is the levelText field to fade out after 1 second at the start of each new level. It works fine for the first level but when i go to level 2 or 3 the text field doesnt appear at all. I believe i have to destroy it and re add somehow? Here is the code im using. private function startNextLevel():void { TweenLite.to(levelText, 1, {autoAlpha:0}); } Please any information would help. Thank you.
  13. INTENDED EFFECT: I have a TweenMax with a variable for the target. This target is the current element. var currentElement = $("#div1"); The tween is nested inside a TimelineMax set to repeat. Once the tween completes, an onComplete fires. Within my onComplete function, the target will dynamically change. currentElement = $("#div2"); ISSUE: Target never changes on timeline repeat of the nested tween, even after redefining the variable. I know that invalidate() works with changes in vars parameter, but it does not work with the target. QUESTION: Is there any way to achieve the intended effect? Any help much appreciated.
  14. Hey guysso this is probably really easy and sorry ahead of time if this is a Repost. So im very new to this ive been reading up on how to use tweenLite and Max but im still really confused. So i have a MovieClip that gets added to stage when the user pushes play Game. I want this MovieClip to move Up and Down in a Linear path i want it to go on a infinite amount of times. My stage height is 480 if this is needed. I've tried this but it only goes up and doesnt come back down TweenMax.to(this, 5, { y: -480, yoyo:2 } ); What do i need to do to make it reverse its path and keep repeating this path?
  15. I want to tween various movieclips over the same path. My problem is I want them to be offset so that they follow the same path but still are at a distance from each other. I searched the forums but couldn't find any offset path property. Anything you can suggest?
  16. Hello everyone, I need help here. I tried Greenshock's Tweenlite, but I found the animation appears "jumpy". I don't know what's wrong The file's attached. Here's the code of document class: package { import com.greensock.*; import com.greensock.easing.Back; import flash.display.MovieClip; /** * ... * @author */ public class Main extends MovieClip { public function Main() { TweenLite.to(box_mc, 3, { x:100, y:100, ease:Back.easeOut } ); } } } // (I used Flash CS 6 btw )
  17. i was trying to use the className property on TweenLite to add and remove a css class from an element during mouse over an mouse out. using jquery, i had done something like this: this.$container.hover( function( evt ) { TweenLite.to( _this.$content, 0.5, { className: "+=open", ease: Expo.easeInOut }); }, function( evt ) { TweenLite.to( _this.$content, 0.5, { className: "-=open", ease: Expo.easeInOut }); }); the problem i'm having is when i interrupt the animation with another mouse event that will cause it to remove the class before the animation is finnished, it seems the class name doesnt actually become added onto the element until after the animation is complete. so if you hover in and hover out before the animation completes, there wont be any class name to remove and the tween for removing the class will be ignored. i hope this makes sense. thanks for you time!
  18. Hi, I love to be able to use the Javascript version of Tweenlite, however, I can't figure out how to reset a tween? I have a function set up that should reset the tween when called. Any suggestions are highly appreciated. Thanks! Dada
  19. Hi I'm new to Tweenlite, have a query that may be very simple. I have a tween thats repeating an object being rotated 360degrees, I want to update the tween so it eases out to a new degree requirement e.g. from... thisTween = new TweenMax(rec, 4, {rotation:"360", ease:Linear.easeNone, repeat:-1 }); to {rotation:"25", ease:Linear.easeNone, repeat:0 }); so it basically eases the objects rotation, stopping at 25 degrees. Spent the last hour trying to solve this, nothing so far. Any help greatly appreciated. Many thanks.
  20. I have been using GSAP on a recent web-site development to which I planned on giving a speed boost by applying the latest version of GSAP. I modified my code to support the latest changes in the API, but couldn't get the following code to work anymore. // worked on 1.6.4. // obj is a <img> node fetched with jquery obj[0].currentFrame = 1; var tLine = new TimelineMax({repeat:-1}); tLine.fromTo(obj, animationDuration,{currentFrame:1},{currentFrame:parseInt(fc)+3, onUpdate:animation, onUpdateParams:[obj], ease:Linear.easeNone}); Previously this tween set and changed the currentFrame property accordingly, but 1.8.x doesn't. Did I miss something down the line? Thanks, -Teemu
  21. I'm noticing that TweenLite keeps looping over some functions, even though no tweens have been initiated. Firebug's Profile shows that there are 4 functions that keep running, on lines 278, 830, 227 and 703. (TweenLite.js, dated 29.1.2013) Is there a way to kill those timers? The load they cause is really minimal, but I'd like to clean them up anyways.
  22. I'd like to have a fromTo TweenMax run a function prior to executing its animations to determine whether it should perform the animations or remain in its current state. The tween will always execute once, but repeat/revert animations should be governed by a function. I've tried playing around with onUpdate and .pause(), but am not having any luck. My code is looking something like this: onUpdateParams: ["{self}"], onUpdate: function(tween) { if (some_condition) { tween.pause(); } else { tween.play(); } }
  23. Hi, I'm trying to tween a Raphael set: var atomH1_1 = paper.set(); var atom_Circle1 = paper.circle(10, 10, 25).attr({id: 'circle1','gradient':'70-#00CC00-#00FF00','stroke-width': '0'}).data('id', 'circle1'); var atom_Circle2 = paper.circle(20, 20, 25).attr({id: 'circle2','gradient':'70-#0000CC-#0000FF','stroke-width': '0'}).data('id', 'circle2'); atomH1_1.push(atom_Circle1); atomH1_1.push(atom_Circle2); tween1 = TweenMax.to(atomH1_1, 0.3, {raphael:{'tx':100,'ty':100,'scaleX':0.5,'scaleY':0.5},ease:Power1.easeInOut, onComplete:nextStep}); But it seems it triggers an error in GreenSock (): TypeError: c is undefined file:///E:/the%20Factory/Vialight/06_www/js/greensock/plugins/RaphaelPlugin.min.js Line 13 When I use the Raphael animate, it works fine, (but that's not what I'm looking for): atomH1_1.animate({transform: "t100,100"}, 1000); Is it not possible to tween Raphael sets? Or what am I doing wrong? EDIT : I sort of solved the problem by using multiple targets in GreenSock: var mySet = [atom_Circle1,atom_Char1]; TweenMax.to(mySet, 2, {raphael:{'tx':100,'ty':100},ease:Power1.easeInOut});
  24. I have a button which inverts the colors on my website. It utilizes a plugin called rgb color - http://www.phpied.co...-in-javascript/ to get the color value of all dom elements, and invert them. I'm doing that with the code below: invertColors: function(){ var colorProperties = ['color', 'background-color']; //iterate through every element $('*').each(function() { var color = null; for (var prop in colorProperties) { prop = colorProperties[prop]; if (!$(this).css(prop)) continue; //if we can't find this property or it's null, continue color = new RGBColor($(this).css(prop)); //create RGBColor object if (color.ok) { //good to go, build RGB var element = $(this); $(this).css(prop, 'rgb(' + (255 - color.r) + ', ' + (255 - color.g) + ', ' + (255 - color. + ')'); //subtract each color component from 255 } color = null; //some cleanup } //end each for prop in colorproperties }); //end each } //end invert colors What I'd like to do is rather than just flip the color, tween it. I'm curious to try the greensock tweening engine. So supposedly, I should be able to make a call something like this: TweenLite.to(element, 1, {css:{prop:'rgb(' + (255 - color.r) + ', ' + (255 - color.g) + ', ' + (255 - color. + ')' }, ease:Power2.easeOut}); but this is not working (no errors are thrown), so I'm not sure what I'm doing wrong. Anyone have any ideas for how to get this working, or what the proper way to tween all of these color properties would be?
  25. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. Update: don't miss our guest post on css-tricks.com, Myth Busting: CSS Animations vs. JavaScript which provides some additional data, visual examples, and a speed test focused on this topic. jQuery is the 700-pound gorilla that has been driving lots of animation on the web for years, but let's see how it fares when it steps into the ring with the feisty GSAP (GreenSock Animation Platform) which gained its fame in the Flash world and is now flexing its greased-up muscles in JavaScript. Before we put the gloves on, we need to make it clear that we've got the utmost respect for jQuery, its authors, and its community of users (to which we belong). It's a fantastic tool that we highly recommend for non-animation tasks. This tongue-in-cheek "cage match" is solely focused on animation. Performance Performance is paramount, especially on mobile devices with sluggish processors. Silky smooth animation is the hallmark of any animation platform worth its weight. This round wasn't even close. GSAP was up to 20 TIMES faster than jQuery under heavy stress. See a speed comparison for yourself or make your own. Performance winner: GSAP Controls With jQuery, you can stop an animation but that's about it. Some 3rd party plugins add resume capability, but jQuery takes a pounding in this round. GSAP's object oriented architecture allows you to pause, resume, reverse, restart, or jump to any spot in any tween. Even adjust timeScale on the fly for slow motion or fastforward effects. Place tweens in a timeline with precise scheduling (including overlaps or gaps) and then control the whole thing just like it's a single tween. All of the easing and effects remain perfectly intact as you reverse, pause, adjust timeScale, etc. And you can even kill individual portions of a tween anytime (like if a tween is controlling both "top" and "left" properties, you can kill "left" while "top" continues). Put labels in a timeline to mark important spots and seek() to them anytime. Imagine trying to build the example below using jQuery. It would be virtually impossible. With GSAP, it's easy. In fact, all of the animation is done with 2 lines of code. Drag the slider, click the buttons below, and see how easy it is to control the sequenced animation. See the Pen Impossible with jQuery: controls (used in jquery cagematch) by GreenSock (@GreenSock) on CodePen. Controls winner: GSAP Tweenable Properties jQuery.animate() works with basic numeric properties, but that's about it. If you want to do more, you'll need to rely on lots of 3rd party plugins which may have spotty support or unresolved bugs. GSAP's CSSPlugin handles almost anything you throw at it while protecting you from various browser bugs and prefix requirements. GSAP jQuery  = supported    = supported with 3rd party plugins    = partially supported with 3rd party plugins Basic numeric css properties like left, top, opacity, fontSize, etc. Supported Supported Colors like backgroundColor, borderColor, etc. Supported Supported with 3rd party plugins backgroundPosition Supported Supported with 3rd party plugins boxShadow Supported Supported with 3rd party plugins clip Supported Supported with 3rd party plugins textShadow (including multiple text shadows) Supported Partially supported with 3rd party plugins 2D transforms like rotation, scaleX, scaleY, x, y, skewX, and skewY, including 2D transformOrigin and directional rotation functionality Supported Partially supported with 3rd party plugins 3D transforms like rotationY rotationX, z, and perspective, including 3D transformOrigin and directional rotation functionality Supported Partially supported wiht 3rd party plugins borderRadius (without the need to define each corner and use browser prefixes) Supported Partially supported with 3rd party plugins className allows you to define a className (or use "+=" or "-=" to add/remove a class) and have the engine figure out which properties are different and animate the differences using whatever ease and duration you want. Supported Partially supported with 3rd party plugins Tweenable properties winner: GSAP Workflow When you're creating fun and interesting animations, workflow is critical. You need to be able to quickly build sequences, stagger start times, overlap tweens, experiment with eases, leverage various callbacks and labels, and create concise code. You need to be able to modularize your code by creating functions that each spit back an animation object (tween or timeline) which can be inserted into another timeline at a precise time. You need a flexible, powerful system that lets you experiment without wasting hours wrestling with a limited tool set. jQuery has some nice simple convenience methods like show(), hide(), fadeIn(), and fadeOut(), but GSAP bloodies its nose in this round: GSAP jQuery  = supported    = unsupported Easily create sequences (even with overlapping animations) that can be controlled as a whole Supported Unupported Flexible object-oriented architecture that allows animations to be nested inside other animations as deeply as you want Supported Unupported Animate things into place (backwards) with convenience methods like from() and staggerFrom() Supported Unupported Accommodate virtually any ease including Bounce, Elastic, SlowMo, RoughEase, SteppedEase, etc. Supported Unupported Create a staggered animation effect for an array of objects using one method call (like staggerTo(), staggerFrom(), or staggerFromTo()) Supported Unupported Easily repeat and/or yoyo a tween a specific number of times (or indefinitely) without resorting to callbacks or redundant code Supported Unupported Callbacks for when a tween or timeline starts, updates, completes, repeats, and finishes reversing, plus optionally pass any number of parameters to those callbacks Supported Unupported Place labels at specific times in a sequence so that you can seek() to them and/or insert animations there. Supported Unupported Animate any numeric property of any JavaScript object, not just DOM elements Supported Unupported Call a function whenever the entire platform finishes updating on each frame (like for a game loop) Supported Unupported Workflow winner: GSAP Compatibility Browser inconsistencies and bugs are the bane of our existence as developers. Whether it's the way Internet Explorer 8 implements opacity or Safari's transformOrigin bug that wreaks havok on 3D transforms or the fact that browser prefixes are required to enable many of the more modern browser features, you want your animations to "just work" without having to learn all the annoying hacks. jQuery does a great job of delivering cross-browser consistency overall, but when it comes to animation it falls a bit short mainly because it doesn't even attempt to handle the more modern CSS properties. No JavaScript framework can work miracles and suddenly make IE8 do fluid 3D transforms, for example, but GSAP implements a bunch of workarounds under the hood to solve problems wherever possible. It can do 2D transforms like rotation, scaleX, scaleY, x, y, skewX, and skewY all the way back to IE6 including transformOrigin and directional rotation functionality! Plus it works around scores of other browser issues so that you can focus on the important stuff. Compatibility winner: GSAP Popularity jQuery has been around for a long time and has gained incredible popularity because it does many things well. It's like the Swiss Army knife of JavaScript. There probably isn't a single JavaScript tool that's more popular than jQuery, and GSAP is no exception. As the new kid on the block, GSAP is gonna have to prove itself in the JavaScript community just like it did in the Flash community before it's crowned the undisputed champion. Popularity winner: jQuery Conflict management What happens if there's already a tween running that's controlling a particular object's property and a competing tween begins? jQuery does nothing to manage the conflict - the original tween keeps running. For example, let's say you're animating an element's "top" to 100px and that tween still has 2 seconds left before it's done, and another tween starts running that animates the same element's "top" to 0px over the course of 1 second. It would tween to 0px and then immediately jump to almost 100px and finish that [first] tween. Yuck. GSAP automatically senses these conflicts and handles them behind the scenes. In this case, it would kill the "top" portion of the first tween as soon as the second tween begins. Plus there are several other overwrite modes you can choose from if that's not the behavior you want. Conflict management winner: GSAP Support Both jQuery and GSAP have thriving support forums, but since right now jQuery has a massive user base, you're very likely to find someone with an answer to your question. Even though the GreenSock forums rarely have a question that remains unanswered for more than 24 hours, jQuery's pervasiveness gives it an edge here. On the other hand, GreenSock's forums are manned by paid staff (including the author of the platform), so you're quite likely to get solid answers there. Add to that the fact that GreenSock has a track record of being much more agile in terms of squashing bugs and releasing updates than jQuery, so we'll call this round a tie. Support winner: tie Expandability jQuery and GSAP both offer a plugin architecture, but since jQuery has been out much longer and gained so much popularity, there are numerous plugins available. Some are good, some are not, but there is a thriving community of plugin developers out there. Even though technically they're both equally expandable, the sheer number of plugins currently available for jQuery give it the advantage in this round. Expandability winner: jQuery Learning resources Again, jQuery's popularity trumps anything GSAP could throw at it right now. There are lots of tutorials, videos, and articles about jQuery whereas GSAP is new to the game. GreenSock is being aggressive about putting together solid resources (like the Jump Start tour) and the community is crankin' out some great articles and videos too, but jQuery scores the win in this round. Learning resources winner: jQuery Price & license Both jQuery and GSAP are completely free for almost every type of usage and both allow you to edit the raw source code to fix bugs (if that's something you need to do). If you plan to use GSAP in a product/app/site/game for which a fee is collected from multiple customers, you need the commercial license that comes with "Business Green" Club GreenSock memberships (one-off commercial projects don't need the special license). It's actually a more business-friendly license in many ways than a typical open source license that offers no warranties or backing of any kind or imposes code sharing or credit requirements. GreenSock's licensing model provides a small funding mechanism that benefits the entire user base because it empowers continued innovation and support, keeping it free for the vast majority of users. See the licensing page for details. jQuery employs an MIT license and is free for virtually all uses. As much as we all like "free" software, there's always a cost somewhere. jQuery has a few large corporate sponsors that have helped keep it viable. Both jQuery and GreenSock have long track records of delivering updates, bug fixes, and new features (GreenSock is newer to JavaScript, but served the Flash community since around 2006). Both count some of the largest companies in the world among their user base. Although there are some clear benefits of GreenSocks' license over jQuery's, we'll give this round to jQuery because it is technically "free" in more scenarios than GSAP. Price & license winner: jQuery File size jQuery weighs in at about 32kb gzipped and minified whereas GSAP's TweenLite and CSSPlugin are about half that combined. So in half the size, you're getting significantly more animation capabilities and speed. GSAP is built in a modular fashion that allows you to use just the parts that you need. Of course jQuery serves many other purposes beyond animation, but in this cage match we're focused on animation. Even if you add up TweenLite, TimelineLite, TimelineMax, TweenMax, EasePack, CSSPlugin, BezierPlugin, AttrPlugin, DirectionalRotationPlugin, and RoundPropsPlugin, it's still almost 20% less than jQuery. File size winner: GSAP Flexibility Let's face it: any tweening engine can handle the basics of animating one value to another, but it's really the details and advanced features that make a robust platform shine. GSAP crushes jQuery when it comes to delivering a refined, professional-grade tool set that's truly flexible. All these conveniences are baked into GSAP (no 3rd party plugins required): Tween any numeric property of any object. Optionally round values to the nearest integer to make sure they're always landing on whole pixels/values. Animate along Bezier curves, even rotating along with the path or plotting a smoothly curved Bezier through a set of points you provide (including 3D!). GSAP's Bezier system is super flexible in that it's not just for x/y/z coordinates - it can handle ANY set of properties. Plus it will automatically adjust the movement so that it's correctly proportioned the entire way, avoiding a common problem that plagues Bezier animation systems. You can define Bezier data as Cubic or Quadratic or raw anchor points. Animate any color property of any JavaScript object (not just DOM elements). Define colors in any of the common formats like #F00 or #FF0000 or rgb(255,0,0) or rgba(255,0,0,1) or hsl(30, 50%, 80%) or hsla(30, 50%, 80%, 0.5) or "red". Set a custom fps (frames per second) for the entire engine. The default is 60fps. All tweens are perfectly synchronized (unlike many other tweening engines). Use the modern requestAnimationFrame API to drive refreshes or a standard setTimeout (default is requestAnimationFrame with a fallback to setTimeout) Tons of easing options including proprietary SlowMo, RoughEase and SteppedEase along with all the industry standards Animate css style sheet rules themselves with CSSRulePlugin Animate the rotation of an object in a specific direction (clockwise, counter-clockwise, or whichever is shortest) by appending "_cw", "_ccw", and "_short" to the value. You can tween getter/setter methods, not just properties. For example, myObject.getProp() and myObject.setProp() can be tweened like TweenLite.to(myObject, 1, {setProp:10}); and it will automatically recognize that it's a method and call getProp() to get the current value when the tween starts. Same for jQuery-style getters/setters that use a shared method like myObject.prop(). You can even tween another tween or timeline! For example, TweenLite.to(otherTween, 1, {timeScale:0.5}) would animate otherTween.timeScale to 0.5 over the course of 1 second. You can even scrub the virtual playhead of one tween/timeine with another tween by animating its "time". Use plugins like ThrowPropsPlugin for momentum-based motion, and RaphaelPlugin, EaselPlugin, and KineticPlugin for those [canvas or svg] libraries (Raphael, EaselJS, and KineticJS). Plus there are physics-based plugins like Phyics2DPlugin and PhysicsPropsPlugin as well as a fun ScrambleTextPlugin for Club GreenSock members. Flexibility winner: GSAP Conclusion jQuery eeked out a few decent rounds, but ultimately GSAP left it lying on the mat in a pool of its own blood. Of course we're slightly biased, but check out the facts for yourself. Kick the tires. Audition GSAP on your next project. See how it feels. If you only need simple fades or very basic animation, jQuery is probably just fine. In fact, its fadeIn() and fadeOut() methods are quite convenient. However, what happens when your client wants to do something more expressive? Or what if they start complaining that animation isn't smooth on mobile devices? Why not build on a solid foundation to begin with so that you don't find yourself having to rewrite all your animation code? If you want professional-grade scripted animation, look no further. To get started fast, check out our Jump Start tour. Update: there's now a jquery.gsap.js plugin that allows you to continue using jQuery.animate() but have GSAP drive the animations under the hood, thus delivering much better speed plus a bunch of new properties that you can tween (like colors, 2D and 3D transforms, boxShadow, textShadow, borderRadius, clip, etc.). Read more about the plugin here. Recommended reading: Main GSAP JS page jQuery.animate() with GSAP: get the jquery.gsap.js plugin! Why GSAP? A practical guide for developers Jump Start: GSAP JS CSS3 transitions vs GSAP: cage match Speed comparison 3D Transforms & More CSS3 Goodies Arrive in GSAP JS
×