Search the Community

See the Pen GSPreloader by GreenSock (@GreenSock) on CodePen. I had some fun creating a simple little preloader animation with spinning dots that animate in/out with a single JS call. This is what we're using on the new GreenSock.com. All it does is: Create a certain number of DIVs (you decide how many) with border-radius:50% to make them circular Offsets their transform-origin to whatever radius you define Rotates each one to disperse them around a big circle Drops them into a wrapper DIV that's fixed-position, centered perfectly in the window with a high z-index Creates a repeating/looping TimelineMax instance for each dot, animating its rotation "-=360" (360 less than whatever it starts at, thus one full rotation around the bigger circle) and then its skew by "+=360" (this is what makes it appear to "flip") Place each dot's TimelineMax into a master TimelineLite instance in a slightly staggered fashion. This TimelineLite serves as the container for the whole animation, making it simple to control as a whole. To animate out, the main TimelineLite gets paused, and a new tween for each dot animates it from wherever it happens to be, off the screen in a cool way (again, slightly staggered). This would be pretty tough or impossible to do with pure CSS. Features Completely customizable - use the config object to define the number of dots, the size of the dots, the radius of the circle, the colors (as many or as few colors as you want), the opacity and border of the background box, etc. Pure JS. Copy one JS function, and make sure you load TweenLite and CSSPlugin (or just TweenMax which has both), and you're good-to-go Automatically centers itself in the window and sets the container's z-index to 200 Call your preloader's active() method to turn it on or off. preloader.active(true) turns it on, preloader.active(false) turns it off, and you can check its status using preloader.active() (no parameter).

See the Pen GreenSock Home Page Animation by GreenSock (@GreenSock) on CodePen. Here is the demo we use on our homepage. Although it incorporates a few advanced techniques, at its core it is just a bunch of timelines nested inside a master timeline. This technique of nesting timelines is actually quite simple and with a little practice you'll be doing the same.

Note: TweenLite has been deprecated in GSAP 3 in favor of the streamlined gsap object. It has 50+ new features and is almost <strong>half the size!</strong> GSAP 3 is backward compatible with the vast majority of GSAP 2 features including TweenLite. Please see the Migration Guide for details. The information below covers the older version 2... TweenLite is an extremely fast, lightweight, and flexible animation tool that serves as the foundation of the GreenSock Animation Platform (GSAP). A TweenLite instance handles tweening one or more properties of any object (or array of objects) over time. TweenLite can be used on its own to accomplish most animation chores with minimal file size or it can be used in conjunction with advanced sequencing tools like TimelineLite or TimelineMax to make complex tasks much simpler. Basic Usage The most basic use of TweenLite would be to tween a numeric property of a generic JavaScript object. var demo = {score:0}, scoreDisplay = document.getElementById("scoreDisplay"); //create a tween that changes the value of the score property of the demo object from 0 to 100 over the course of 20 seconds. //each time the tween updates call the function showScore() which will handle displaying the value of demo.score. var tween = TweenLite.to(demo, 20, {score:100, onUpdate:showScore}) function showScore() { scoreDisplay.innerHTML = demo.score.toFixed(2); } See the Pen TweenLite Tween Numeric Property by GreenSock (@GreenSock) on CodePen. note: Click on the "Result" tab to see the value of score animate. Animate CSS Properties For most HTML5 projects you will probably want to animate DOM elements. No problem. Once you load CSSPlugin TweenLite can easily animate CSS properties of DOM elements. /*external js http://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenLite.min.js http://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/CSSPlugin.min.js */ window.onload = function() { var logo = document.getElementById("logo"); TweenLite.to(logo, 2, {left:"542px", backgroundColor:"black", borderBottomColor:"#90e500", color:"white"}); } See the Pen Animate Multiple Properties by GreenSock (@GreenSock) on CodePen. note: Click on the "Result" tab to see the animation. TweenLite isn't limited to animating DOM elements, in fact it isn't tied to any rendering layer. It works great with canvas and WebGL too! Control TweenLite is packed with methods that give you precise control over every tween. Play, pause, reverse, and adjust the timeScale (speed) whenever you need to. The demo below shows the power of just a handful of TweenLite's methods. See the Pen Control Playback by GreenSock (@GreenSock) on CodePen. note: Click on the "JS" tab to see detailed comments about what each button does. To see more of TweenLite in action visit our extensive CodePen collections. And so much more TweenLite is loaded with even more features allowing you to: kill tweens find active tweens specify how overwriting of tweens should be handled get/set the time, duration and progress of a tween delay tweens pass arguments into event callback functions specify values to tween from The best place to get all the juicy details on what TweenLite can do is in the TimelineLite documentation. Need even more tweening power? Be sure to check out TweenLite's beefy big brother TweenMax.

