Copy/paste this code into your HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
By using GreenSock code, you agree to the terms of use.
Step 1: Select a Plan
Step 2: Enter Payment Info
Step 3: Download Plugins
Most Popular
| Simply | Shockingly | Business | |
| Perks | |||
| Notification of significant feature additions, bug fixes and enhancements | |||
| Access to beta releases and demo source code | |||
| Bonus Plugins and Tools | |||
  DrawSVG plugin gives you enhanced control over how SVG strokes are revealed. (view demo) |
|||
|
physics2D and physicsProps plugins for tweening objects based on velocity, acceleration, friction, etc. (view demo) |
|||
|
scrambleText plugin for animated decoding of text. (view demo) |
|||
|
morphSVG plugin SVG shape morphing, even with mis-matching numbers of points! (view demo) |
|||
|
GSDevTools for advanced playback controls and accelerated workflow (view demo) |
|||
GSDevTools > advanced playback controls for GSAP
Features >
Learn more about GSDevTools. |
|||
|
throwProps plugin for tweens that flick, toss, and slide gracefully. (view demo) |
|||
|
SplitText for splitting apart characters, words, or lines of text for easy animation. (view demo) |
|||
|
CustomBounce and CustomWiggle for creating customized bounce and wiggle eases (view demo) |
|||
| Business Extras | |||
| Commercial license (see licensing page for details) | |||
| Multi-developer memberships available | |||
Most Popular
We gladly offer discounted pricing to various educational institutions; just let us know how we can help.
Request a discount
Need a custom commercial license? We realize that some legal departments have special requirements.
Get a Custom License
100% SATISFACTION GUARANTEED! If you're not thrilled, contact us and we'll gladly refund the full purchase price.
Discovering TweenLite (and all of your products) was a defining moment in my career and has forever changed the way I create apps.
- Ben
$99 will save your 100+ hours
- EcuKit
With the incredible functionality, and the mind-blowing customer service, the price of Club GreenSock admission is well worth it!
- Tim Jaramilla
Best $ I spent in my life.
- Erik Hallander
Thanks GreenSock for all the questions you have answered. People should know that you stand behind your code, and that when it comes to tweening classes your code is second to none. You have me hooked for life.
- Gerry Fontaine
I thank you on my bare knees for the extra classes that came with the Shockingly Green package! These tools represent the best investment you can do as a developer (I earned the money back within one project because of the time saving features of TweenMax and the bonus classes).
- WLM
OK, so my membership is expiring. And I’m back to renew AND upgrade to Shockingly Green, happily, happily. The classes, the support...topnotch. To be honest, for most of what I do the free stuff would suffice, but I really like being able to throw my support to someone who really does a bang-up job for all of us. Thanks, GreenSock!
- Pharmboy
setTimeout() if the browser doesn’t support requestAnimationFrame. And if you prefer not to use requestAnimationFrame, you can disable it by calling TweenLite.ticker.useRAF(false). The main benefit of requestAnimationFrame is that it synchronizes animation renders with modern browsers’ redraw cycles and it also reduces the frequency of updates significantly when the user switches to another tab in the browser, reducing the load on the processor and saving battery on mobile devices.
opacity, transforms (rotation, scaleX, scaleY, skewX, skewY, x, and y), and transformOrigin so those should work in all major browsers even back to IE6. Firefox doesn’t support backgroundPositionX or backgroundPositionY, so those specific properties won’t work but backgroundPosition will for virtually all browsers. There is NOT a predetermined list of css properties that you can tween – the platform will attempt to tween ANY property you pass in. If it is numeric, it will tween it. If it isn’t numeric and it isn’t a recognized special property, CSSPlugin will just set the property to the value you provide (without tweening it). So, for example, if you try to tween to display:"inline", that isn’t a tweenable property but it will still be set accordingly during the tween, so feel free to use that to your advantage.
//fade out all of the elements with the class "myClass"
TweenLite.to($(".myClass"), 1, {opacity:0});
//tween the width of the element with id "myElement" to 500px
TweenLite.to("#myElement", 1, {width:"500px", ease:Elastic.easeOut});
//tween the "marginTop" of all objects of the class "myClass" in a staggered fashion so that they appear to fall into place from 100px up
var tl = new TimelineLite();
tl.staggerFrom(".myClass", 1, {marginTop:"-=100px", opacity:0}, 0.1);
//or use jQuery's each() method to loop through the results and stagger a fade out
$(".myClass").each( function(index, element) {
TweenLite.to( element, 1, {autoAlpha:0, delay:index * 0.2});
});
//add a click handler that uses $(this) to refer to the menu element that was clicked and tween its height to 100px
$("#menu").click(
function(){
TweenLite.to( $(this), 0.7, {height:"100px", ease:Power2.easeInOut } );
}
);
Of course you need to load jQuery into your HTML document in order to use it. TweenLite doesn't have any dependencies on 3rd party tools like jQuery, so it is completely optional.