Note: TweenMax has been deprecated in GSAP 3 in favor of the streamlined gsap object. It has 50+ new features and is almost <strong>half the size!</strong> GSAP 3 is backward compatible with the vast majority of GSAP 2 features including TweenMax. Please see the Migration Guide for details. TweenMax lets you animate literally any property of any object that JavaScript can touch (CSS, SVG, React, Vue, Three.js, canvas, motion paths, generic objects, etc.). Before the release of GSAP 3, TweenMax was the most feature-packed (and popular) animation tool in the GSAP arsenal. However in GSAP 3, you no longer even need to reference TweenMax in your code (although you can because GSAP 3 honors the vast majority of legacy code). We strongly recommend migrating to GSAP 3's streamlined syntax. Quick links Getting started What's so special about GSAP? Documentation: Version 2 | Version 3 Showcase (examples) For convenience and loading efficiency, TweenMax version 2 and earlier included TweenLite, TimelineLite, TimelineMax, CSSPlugin, AttrPlugin, RoundPropsPlugin, BezierPlugin, and EasePack (all in one file). Every bit of that functionality (plus a lot more) is in the GSAP 3 core which is almost half the size. Staggered animations GSAP makes it easy to create staggered animations on multiple objects. The animations can overlap, run in direct sequence or have gaps between their start times. The old TweenMax stagger methods (from version 1 and 2): TweenMax.staggerTo(), TweenMax.staggerFrom() and TweenMax.staggerFromTo() aren't even necessary in GSAP 3 because a "stagger" special property can be added to ANY tween, like in the demo below: Additional Methods (only relevant for version 1 and 2) TweenMax inherits methods from TweenLite and it also has quite a few of its own. ul.chart {width:300px; float:left; margin-right:80px; } ul.chart li:nth-child(1){ font-weight:bold; list-style:none; margin-left:-20px; font-size:20px; margin-bottom:20px; } TweenLite and TweenMax Methods delay() delayedCall() duration() eventCallback from() fromTo() getTweensOf() invalidate() isActive() kill() killDelayedCallsTo() killTweensOf() pause() paused() play() progress() restart() resume() reverse() reversed() seek() set() startTime() time() timeScale() to() totalDuration() totalProgress() totalTime() Methods exclusive to TweenMax getAllTweens() isTweening() killAll() killChildTweensOf() pauseAll() repeat() repeatDelay() resumeAll() staggerFrom() staggerFromTo() staggerTo() updateTo() yoyo() Learn more in the TweenMax version 2 documentation.

Note: TimelineLite has been deprecated in GSAP 3 (but GSAP 3 is still compatible with TimelineLite). We highly recommend using the gsap.timeline() object instead. While GSAP 3 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. TimelineLite is a lightweight, intuitive timeline class for building and managing sequences of TweenLite, TweenMax, TimelineLite, and/or TimelineMax instances. You can think of a TimelineLite instance like a container where you place tweens (or other timelines) over the course of time. build sequences easily by adding tweens with methods like to(), from(), staggerFrom(), add(), and more. tweens can overlap as much as you want and you have complete control over where they get placed on the timeline. add labels, play(), stop(), seek(), restart(), and even reverse() smoothly anytime. nest timelines within timelines as deeply as you want. set the progress of the timeline using its progress() method. For example, to skip to the halfway point, set myTimeline.progress(0.5); tween the time() or progress() values to fastforward/rewind the timeline. You could even attach a slider to one of these properties to give the user the ability to drag forwards/backwards through the timeline. speed up or slow down the entire timeline using timeScale(). You can even tween this property to gradually speed up or slow down. add onComplete, onStart, onUpdate, and/or onReverseComplete callbacks using the constructor’s vars object. use the powerful add() method to add labels, callbacks, tweens and timelines to a timeline. base the timing on frames instead of seconds if you prefer. Please note, however, that the timeline’s timing mode dictates its childrens’ timing mode as well. kill the tweens of a particular object with killTweensOf() or get the tweens of an object with getTweensOf() or get all the tweens/timelines in the timeline with getChildren() If you need even more features like, repeat(), repeatDelay(), yoyo(), currentLabel(), getLabelsArray(), getLabelAfter(), getLabelBefore(), getActive(), tweenTo() and more, check out TimelineMax which extends TimelineLite. Sample Code //instantiate a TimelineLite var tl = new TimelineLite(); //add a from() tween at the beginning of the timline tl.from(head, 0.5, {left:100, opacity:0}); //add another tween immediately after tl.from(subhead, 0.5, {left:-100, opacity:0}); //use position parameter "+=0.5" to schedule next tween 0.5 seconds after previous tweens end tl.from(feature, 0.5, {scale:.5, autoAlpha:0}, "+=0.5"); //use position parameter "-=0.5" to schedule next tween 0.25 seconds before previous tweens end. //great for overlapping tl.from(description, 0.5, {left:100, autoAlpha:0}, "-=0.25"); //add a label 0.5 seconds later to mark the placement of the next tween tl.add("stagger", "+=0.5") //to jump to this label use: tl.play("stagger"); //stagger the animation of all icons with 0.1s between each tween's start time //this tween is added tl.staggerFrom(icons, 0.2, {scale:0, autoAlpha:0}, 0.1, "stagger"); Demo See the Pen TimelineLite Control : new GS.com by GreenSock (@GreenSock) on CodePen. Watch The video below will walk you through the types of problems TimelineLite solves and illustrate the flexibility and power of our core sequencing tool. Learn more in the TimelineLite docs. For even more sequencing power and control take a look at TimelineMax.

Note: TimelineMax has been deprecated in GSAP 3 (but GSAP 3 is still compatible with TimelineMax). We highly recommend using the gsap.timeline() object instead. While GSAP 3 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. TimelineMax extends TimelineLite, offering exactly the same functionality plus useful (but non-essential) features like repeat, repeatDelay, yoyo, currentLabel(), tweenTo(), tweenFromTo(), getLabelAfter(), getLabelBefore(), getActive() (and probably more in the future). It is the ultimate sequencing tool that acts like a container for tweens and other timelines, making it simple to control them as a whole and precisely manage their timing. Its easy to make complex sequences repeat with TimelineMax and there are plenty of methods and events that give you complete access to all aspects of your animation as shown in the demo below. See the Pen Burger Boy Finished / TimelineMax page by GreenSock (@GreenSock) on CodePen. Interesting note: The animation in the banner above is a mere 11 lines of TimelineMax code. The next demo illustrates many of the things TimelineLite and TimelineMax handle with ease, such as the ability to: insert multiple tweens with overlapping start times into a timeline create randomized bezier tweens control the entire set of tweens with a basic UI slider repeat the animation any number of times dynamically adjust the speed at runtime. Notice how the play / pause buttons smoothly accelerate and deccelerate? See the Pen Burger Boy Finished / TimelineMax page by GreenSock (@GreenSock) on CodePen Be sure to check out TimelineLite for more info on all the capabilities TimelineMax inherits. The chart below gives a birds-eye look at the methods these tools provide. ul.chart { width:360px; float:left; margin-right:30px; } ul.chart li:nth-child(1){ font-weight:700; list-style:none; margin-left:-20px; font-size:20px; margin-bottom:20px; } TimelineLite and TimelineMax Methods add() addLabel() addPause() call() clear() delay() duration() eventCallback exportRoot() from() fromTo() getChildren() getLabelTime() getTweensOf() invalidate() isActive() kill() pause() paused() play() progress() remove() removeLabel() render() restart() resume() reverse() reversed() seek() set() shiftChildren() staggerFrom() staggerFromTo() staggerTo() startTime() time() timeScale() to() totalDuration() totalProgress() totalTime() useFrames() Methods exclusive to TimelineMax currentLabel() getActive() getLabelAfter() getLabelBefore() getlLabelsArray() repeat() repeatDelay() tweenFromTo() tweenTo() yoyo()

#container { margin:0; padding:0; font-family: Signika Negative, Asap, sans-serif; font-weight: 300; font-size: 17px; line-height: 150%; } #container h1 { font-family: Signika Negative, Asap, sans-serif; font-weight: 300; font-size: 48px; margin: 10px 0 0 0; padding: 0; line-height: 115%; text-shadow: 1px 1px 0 white; } #container h2 { font-family: Signika Negative, Asap, sans-serif; font-weight: normal; font-size:30px; color: #111; margin: 18px 0 0 0; padding: 0; line-height:115%; } #container p { line-height: 150%; color:#555; margin: 0 0 10px 0; } #container a { color:#71b200; } #container .normalBullets code { font-size: inherit; color: inherit; font-weight: normal; line-height: inherit; font-family: inherit; } #container .normalBullets li strong { font-size: 110%; } #container .normalBullets li { margin-bottom:8px; } #container .blackBG h1, #container .darkBG h1 { color: #ddd; text-shadow: none; } #container .blackBG p { color: #999; } #container .section { width: 100%; text-align: center; position: relative; padding: 20px; } /* .block was causing conflict with wp theme --- renamed below */ #container .customblock { padding: 10px; text-align: left; position: relative; } #container .blackBG { background-color: black; } #container .lightBG { background-color: #e4e4e4; } #container .subtleDark { color: #999; text-shadow: none; } #container .blackBG p strong { color:#ddd; font-weight: normal; } #container .controls { background-color: #222; border: 1px solid #555; color: #bbb; font-size: 18px; } #container .controls ul { list-style: none; padding: 0; margin: 0; } #container .controls li { display: inline-block; padding: 8px 0 8px 10px; margin:0; } /** CODE **/ #container .code { width: 100%; border: 1px solid #555; padding: 0; margin: 20px 0; } #container .code pre.prettyprint { margin:0; overflow: auto; } #container .codeTitle { color: #aaa; background-color: #111; padding: 8px; font-size:18px; border-bottom: 1px solid #555; } #container code, #scroller code { color: black; font-size: 16px; } #container .blackBG code, #container .darkBG code { /* carl removed color: #ccc; */ } #container pre { font-size: 1.1em; padding:8px; background-color:#333; color:white; border: 1px solid #777; } /** TOSS **/ #container .box { background-color: #91e600; text-align: center; font-family: Asap, Avenir, Arial, sans-serif; width: 196px; height: 100px; line-height: 100px; overflow: hidden; color: black; position: absolute; top:0; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } /** BUTTONS **/ #container .button { display:inline-block; border-radius:8px; border-bottom-width: 2px; box-shadow: inset 0px 1px 0px rgba(255,255,255,0.6), 0px 3px 6px 0px rgba(0, 0, 0, 0.6); cursor:pointer; text-align: center; font-family: Signika Negative, Asap, Avenir, Arial, sans-serif; position:relative; margin: 4px; color:black; } #container .largeButton { padding: 12px 24px; font-size: 20px; margin: 12px 8px; min-width:110px; } .greenGradient { border: 1px solid #6d9a22; background-color: #699a18; background: linear-gradient(to bottom, #8cce1e 0%,#699a18 52%,#639314 53%,#76b016 100%); /* W3C */ text-shadow: 1px 1px 2px #384d16; color:#fff; text-decoration: none; } /** EXPANDABLE POINTS (FAQ) **/ .expPoint, .expList li { list-style: none; line-height: normal; margin: 0 0 0 8px; padding: 6px 4px 4px 24px; position:relative; border: 1px solid rgba(204,204,204,0); font-size: 110%; color: #111; font-weight: normal; } .expPoint, .expContent { font-family: Signika Negative, Asap, sans-serif; font-weight: 300; line-height: 140%; } .expPoint:hover, .expList li:hover { background-color:white; border: 1px solid rgb(216,216,216); } .expContent { height: 0; overflow: hidden; color: #444; margin: 2px 0 0 0; padding-top: 0; font-size:16px; } .expMore { color: #71b200; text-decoration: underline; font-size:0.8em; } .arrow-right { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 6px solid #999; display:inline-block; margin: -4px 8px 0 -14px; vertical-align: middle; opacity:0.8; } .tableCellDesktop { display: table-cell; } .tableCellDesktop img { left: 120px; } @media screen and (max-width: 860px) { .tableCellDesktop { display: block; } .tableCellDesktop img { left: 0px; } } Features Touch enabled - works great on tablets, phones, and desktop browsers. Incredibly smooth - GPU-accelerated and requestAnimationFrame-driven for ultimate performance. Compared to other options out there, Draggable just feels far more natural and fluid, particularly when imposing bounds and momentum. Momentum-based animation - if you have InertiaPlugin loaded, you can simply set inertia: true in the config object and it'll automatically apply natural, momentum-based movement after the mouse/touch is released, causing the object to glide gracefully to a stop. You can even control the amount of resistance, maximum or minimum duration, etc. Complex snapping made easy - snap to points within a certain radius (see example), or feed in an array of values and it'll select the closest one, or implement your own custom logic in a function. Ultimate flexibility. You can have things live-snap (while dragging) or only on release (even with momentum applied, thanks to InertiaPlugin)! Impose bounds - tell a draggable element to stay within the bounds of another DOM element (a container) as in bounds:"#container" or define bounds as coordinates like bounds:{top:100, left:0, width:1000, height:800} or specific maximum/minimum values like bounds:{minRotation:0, maxRotation:270}. Sense overlaps with hitTest() - see if one element is overlapping another and even set a tolerance threshold (like at least 20 pixels or 25% of either element's total surface area) using the super-flexible Draggable.hitTest() method. Feed it a mouse event and it'll tell you if the mouse is over the element. See http://codepen.io/GreenSock/pen/GFBvn for a simple example. Define a trigger element - maybe you want only a certain area to trigger the dragging (like the top bar of a window) - it's as simple as trigger:"#topBar", for example. Drag position, rotation, or scroll - lots of drag types to choose from: "x,y" | "top,left" | "rotation" | "scroll" | "x" | "y" | "top" | "left" | "scrollTop" | "scrollLeft" Lock movement along a certain axis - set lockAxis:true and Draggable will watch the direction the user starts to drag and then restrict it to that axis. Or if you only want to allow vertical or horizontal movement, that's easy too using the type ("top", "y" or "scrollTop" only allow vertical movement; "x", "left", or "scrollLeft" only allow horizontal movement). Rotation honors transform origin - by default, spinnable elements will rotate around their center, but you can set transformOrigin to something else to make the pivot point be elsewhere. For example, if you call gsap.set(yourElement, {transformOrigin:"top left"}) before dragging, it will rotate around its top left corner. Or use % or px. Whatever is set in the element's css will be honored. Rich callback system and event dispatching - you can use any of the following callbacks: onPress, onDragStart, onDrag, onDragEnd, onRelease,, onLockAxis, and onClick. Inside the callbacks, "this" refers to the Draggable instance itself, so you can easily access its "target" or bounds, etc. If you prefer event listeners instead, Draggable dispatches events too so you can do things likeyourDraggable.addEventListener("dragend", yourFunc); Works great with SVG Even works in transformed containers! Got a Draggable inside a rotated/scaled container? No problem. No other tool handles this properly that we've seen. Auto-scrolling, even in multiple containers - set autoScroll:1 for normal-speed auto scrolling, or autoScroll:2 would scroll twice as fast, etc. The closer you move toward the edge, the faster scrolling gets. See a demo here (added in version 0.12.0) Sense clicks when the element moves less than 3 pixels - a common challenge is figuring out when a user is trying to click/tap an object rather than drag it, so if the mouse/touch moves less than 3 pixels from its starting position, it will be interpreted as a "click" and the onClick callback will be called (and a "click" event dispatched) without actually moving the element. You can define a different threshold using minimumMovement config property, like minimumMovement:6 for 6 pixels. All major browsers are supported including IE9+. IE8 lacks hitTest() support. Demos Draggable Showcase Draggable How-To Demos See full documentation here. To get InertiaPlugin (for the momentum-based features), join Club GreenSock today. You'll be glad you did. If not, we'll gladly issue a full refund. To learn how to include Draggable and InertiaPlugin into your project, see the GSAP install docs.

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. Percentage-based transforms (great for responsive animation) Have you ever had to Google "vertically center a div with CSS"? Maybe you used a bunch of jQuery code that measures the width and height of a bunch of elements so that you can center them based on half-width and half-height? Ever used an onresize event to painstakingly recalculate the size and position of multiple elements that you need for a full-screen, responsive animation? We have very good news for you. CSSPlugin recognizes two new special properties: xPercent and yPercent which can be combined with regular x and y transforms to deliver unprecedented positional control. And yes, since these are transforms, they can be GPU-accelerated for outstanding performance. Example: using xPercent for responsive fullscreen sliders / carousels With the new xPercent property you can easily create fullscreen sliders that don't require lots of costly calculations when screens change size, nor do you have to create separate animations for different devices. Notice how in the demo below you can change the width of the black container and the animation seamlessly adjusts. No code trickery behind the scenes, the TimelineMax animation is built only once. See the Pen xPercent / basic by GreenSock (@GreenSock) on CodePen. To achieve this type of centered layout you could use the following simplified approach //CSS to place origin of all elements in the center or their parent .myClass { position:absolute; left:50%; top:50%; } //JS //center all .myClass elements around their origins TweenLite.set(".myClass", {xPercent:-50, yPercent:-50});//handles all vendor prefixes of translateX(-50%) translateY(-50%) //now we can animate myElement's x/y such that its center is 100px,200px from the origin TweenLite.to(myElement, 1, {x:100, y:200}); CSSPlugin accomplishes this under the hood by prepending a translate(x,y) to the normal matrix() or matrix3d() that it sets on the element. <div class="myClass" style="transform: translate(-50%, -50%) translate3d(150px, 0px, 0px);"></div> As a convenience, if you set the regular x or y to a percent-based value like 50%", GSAP will recognize that and funnel that value to xPercent or yPercent property for you, but we recommend using xPercent/yPercent directly. Thanks to Gary Chamberlain for prompting this feature. Better RequireJS/AMD/Browserify/Node/CommonJS compatibility We have received quite a few requests to make GSAP work with module/dependency tools like RequireJS, Browserify, etc. and we're happy to announce that as of version 1.13.1, that wish has been granted. So, for example, with Browserify you can require("./TweenLite.js") and it'll work. If you're a RequireJS user, snag a super simple example set of files here. A special thanks to David Hellsing for his assistance. Save kb by skipping jQuery. Default selector: document.querySelectorAll() Probably the most common reason that developers load jQuery is to leverage it as a selector engine but all modern browsers support document.querySelectorAll(), so as of version 1.13.1, GSAP uses that as a fallback (after attempting to detect a selector engine like jQuery). That means that you can do something like this, for example: TweenLite.to("li:first-child, li:last-child", 1, {opacity:0.5}); Without loading jQuery. And more Several minor bugs have been squashed too, so make sure you snag the latest files to make sure you're rockin' buttery smooth 60fps animations. Recommended reading: Main GSAP JS page lagSmoothing() and other performance improvements in 1.12.0 Myth Busting: CSS Animations vs JavaScript Why GSAP? A practical guide for developers

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. We're excited to announce several new features in the GreenSock Animation Platform (GSAP) 1.12.0 that will increase not only "real" performance, but "perceived" performance as well. The innovative lagSmoothing() feature allows GSAP to automatically heal from CPU spikes that cause lag, all while maintaining perfect synchronization between all animations. And the new "lazy" rendering helps avoid layout thrashing when many animations start simultaneously. Have you ever noticed how scrolling in iOS Safari stops all animations until the scroll stops, and then animations tend to jerk forward? Thanks Apple. The new lagSmoothing() makes it a much more pleasant experience, resuming animations fluidly. These features are already activated by default in GSAP 1.12.0, so you get them "free" by updating. We've created a few demos and videos to help you understand the impact of these new changes. Both features are explained in detail below. Use the demos, watch the videos and be sure to snag the latest version of GSAP. Videos (watch these first) Performance Test of lagSmoothing() and lazy When you click "run test", a tween is created for each blue box to animate it down 150px linearly. The point is to create a "perfect storm" scenario where a LOT of tweens are starting at the same time which would typically trigger the read/write/read/write style recalculation performance killer in many browsers, hammering the CPU initially. Watch how much faster things are when you enable the new features. See the Pen Blog Post: New GSAP 1.12.0 Performance Features by GreenSock (@GreenSock) on CodePen. "lazy" details Some browsers (notably Webkit) impose a performance penalty for sequential read/write/read/write of DOM-related properties, forcing a costly style recalculation for each cycle so it is better to group reading and then writing tasks (read/read/write/write is faster than read/write/read/write). When you tween a property, GSAP must first read the current values so that it can properly interpolate between the start and end values (even for set() calls because they must accommodate reversion, like when sitting on a timeline that could be reversed). Consequently, when you have a bunch of tweens that are all rendering for the first time concurrently (on the same "tick"), each one would read and then write, resulting in the dreaded read/write/read/write scenario. Normally, you'd never notice a difference unless you have a lot of tweens starting at the same time. As of version 1.12.0, when a tween renders for the very first time and reads its starting values, GSAP will automatically "lazy render" that particular tick, meaning it will try to delay the rendering (writing of values) until the very end of the "tick" cycle which can improve performance. And again, this only happens on a single "tick", when that tween records its starting values. There are certain very specific scenarios when it may need to force an immediate render, and it will do so intelligently when necessary. That's why it's called "lazy" instead of "delayedRender" - it's not a promise to always delay the render, but it's giving GSAP permission to lazy-render if/when it can. It wouldn't delay the render if, for example, you populate a timeline with a bunch of tweens of the same object and then you immediately seek() to the very end of the timeline - it'd need to render the tweens in sequence immediately to make that seek() function properly. lazy is true by default for pretty much all tweens except zero-duration ones (and set() calls) because it is implied that those should be rendered immediately, as you may have a line of code thereafter which depends on the new values being applied. For example: //let's assume element's opacity is currently 1 and we want to quickly set it to 0 and report it... TweenLite.set(element, {opacity:0, lazy:true}); console.log("opacity is: " + element.style.opacity); //1, not 0 because the tween hasn't rendered yet! In most cases, you won't need to set lazy:true because it's the default for normal tweens, but if you create a LOT of set() calls in a row (like in a loop of more than 30), and you're aware of the risks (don't write code that relies on the tween rendering immediately), you could set lazy:true. You can also disable it on a particular tween by setting lazy:false in the vars object. Again, you'll probably never need to worry about setting lazy yourself - the default behavior is ideal for the vast majority of cases. And this setting is only for tweens (TweenLite or TweenMax) since those actually read/write properties. You'd never set lazy:true on a TimelineLite or TimelineMax, for example. New force3D: "auto" feature Previously, you could set force3D:true to cause an element to always apply a 3D transform which typically gets that element its own compositor layer in the browser/GPU, leading to better performance during animation. The primary down side to that technique is that it could eat up more memory. So for example, try animating 2000 elements with 3D transforms on an iPhone and then scroll the page - it gets pretty janky. Now, you can set force3D:"auto" which will act exactly the same as force3D:true except that at the end of the tween if there are no 3D transforms necessary (rotationX, rotationY, and z are all 0), it will automatically switch back to a 2D transform. You get smooth animation, and restored memory at the end. Summary We're working hard to make sure your animations are buttery-smooth on every device and in every browser. Download the latest version of GSAP to get an instant performance boost today. Recommended reading: Main GSAP JS page Myth Busting: CSS Animations vs JavaScript jQuery vs GSAP: cage match CSS Transitions vs GSAP: cage match Jump Start: GSAP JS Why GSAP? A practical guide for developers Speed comparison

Tweens the text content of a DOM element, replacing it one character at a time (or one word at a time if you set the delimiter to " " (a space) or you can even use a custom delimiter). So when the tween is finished, the DOM element's text has been completely replaced. This also means that if you rewind/restart the tween, the text will be reverted. Here is a simple example of replacing the text in yourElement: //replaces yourElement's text with "This is the new text" over the course of 2 seconds gsap.to(yourElement, {duration: 2, text: "This is the new text", ease: "none"}); If you'd like to use a different delimiter so that instead of replacing character-by-character, it gets replaced word-by-word, just pass an object with configuration properties like this: //replaces word-by-word because the delimiter is " " (a space) gsap.to(yourElement, {duration: 2, text: {value: "This is the new text", delimiter: " "}, ease: "none"}); You can even add a new CSS class to the new text as it comes in. Learn more in the TextPlugin documentation. To learn how to include TextPlugin into your project, see the GSAP install docs.

Allows GSAP to animate the scroll position of the window (like doing window.scrollTo(x, y)) or a <div> DOM element (like doing myDiv.scrollTop = y; myDiv.scrollLeft = x;). To scroll the window to a particular position, use window as the target of the tween like this: //scroll to 400 pixels down from the top gsap.to(window, {duration: 2, scrollTo: 400}); //or to scroll to the element with the ID "#someID": gsap.to(window, {duration: 2, scrollTo:"#someID"}); //or to specify which axis (x or y), use the object syntax: gsap.to(window, {duration: 2, scrollTo: {y: 400, x: 250}}); Or to tween the content of a div, make sure you've set the overflow:scroll on the div and then do this: //scroll to 250 pixels down from the top of the content in the div gsap.to(myDiv, {duration: 2, scrollTo: 250}); Learn more in the ScrollToPlugin documentation. To learn how to include the ScrollToPlugin into your project, see the GSAP install docs.

Scrambles the text in a DOM element with randomized characters (uppercase by default, but you can define lowercase or a set of custom characters), refreshing new randomized characters at regular intervals while gradually revealing your new text (or the original text) over the course of the tween (left to right). Visually it looks like a computer decoding a string of text. Great for rollovers. See the Pen GSAP Scramble Text Plugin - feature plugin page by GreenSock (@GreenSock) on CodePen. You can simply pass a string of text directly as the scrambleText and it'll use the defaults for revealing it, or you can customize the settings by using a generic object with any of the following properties: text : String - The text that should replace the existing text in the DOM element. If omitted (or if "{original}"), the original text will be used. chars : String - The characters that should be randomly swapped in to the scrambled portion the text. You can use "upperCase", "lowerCase", "upperAndLowerCase", or a custom string of characters, like "XO" or "TMOWACB", or "jompaWB!^", etc. (Default: "upperCase") tweenLength : Boolean - If the length of the replacement text is different than the original text, the difference will be gradually tweened so that the length doesn't suddenly jump. For example, if the original text is 50 characters and the replacement text is 100 characters, during the tween the number of characters would gradually move from 50 to 100 instead of jumping immediatley to 100. However, if you'd prefer to have it immediately jump, set tweenLength to false. (Default: true) revealDelay : Number - If you'd like the reveal (unscrambling) of the new text to be delayed for a certain portion of the tween so that the scrambled text is entirely visible for a while, use revealDelay to define the time you'd like to elapse before the reveal begins. For example, if the tween's duration is 3 seconds but you'd like the scrambled text to remain entirely visible for first 1 second of the tween, you'd set revealDelay to 1. (Default: 0) newClass : String - If you'd like the new text to have a particular class applied (using a <span> tag wrapped around it), use newClass:"YOUR_CLASS_NAME". This makes it easy to create a distinct look for the new text. (Default: null) oldClass : String - If you'd like the old (original) text to have a particular class applied (using a <span> tag wrapped around it), use oldClass:"YOUR_CLASS_NAME". This makes it easy to create a distinct look for the old text. (Default: null) speed : Number - Controls how frequently the scrambled characters are refreshed. The default is 1 but you could slow things down by using 0.2 for example (or any number). (Default: 1) delimiter : String - By default, each character is replaced one-by-one, but if you'd prefer to have things revealed word-by-word, you could use a delimiter of " " (space). (Default: "") //use the defaults gsap.to(element, {duration: 1, scrambleText:"THIS IS NEW TEXT"}); //or customize things: gsap.to(element, {duration: 1, scrambleText:{text:"THIS IS NEW TEXT", chars:"XO", revealDelay:0.5, speed:0.3, newClass:"myClass"}}); Demos ScrambleText Demos To learn how to include ScrambleText into your project, see the GSAP install docs.

Note: This plugin was replaced by SnapPlugin in GSAP 3. Please see the GSAP 3 release notes for details. If you'd like the inbetween values in a tween to always get rounded to the nearest integer, use the roundProps special property. Just pass in a comma-delimited String containing the property names that you'd like rounded. For example, if you're tweening the x, y, and alpha properties of mc and you want to round the x and y values (not alpha) every time the tween is rendered, you'd do: TweenMax.to(element, 2, {x:300, y:200, alpha:0.5, roundProps:"x,y"});

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. Enables TweenLite and TweenMax to animate properties of Raphael JavaScript objects (see http://www.raphaeljs.com/). Raphael is a JavaScript framework that simplifies work with vector graphics on the web. For example: // creates canvas 550 × 400 at 10, 50 var paper = Raphael(10, 50, 550, 400); // creates rectangle at x = 50, y = 40, with a width of 200 and height of 100 var rect = paper.rect(50, 40, 200, 100); // sets the fill attribute of the rectangle to red (#f00) rect.attr("fill", "#f00"); // tween the fill to blue (#00f) and x to 100, y to 100, width to 100 and height to 50 over the course of 3 seconds using an ease of Power1.easeInOut TweenLite.to(rect, 3, {raphael:{fill:"#00f", x:100, y:100, width:100, height:50}, ease:Power1.easeInOut}); You can tween any of the properties that you would normally set using raphael's attr() method as well as the following transformation properties: rotation, scaleX, scaleY, skewX, skewY, tx and ty and even shortRotation which will rotate in the shortest direction to the destination value. tx and ty refer to the translation x and y properties (e and f from the element's matrix). This gives you a lot of control, even beyond what's easily accomplished through Raphael's own methods. Learn more in the RaphaelPlugin documentation.

Sometimes it's useful to tween a value at a particular velocity and/or acceleration without a specific end value in mind. PhysicsPropsPlugin allows you to tween any numeric property of any object based on these concepts. Keep in mind that any easing equation you define for your tween will be completely ignored for these properties. Instead, the physics parameters will determine the movement/easing. These parameters, by the way, are not intended to be dynamically updateable, but one unique convenience is that everything is reverseable. So if you create several physics-based tweens, for example, and throw them into a timeline, you could simply call reverse() on the timeline to watch the objects retrace their steps right back to the beginning. Here are the parameters you can define (note that friction and acceleration are both completely optional): velocity : Number - The initial velocity of the object measured in units per second (or for tweens where useFrames is true, it would be measured per frame). (Default: 0) acceleration : Number - The amount of acceleration applied to the object, measured in units per second (or for tweens where useFrames is true, it would be measured per frame). (Default: 0) friction : Number - A value between 0 and 1 where 0 is no friction, 0.08 is a small amount of friction, and 1 will completely prevent any movement. This is not meant to be precise or scientific in any way, but it serves as an easy way to apply a friction-like physics effect to your tween. Generally it is best to experiment with this number a bit, starting at a very low value like 0.02. Also note that friction requires more processing than physics tweens without any friction. (Default: 0) gsap.to(elem, { duration: 2, physicsProps: { x: {velocity: 100, acceleration: 200}, y: {velocity: -200, friction: 0.1} } }); Demos PhysicsProps Demos To learn how to include the PhysicsPropsPlugin into your project, see the GSAP install docs.

Provides simple physics functionality for tweening an object's x and y coordinates (or "left" and "top") based on a combination of velocity, angle, gravity, acceleration, accelerationAngle, and/or friction. It is not intended to replace a full-blown physics engine and does not offer collision detection, but serves as a way to easily create interesting physics-based effects with the GreenSock animation platform. Parameters are not intended to be dynamically updateable, but one unique convenience is that everything is reverseable. So if you spawn a bunch of particle tweens, for example, and throw them into a timeline, you could simply call reverse() on the timeline to watch the particles retrace their steps right back to the beginning. Keep in mind that any easing equation you define for your tween will be completely ignored for these properties. Usage gsap.to(element, {duration: 2, physics2D: {velocity: 300, angle: -60, acceleration: 50, accelerationAngle: 180}}); See the Pen Physics2D Demo by GreenSock (@GreenSock) on CodePen. Learn more in the Physics2DPlugin documentation. Demos Physics2D Demos To learn how to include Physics2D into your project, see the GSAP install docs.

Tweens special EaselJS-related properties for things like saturation, contrast, tint, colorize, brightness, exposure, and hue which leverage EaselJS's ColorFilter and ColorMatrixFilter (see http://www.createjs.com/#!/EaselJS for more information about EaselJS). Of course you don't need the plugin to tween normal numeric properties of EaselJS objects (like x and y), but some filters or effects require special manipulation which is what EaselPlugin is for. Currently it only handles special properties related to ColorFilter and ColorMatrixFilter, and it can tween the "frame" property of a MovieClip. GreenSock's EaselPlugin exposes convenient properties that aren't a part of EaselJS's API like "tint", "tintAmount", "exposure", and "brightness" for ColorFilter, as well as "saturation", "hue", "contrast", "colorize", and "colorizeAmount" for ColorMatrixFilter. Learn more in the EaselPlugin documentation.