Search Results

SEARCH

Search Results

Product related results

CustomBounce

CustomBounce allows you to create amazing bounce animations with squash and stretch.

CustomWiggle

CustomWiggle generates intricate wiggle easing curves through setting a few simple parameters.

CustomEase

CustomEase frees you from the limitations of canned easing options; create literally any easing curve imaginable by simply drawing it in the Ease Visualizer or by copying/pasting an SVG path. Zero limitations. Use as many control points as you want.

ModifiersPlugin

ModifiersPlugin intercepts values that GSAP would normally apply on each update ("tick"), passes them to your function which can run custom logic and return a new value (great for snapping, clamping, wrapping, or other dynamic effects).

MorphSVGPlugin

Morph any SVG shape into any other shape smoothly regardless of the number of points in each.

DrawSVGPlugin

DrawSVGPlugin allows you to progressively reveal (or hide) SVG strokes to make them look like they're being drawn.

RoughEase

Create a gritty, un-smooth ease. Great for flickers and shakes with lots of customizations available.

SplitTextField

SplitTextField makes it easy to break apart a TextField so that each character, word, or line is in its own TextField.

BlitMask

A BlitMask is basically a rectangular Sprite that acts as a high-performance mask for a DisplayObject by caching a bitmap version of it and blitting only the pixels that should be visible at any given time.

CustomEase

Sometimes the standard easing equations (Elastic, Strong, etc.) don't give you quite what you want. This tool allows you to interactively draw a curve for your own custom easing equation and it even writes the code for you.

jquery.gsap.js

Automatically hijacks calls to jQuery.animate() and uses TweenLite to drive the animation. Get an instant speed boost without editing any code!

TweenLite

TweenLite is the fast, lightweight, and flexible core of GSAP (GreenSock Animation Platform), a JavaScript library for HTML5 animation.

TweenMax

TweenMax extends TweenLite, adding many useful (but non-essential) features like repeat(), repeatDelay(), yoyo(), staggered tweens, and more. It also includes many extra tools and plugins by default, making it extremely full-featured (TweenLite, TimelineLite, TimelineMax, CSSPlugin, AttrPlugin, RoundPropsPlugin, DirectionalRotationPlugin, BezierPlugin, and EasePack).

GSAP

GSAP is a suite of tools for scripted, high-performance HTML5 animations that work in all major browsers. No other library delivers such advanced sequencing, API efficiency, and tight control. Stop wrestling with cumbersome CSS animations, stuttery jQuery.animate() calls, or a system that limits your creativity. Use animation to tell a story in a rich way rather than settling for a few fades and slides.

TimelineLite

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.

TimelineMax

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 more.TimelineMax is GSAP's most powerful and feature-packed sequencing tool.

Draggable

Make virtually any DOM element draggable, spinnable, tossable, and even flick-scrollable across devices (mouse and touch), complete with momentum-based physics, snapping, and more.

VolumePlugin

Tweens the volume of an object with a soundTransform property (MovieClip/SoundChannel/NetStream, etc.).

VisiblePlugin

Toggles the visibility at the end of a tween.

TweenPlugin

TweenPlugin is the base class for all TweenLite and TweenMax plugins, but generally isn't used directly.

TransformMatrixPlugin

TransformMatrixPlugin allows you to tween a DisplayObject's transform.matrix values directly (a, b, c, d, tx, and ty) or use common properties like x, y, scaleX, scaleY, skewX, skewY, rotation and even shortRotation.

TransformAroundPointPlugin

Normally, all transformations (scale, rotation, and position) are based on the DisplayObject's registration point (most often its upper left corner), but TransformAroundPoint allows you to define ANY point around which 2D transformations will occur during the tween.

TransformAroundCenterPlugin

Normally, all transformations (scale, rotation, and position) are based on the DisplayObject's registration point (most often its upper left corner), but TransformAroundCenter allows you to make the 2D transformations occur around the DisplayObject's center.

TintPlugin

To change a DisplayObject's tint/color, set this to the hex value of the tint you'd like to end up at (or begin at if you're using TweenMax.from()).

ThrowPropsPlugin

ThrowPropsPlugin allows you to smoothly glide any property to a stop, honoring an initial velocity as well as applying optional restrictions on the end value.

StageQualityPlugin

Sets the stage's quality to a particular value during a tween and another value after the tween which can be useful for improving rendering performance in the Flash Player while things are animating.

SoundTransformPlugin

Tweens properties of an object's soundTransform property (like the volume, pan, leftToRight, etc.

ShortRotationPlugin

To tween any rotation property of the target object in the shortest direction, use shortRotation.

SetSizePlugin

Some components require resizing with setSize() instead of standard tweens of width/height in order to scale properly.

SetActualSizePlugin

Some components require resizing with setActualSize() instead of standard tweens of width/height in order to scale properly.

ScrollRectPlugin

Tweens the scrollRect property of a DisplayObject.

ScrambleTextPlugin

Scrambles the text in a TextField 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 over the course of the tween (left to right).

ScalePlugin

ScalePlugin combines scaleX and scaleY into one scale property.

RoundPropsPlugin

If you'd like the inbetween values in a tween to always get rounded to the nearest integer, use the roundProps special property.

QuaternionsPlugin

Performs SLERP interpolation between 2 Quaternions.

Positions2DPlugin

This plugin allows you to define an array of Points at which the target should be positioned during the course of the tween (in order).

PhysicsPropsPlugin

Sometimes it's useful to tween a value at a particular velocity and/or acceleration without a specific end value in mind.

Physics2DPlugin

Provides simple physics functionality for tweening an Object's x and y coordinates based on a combination of velocity, angle, gravity, acceleration, accelerationAngle, and/or friction.

OnCompleteRenderPlugin

Calls a function as soon as the tween completes AND the final frame actually renders to the screen.

OnChangeRatioPlugin

This plugin allows you to define a callback method that should be called whenever the tween's "ratio" property changes which effectively means that the tweening values changed.

MotionBlurPlugin

MotionBlurPlugin provides an easy way to apply a directional blur to a DisplayObject based on its velocity and angle of movement in 2D (x/y).

LiquidPositionPlugin

If you're using LiquidStage and you'd like to tween a DisplayObject to coordinates that are relative to a particular PinPoint (like the CENTER) whose position may change at any time, LiquidPositionPlugin makes it easy by dynamically updating the destination values accordingly.

HexColorsPlugin

Although hex colors are technically numbers, if you try to tween them conventionally, you'll notice that they don't tween smoothly.

GlowFilterPlugin

Tweens a GlowFilter.

FramePlugin

Tweens a MovieClip to a particular frame number.

FrameLabelPlugin

Tweens a MovieClip to a particular frame label.

FrameForwardPlugin

Tweens a MovieClip forward to a particular frame number, wrapping it if/when it reaches the end of the timeline.

FrameBackwardPlugin

Tweens a MovieClip backward to a particular frame number, wrapping it if/when it reaches the beginning of the timeline.

EndVectorPlugin

Tweens numbers in a Vector..

EndArrayPlugin

Tweens numbers in an Array.

DynamicPropsPlugin

Tween something to a destination value that may change at any time.

DropShadowFilterPlugin

Tweens a DropShadowFilter.

DirectionalRotationPlugin

Tweens any rotation-related property to another value in a particular direction which can be either clockwise, counter-clockwise or in the shortest direction.

ColorTransformPlugin

Tweens ColorTransform properties of a DisplayObject to do advanced effects like overexposing, altering the brightness or setting the percent/amount of tint.

ColorMatrixFilterPlugin

ColorMatrixFilter tweening offers an easy way to tween a DisplayObject's saturation, hue, contrast, brightness, and colorization.

CirclePath2DPlugin

Tweens an object along a CirclePath2D motion path in any direction (clockwise, counter-clockwise, or shortest).

CacheAsBitmapPlugin

Forces the cacheAsBitmap property of a DisplayObject to be a certain value (true or false) during the tween and then sets it back to whatever it was before the tween was rendered for the first time.

BlurFilterPlugin

Tweens a BlurFilter.

BezierPlugin

Animate virtually any property (or properties) along a Bezier (curved) path. Supports both Cubic and Quadratic Bezier curves.

BevelFilterPlugin

Tweens a BevelFilter.

AutoAlphaPlugin

autoAlpha is exactly the same as tweening an object's "alpha" except that it ensures that the object's "visible" property is true until autoAlpha reaches zero at which point it will toggle the "visible" property to false.

TweenNano

A super-lightweight version of TweenLite for when every byte counts.

TimelineMax

GSAP's most powerful and feature-packed sequencing tool, which supports repeat(), yoyo(), additional methods for working with labels and lots more.

TimelineLite

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.

TweenMax

TweenMax extends TweenLite, adding many useful (but non-essential) features like repeat(), repeatDelay(), yoyo(), updateTo(), and more.

TweenLite

TweenLite is an extremely fast, lightweight, and flexible animation tool that serves as the foundation of the GreenSock Animation Platform (GSAP).

TransformManager

Adds interactive scaling/rotating/moving of DisplayObjects to your Flash or Flex application.

LoaderMax

Smart loading for AS3 projects

GSAP

Flash version of GSAP

ThrowPropsPlugin

ThrowPropsPlugin allows you to smoothly glide any property to a stop, honoring an initial velocity as well as applying optional restrictions on the end value.

TextPlugin

Tweens the text content of a DOM element, replacing it one character or word at a time.

ScrollToPlugin

Animates the scroll position of the window or a DOM element.

ScrambleTextPlugin

Scrambles the text in a DOM element with randomized characters

RoundPropsPlugin

Rounds the inbetween values in a tween to the nearest integer.

RaphaelPlugin

Enables TweenLite and TweenMax to animate properties of Raphael JavaScript objects.

PhysicsPropsPlugin

PhysicsPropsPlugin allows you to tween any numeric property of any object based on velocity and/or acceleration.

Physics2DPlugin

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.

EaselPlugin

Tweens special EaselJS-related properties for things like saturation, contrast, tint, colorize, brightness, exposure, and hue.

DirectionalRotationPlugin

Tweens any rotation-related property to another value in a particular direction.

CSSRulePlugin

Allows TweenLite and TweenMax to animate the raw style sheet rules which affect all objects of a particular selector.

CSSPlugin

With the help of the CSSPlugin, GSAP can animate almost any css-related property of DOM elements.

SplitText Text Animation

SplitText is an easy to use JavaScript utility that allows you to split HTML text into characters, words and lines.

ColorPropsPlugin

Tweens any color-related property of any object.

BezierPlugin

Animate virtually any property (or properties) along a curved Bezier path which you define as an array of points/values.

AttrPlugin

Tweens any numeric attribute of a DOM element.

MORE

Documentation Results

CustomBounce.getSVGData()Calculates the SVG <path> data string for visualizing the supplied ease graphically.
CustomBounce.create()

Creates a CustomBounce ease based on the parameters you provide.

CustomWiggle.getRatio()Translates the tween's progress ratio into the corresponding ease ratio.
CustomWiggle.getSVGData()Calculates the SVG <path> data string for visualizing the supplied ease graphically.
CustomWiggle.create()

Create a wiggle ease by just adjusting a few parameters.

CustomEase.getRatio()

Converts a linear progress value (0-1) into the corresponding eased value.

CustomEase.get()

Gets the CustomEase instance associated with the ID provided.

CustomEase.create()

Creates a CustomEase instance

CustomEase.getSVGData()

Calculates the SVG <path> data string for visualizing the supplied ease graphically.

CustomEase

Most easing equations give a smooth, gradual transition between the start and end values, but RoughEase provides an easy way to get a rough, jagged effect instead, or you can also get an evenly-spaced back-and-forth movement if you prefer.

ModifiersPlugin

If you'd like the inbetween values in a tween to always get rounded to the nearest integer, use the roundProps special property.

TimelineMax.removePause()

Removes pauses that were added to a timeline via TimelineMax.addPause().

MorphSVGPlugin.pathDataToBezier()

Converts SVG <path> data into an array of cubic Bezier points that can be fed directly into a BezierPlugin-based tween.

MorphSVGPlugin.convertToPath()

Converts SVG shapes like <circle>, <rect>, <ellipse>, or <line> into <path>

TweenLite.onOverwrite-Carl-Bad

Allows you to define your own function that will be called when an overwrite occurs

TweenMax.globalTimeScale()

[static] Gets or sets the global timeScale which is a multiplier that affects ALL animations equally. This is a great way to globally speed up or slow down all animations at once.

Draggable.enabled()

Gets or sets the enabled state.

Draggable.vars

The vars object passed into the constructor which stores configuration variables like type, bounds, onPress, onDrag, etc.

Draggable.target

The object that is being dragged.

Draggable.addEventListener()

Registers a function that should be called each time a particular type of event occurs, like "drag" or "dragEnd".

Draggable.isThrowing

Reports if the target of a Draggable is being thrown using a ThrowPropsPlugin tween.

Draggable.autoScroll

To enable auto-scrolling when a Draggable is dragged within 40px of an edge of a scrollable container, set autoScroll to a non-zero value, where 1 is normal speed, 2 is double-speed, etc. (you can use any number). For a more intuitive/natural feel, it will scroll faster as the mouse/touch gets closer to the edge. The default value is 0 (no auto-scrolling).

Draggable.lockedAxis

[read-only] The axis along which movement is locked during that particular drag (either "x" or "y"). For example, if lockAxis is true on a Draggable of type:"x,y", and the user starts dragging horizontally, lockedAxis would be "y" because vertical movement won't be allowed during that drag.

Draggable.getDirection()

Returns the direction (right | left | up | down | left-up | left-down | right-up | right-down) as measured from either where the drag started (the default) or the moment-by-moment velocity, or its proximity to another element that you define.

TimelineMax.recent()Returns the most recently added child tween/timeline/callback regardless of its position in the timeline.
TweenMax.endTime()Returns the time at which the animation will finish according to the parent timeline's local time.
TweenLite.endTime()Returns the time at which the animation will finish according to the parent timeline's local time.
TimelineMax.endTime()Returns the time at which the animation will finish according to the parent timeline's local time.
TimelineLite.endTime()Returns the time at which the animation will finish according to the parent timeline's local time.
TweenLite.render()

Forces a render of all active tweens which can be useful if, for example, you set up a bunch of from() tweens and then you need to force an immediate render (even of "lazy" tweens) to avoid a brief delay before things render on the very next tick.

TweenMax.lagSmoothing()Permits you to control what happens when too much time elapses between two ticks (updates) of the engine, adjusting the core timing mechanism to compensate and avoid "jumps".
TweenLite.lagSmoothing()

Permits you to control what happens when too much time elapses between two ticks (updates) of the engine, adjusting the core timing mechanism to compensate and avoid "jumps".

TimelineMax.yoyo()

Gets or sets the timeline's yoyo state, where true causes the timeline to go back and forth, alternating backward and forward on each repeat.

TimelineMax.useFrames()[READ-ONLY] If true, the timeline's timing mode is frames-based instead of seconds.
TimelineMax.tweenTo()

Creates a linear tween that essentially scrubs the playhead to a particular time or label and then stops.

TimelineMax.tweenFromTo()

Creates a linear tween that essentially scrubs the playhead from a particular time or label to another time or label and then stops.

TimelineMax.totalTime()Gets or sets the position of the playhead according to the totalDuration which includes any repeats and repeatDelays (only available in TweenMax and TimelineMax).
TimelineMax.totalProgress()

[override] Gets or sets the timeline's total progress which is a value between 0 and 1 indicating the position of the virtual playhead (including repeats) where 0 is at the beginning, 0.5 is at the halfway point, and 1 is at the end (complete).

TimelineMax.totalDuration()

[override] Gets or sets the total duration of the timeline in seconds (or frames for frames-based timelines) including any repeats or repeatDelays.

TimelineMax.to()Adds a TweenLite.to() tween to the end of the timeline (or elsewhere using the "position" parameter) - this is a convenience method that accomplishes exactly the same thing as add( TweenLite.to(...) ) but with less code.
TimelineMax.timeScale()Factor that's used to scale time in the animation where 1 = normal speed (the default), 0.5 = half speed, 2 = double speed, etc.
TimelineMax.time()

[override] Gets or sets the local position of the playhead (essentially the current time), not including any repeats or repeatDelays.

TimelineMax.startTime()Gets or sets the time at which the animation begins on its parent timeline (after any delay that was defined).
TimelineMax.staggerTo()Tweens an array of targets to a common set of destination values, but staggers their start times by a specified amount of time, creating an evenly-spaced sequence with a surprisingly small amount of code.
TimelineMax.staggerFromTo()Tweens an array of targets from and to a common set of values, but staggers their start times by a specified amount of time, creating an evenly-spaced sequence with a surprisingly small amount of code.
TimelineMax.staggerFrom()Tweens an array of targets from a common set of destination values (using the current values as the destination), but staggers their start times by a specified amount of time, creating an evenly-spaced sequence with a surprisingly small amount of code.
TimelineMax.shiftChildren()Shifts the startTime of the timeline's children by a certain amount and optionally adjusts labels too.
TimelineMax.set()Adds a zero-duration tween to the end of the timeline (or elsewhere using the "position" parameter) that sets values immediately (when the virtual playhead reaches that position on the timeline) - this is a convenience method that accomplishes exactly the same thing as add( TweenLite.to(target, 0, {...}) ) but with less code.
TimelineMax.seek()[override] Jumps to a specific time (or label) without affecting whether or not the instance is paused or reversed.
TimelineMax.reversed()Gets or sets the animation's reversed state which indicates whether or not the animation should be played backwards.
TimelineMax.reverse()Reverses playback so that all aspects of the animation are oriented backwards including, for example, a tween's ease.
TimelineMax.resume()Resumes playing without altering direction (forward or reversed), optionally jumping to a specific time first.
TimelineMax.restart()Restarts and begins playing forward from the beginning.
TimelineMax.repeatDelay()

Gets or sets the amount of time in seconds (or frames for frames-based timelines) between repeats.

TimelineMax.repeat()

Gets or sets the number of times that the timeline should repeat after its first iteration.

TimelineMax.removeLabel()Removes a label from the timeline and returns the time of that label.
TimelineMax.removeCallback()

Removes a callback from a particular position.

TimelineMax.remove()Removes a tween, timeline, callback, or label (or array of them) from the timeline.
TimelineMax.progress()

[override] Gets or sets the timeline's progress which is a value between 0 and 1 indicating the position of the virtual playhead (excluding repeats) where 0 is at the beginning, 0.5 is halfway complete, and 1 is complete.

TimelineMax.play()Begins playing forward, optionally from a specific time (by default playback begins from wherever the playhead currently is).
TimelineMax.paused()Gets or sets the animation's paused state which indicates whether or not the animation is currently paused.
TimelineMax.pause()Pauses the instance, optionally jumping to a specific time.
TimelineMax.kill()Kills the animation entirely or in part depending on the parameters.
TimelineMax.isActive()Indicates whether or not the animation is currently active (meaning the virtual playhead is actively moving across this instance's time span and it is not paused, nor are any of its ancestor timelines).
TimelineMax.invalidate()

[override] Clears any initialization data (like starting/ending values in tweens) which can be useful if, for example, you want to restart a tween without reverting to any previously recorded starting values.

TimelineMax.getTweensOf()Returns the tweens of a particular object that are inside this timeline.
TimelineMax.getLabelTime()Returns the time associated with a particular label.
TimelineMax.getLabelsArray()

Returns an Array of label objects, each with a "time" and "name" property, in the order that they occur in the timeline.

TimelineMax.getLabelBefore()

Returns the previous label (if any) that occurs before the time parameter.

TimelineMax.getLabelAfter()

Returns the next label (if any) that occurs after the time parameter.

TimelineMax.getChildren()Returns an array containing all the tweens and/or timelines nested in this timeline.
TimelineMax.getActive()

Returns the tweens/timelines that are currently active in the timeline, meaning the timeline's playhead is positioned on the child tween/timeline and the child isn't paused.

TimelineMax.fromTo()Adds a TweenLite.fromTo() tween to the end of the timeline - this is a convenience method that accomplishes exactly the same thing as add( TweenLite.fromTo(...) ) but with less code.
TimelineMax.from()Adds a TweenLite.from() tween to the end of the timeline (or elsewhere using the "position" parameter) - this is a convenience method that accomplishes exactly the same thing as add( TweenLite.from(...) ) but with less code.
TimelineMax.exportRoot()[static] Seamlessly transfers all tweens, timelines, and [optionally] delayed calls from the root timeline into a new TimelineLite so that you can perform advanced tasks on a seemingly global basis without affecting tweens/timelines that you create after the export.
TimelineMax.eventCallback()Gets or sets an event callback like "onComplete", "onUpdate", "onStart", "onReverseComplete" or "onRepeat" (onRepeat only applies to TweenMax or TimelineMax instances) along with any parameters that should be passed to that callback.
TimelineMax.duration()[override] Gets the timeline's duration or, if used as a setter, adjusts the timeline's timeScale to fit it within the specified duration.
TimelineMax.currentLabel()

Gets the closest label that is at or before the current time, or jumps to a provided label (behavior depends on whether or not you pass a parameter to the method).

TimelineMax.clear()Empties the timeline of all tweens, timelines, and callbacks (and optionally labels too).
TimelineMax.call()Adds a callback to the end of the timeline (or elsewhere using the "position" parameter) - this is a convenience method that accomplishes exactly the same thing as add( TweenLite.delayedCall(...) ) but with less code.
TimelineMax.addPause()Inserts a special callback that pauses playback of the timeline at a particular time or label.
TimelineMax.addLabel()Adds a label to the timeline, making it easy to mark important positions/times.
TimelineMax.addCallback()

Inserts a callback at a particular position.

TimelineMax.add()[override] Adds a tween, timeline, callback, or label (or an array of them) to the timeline.
TimelineMax.varsThe vars object passed into the constructor which stores configuration variables like onComplete, onUpdate, etc.
TimelineMax.timeline[Read-only] Parent timeline.
TimelineMax.smoothChildTimingControls whether or not child tweens/timelines are repositioned automatically (changing their startTime) in order to maintain smooth playback when properties are changed on-the-fly.
TimelineMax.dataA place to store any data you want (initially populated with vars.data if it exists).
TimelineMax.autoRemoveChildrenIf true, child tweens/timelines will be removed as soon as they complete.
TimelineLite.useFrames()

[READ-ONLY] If true, the timeline's timing mode is frames-based instead of seconds.

TimelineLite.totalTime()Gets or sets the position of the playhead according to the totalDuration which includes any repeats and repeatDelays (only available in TweenMax and TimelineMax).
TimelineLite.totalProgress()Gets or sets the animation's total progress which is a value between 0 and 1 indicating the position of the virtual playhead (including repeats) where 0 is at the beginning, 0.5 is at the halfway point, and 1 is at the end (complete).
TimelineLite.totalDuration()

[override] Gets the timeline's total duration or, if used as a setter, adjusts the timeline's timeScale to fit it within the specified duration.

TimelineLite.to()

Adds a TweenLite.to() tween to the end of the timeline (or elsewhere using the "position" parameter) - this is a convenience method that accomplishes exactly the same thing as add( TweenLite.to(...) ) but with less code.

TimelineLite.timeScale()Factor that's used to scale time in the animation where 1 = normal speed (the default), 0.5 = half speed, 2 = double speed, etc.
TimelineLite.time()Gets or sets the local position of the playhead (essentially the current time), described in seconds (or frames for frames-based animations) which will never be less than 0 or greater than the animation's duration.
TimelineLite.startTime()Gets or sets the time at which the animation begins on its parent timeline (after any delay that was defined).
TimelineLite.staggerFrom()

Tweens an array of targets from a common set of destination values (using the current values as the destination), but staggers their start times by a specified amount of time, creating an evenly-spaced sequence with a surprisingly small amount of code.

TimelineLite.staggerFromTo()

Tweens an array of targets from and to a common set of values, but staggers their start times by a specified amount of time, creating an evenly-spaced sequence with a surprisingly small amount of code.

TimelineLite.staggerTo()

Tweens an array of targets to a common set of destination values, but staggers their start times by a specified amount of time, creating an evenly-spaced sequence with a surprisingly small amount of code.

TimelineLite.shiftChildren()

Shifts the startTime of the timeline's children by a certain amount and optionally adjusts labels too.

TimelineLite.set()

Adds a zero-duration tween to the end of the timeline (or elsewhere using the "position" parameter) that sets values immediately (when the virtual playhead reaches that position on the timeline) - this is a convenience method that accomplishes exactly the same thing as add( TweenLite.to(target, 0, {...}) ) but with less code.

TimelineLite.seek()

[override] Jumps to a specific time (or label) without affecting whether or not the instance is paused or reversed.

TimelineLite.reversed()Gets or sets the animation's reversed state which indicates whether or not the animation should be played backwards.
TimelineLite.reverse()Reverses playback so that all aspects of the animation are oriented backwards including, for example, a tween's ease.
TimelineLite.resume()Resumes playing without altering direction (forward or reversed), optionally jumping to a specific time first.
TimelineLite.restart()Restarts and begins playing forward from the beginning.
TimelineLite.removeLabel()

Removes a label from the timeline and returns the time of that label.

TimelineLite.remove()

Removes a tween, timeline, callback, or label (or array of them) from the timeline.

TimelineLite.progress()Gets or sets the animations's progress which is a value between 0 and 1 indicating the position of the virtual playhead (excluding repeats) where 0 is at the beginning, 0.5 is at the halfway point, and 1 is at the end (complete).
TimelineLite.play()Begins playing forward, optionally from a specific time (by default playback begins from wherever the playhead currently is).
TimelineLite.paused()Gets or sets the animation's paused state which indicates whether or not the animation is currently paused.
TimelineLite.pause()Pauses the instance, optionally jumping to a specific time.
TimelineLite.kill()Kills the animation entirely or in part depending on the parameters.
TimelineLite.isActive()Indicates whether or not the animation is currently active (meaning the virtual playhead is actively moving across this instance's time span and it is not paused, nor are any of its ancestor timelines).
TimelineLite.invalidate()

[override] Clears any initialization data (like starting/ending values in tweens) which can be useful if, for example, you want to restart a tween without reverting to any previously recorded starting values.

TimelineLite.getTweensOf()

Returns the tweens of a particular object that are inside this timeline.

TimelineLite.getLabelTime()

Returns the time associated with a particular label.

TimelineLite.getChildren()

Returns an array containing all the tweens and/or timelines nested in this timeline.

TimelineLite.recent()

Returns the most recently added child tween/timeline/callback regardless of its position in the timeline.

TimelineLite.fromTo()

Adds a TweenLite.fromTo() tween to the end of the timeline - this is a convenience method that accomplishes exactly the same thing as add( TweenLite.fromTo(...) ) but with less code.

TimelineLite.from()

Adds a TweenLite.from() tween to the end of the timeline (or elsewhere using the "position" parameter) - this is a convenience method that accomplishes exactly the same thing as add( TweenLite.from(...) ) but with less code.

TimelineLite.exportRoot()

[static] Seamlessly transfers all tweens, timelines, and [optionally] delayed calls from the root timeline into a new TimelineLite so that you can perform advanced tasks on a seemingly global basis without affecting tweens/timelines that you create after the export.

TimelineLite.eventCallback()Gets or sets an event callback like "onComplete", "onUpdate", "onStart", "onReverseComplete" or "onRepeat" (onRepeat only applies to TweenMax or TimelineMax instances) along with any parameters that should be passed to that callback.
TimelineLite.duration()

[override] Gets the timeline's duration or, if used as a setter, adjusts the timeline's timeScale to fit it within the specified duration.

TimelineLite.delay()Gets or sets the animation's initial delay which is the length of time in seconds (or frames for frames-based tweens) before the animation should begin.
TimelineLite.clear()

Empties the timeline of all tweens, timelines, and callbacks (and optionally labels too).

TimelineLite.call()

Adds a callback to the end of the timeline (or elsewhere using the "position" parameter) - this is a convenience method that accomplishes exactly the same thing as add( TweenLite.delayedCall(...) ) but with less code.

TimelineLite.addPause()

Inserts a special callback that pauses playback of the timeline at a particular time or label.

TimelineLite.addLabel()

Adds a label to the timeline, making it easy to mark important positions/times.

TimelineLite.add()

[override] Adds a tween, timeline, callback, or label (or an array of them) to the timeline.

TimelineLite.timeline[Read-only] Parent timeline.
TimelineLite.smoothChildTimingControls whether or not child tweens/timelines are repositioned automatically (changing their startTime) in order to maintain smooth playback when properties are changed on-the-fly.
TimelineLite.dataA place to store any data you want (initially populated with vars.data if it exists).
TimelineLite.autoRemoveChildrenIf true, child tweens/timelines will be removed as soon as they complete.
SimpleTimeline.totalTime()Gets or sets the position of the playhead according to the totalDuration which includes any repeats and repeatDelays (only available in TweenMax and TimelineMax).
SimpleTimeline.totalProgress()Gets or sets the animation's total progress which is a value between 0 and 1 indicating the position of the virtual playhead (including repeats) where 0 is at the beginning, 0.5 is at the halfway point, and 1 is at the end (complete).
SimpleTimeline.totalDuration()Gets or sets the animation's total duration including any repeats or repeatDelays (which are only available in TweenMax and TimelineMax).
SimpleTimeline.timeScale()Factor that's used to scale time in the animation where 1 = normal speed (the default), 0.5 = half speed, 2 = double speed, etc.
SimpleTimeline.time()Gets or sets the local position of the playhead (essentially the current time), described in seconds (or frames for frames-based animations) which will never be less than 0 or greater than the animation's duration.
SimpleTimeline.startTime()Gets or sets the time at which the animation begins on its parent timeline (after any delay that was defined).
SimpleTimeline.seek()Jumps to a specific time without affecting whether or not the instance is paused or reversed.
SimpleTimeline.reversed()Gets or sets the animation's reversed state which indicates whether or not the animation should be played backwards.
SimpleTimeline.reverse()Reverses playback so that all aspects of the animation are oriented backwards including, for example, a tween's ease.
SimpleTimeline.resume()Resumes playing without altering direction (forward or reversed), optionally jumping to a specific time first.
SimpleTimeline.restart()Restarts and begins playing forward from the beginning.
SimpleTimeline.progress()Gets or sets the animations's progress which is a value between 0 and 1 indicating the position of the virtual playhead (excluding repeats) where 0 is at the beginning, 0.5 is at the halfway point, and 1 is at the end (complete).
SimpleTimeline.play()Begins playing forward, optionally from a specific time (by default playback begins from wherever the playhead currently is).
SimpleTimeline.paused()Gets or sets the animation's paused state which indicates whether or not the animation is currently paused.
SimpleTimeline.pause()Pauses the instance, optionally jumping to a specific time.
SimpleTimeline.kill()Kills the animation entirely or in part depending on the parameters.
SimpleTimeline.isActive()Indicates whether or not the animation is currently active (meaning the virtual playhead is actively moving across this instance's time span and it is not paused, nor are any of its ancestor timelines).
SimpleTimeline.invalidate()Clears any initialization data (like starting/ending values in tweens) which can be useful if, for example, you want to restart a tween without reverting to any previously recorded starting values.
SimpleTimeline.eventCallback()Gets or sets an event callback like "onComplete", "onUpdate", "onStart", "onReverseComplete" or "onRepeat" (onRepeat only applies to TweenMax or TimelineMax instances) along with any parameters that should be passed to that callback.
SimpleTimeline.duration()Gets or sets the animation's duration, not including any repeats or repeatDelays (which are only available in TweenMax and TimelineMax).
SimpleTimeline.delay()Gets or sets the animation's initial delay which is the length of time in seconds (or frames for frames-based tweens) before the animation should begin.
SimpleTimeline.add()

Adds a TweenLite, TweenMax, TimelineLite, or TimelineMax instance to the timeline at a specific time.

SimpleTimeline.varsThe vars object passed into the constructor which stores configuration variables like onComplete, onUpdate, etc.
SimpleTimeline.timeline[Read-only] Parent timeline.
SimpleTimeline.smoothChildTiming

Controls whether or not child tweens/timelines are repositioned automatically (changing their startTime) in order to maintain smooth playback when properties are changed on-the-fly.

SimpleTimeline.dataA place to store any data you want (initially populated with vars.data if it exists).
SimpleTimeline.autoRemoveChildren

If true, child tweens/timelines will be removed as soon as they complete.

SteppedEase.config()

[static] Permits customization of the ease (defining a number of steps).

SteppedEase

Most easing equations give a smooth, gradual transition between the start and end values, but SteppedEase provides an easy way to define a specific number of steps that the transition should take.

SlowMo.SlowMo()

Constructor

SlowMo.config()

Permits customization of the ease with various parameters.

SlowMo.ease

[static] The default ease instance which can be reused many times in various tweens in order to conserve memory and improve performance slightly compared to creating a new instance each time.

SlowMo

SlowMo is a configurable ease that produces a slow-motion effect that decelerates initially, then moves linearly for a certain portion of the ease (which you can choose) and then accelerates again at the end; it's great for effects like zooming text onto the screen, smoothly moving it long enough for people to read it, and then zooming it off the screen.

RoughEase.getRatio()

[override] Translates the tween's progress ratio into the corresponding ease ratio.

SlowMo.getRatio()

[override] Translates the tween's progress ratio into the corresponding ease ratio.

SteppedEase.getRatio()

[override] Translates the tween's progress ratio into the corresponding ease ratio.

RoughEase.config()

Permits customization of the ease with various parameters.

RoughEase.ease

[static] The default ease instance which can be reused many times in various tweens in order to conserve memory and improve performance slightly compared to creating a new instance each time.

RoughEase

Most easing equations give a smooth, gradual transition between the start and end values, but RoughEase provides an easy way to get a rough, jagged effect instead, or you can also get an evenly-spaced back-and-forth movement if you prefer.

Strong

Provides an easeIn, easeOut, and easeInOut with a power (or strength) of 4 which is identical to the Power4 ease.

Sine

Eases with a relatively low power either at the beginning (easeIn), the end (easeOut), or both (easeInOut).

Quint

Provides an easeIn, easeOut, and easeInOut with a power (or strength) of 4 which is identical to the Power4 ease.

Quart

Provides an easeIn, easeOut, and easeInOut with a power (or strength) of 2 which is identical to the Power2 ease.

Quad.easeIn

[static] Eases in with a power of 1.

Quad.easeInOut

[static] Eases in and then out with a power of 1.

Quad.easeOut

[static] Eases out with a power of 1.

Quart.easeIn

[static] Eases in with a power of 3.

Quart.easeInOut

[static] Eases in and then out with a power of 3.

Quart.easeOut

[static] Eases out with a power of 3.

Quint.easeIn

[static] Eases in with a power of 4.

Quint.easeInOut

[static] Eases in and then out with a power of 4.

Quint.easeOut

[static] Eases out with a power of 4.

Sine.easeIn

[static] Eases in with slight acceleration.

Sine.easeInOut

[static] Eases in and then out with slight acceleration/deceleration.

Sine.easeOut

[static] Eases out with slight deceleration.

Strong.easeIn

[static] Eases in with a power of 4.

Strong.easeInOut

[static] Eases in and then out with a power of 4.

Strong.easeOut

[static] Eases out with a power of 4.

Quad

Provides an easeIn, easeOut, and easeInOut with a power (or strength) of 1 which is identical to the Power1 ease.

Power4

Provides an easeIn, easeOut, and easeInOut with a power (or strength) of 4 which is identical to Quint and Strong but with a more intuitive name.

Power3

Provides an easeIn, easeOut, and easeInOut with a power (or strength) of 3 which is identical to Quart but with a more intuitive name.

Power2

Provides an easeIn, easeOut, and easeInOut with a power (or strength) of 2 which is identical to Cubic but with a more intuitive name.

Power1

Provides an easeIn, easeOut, and easeInOut with a power (or strength) of 1 which is identical to Quad but with a more intuitive name.

Power0.easeIn

[static] Eases in with a power of 0 (linear).

Power0.easeInOut

[static] eases in and then out with a power of 0 (linear).

Power0.easeOut

[static] Eases out with a power of 0 (linear).

Power1.easeIn

[static] Eases in with a power of 1

Power1.easeInOut

[static] Eases in and then out with a power of 1

Power1.easeOut

[static] Eases out with a power of 1.

Power2.easeIn

[static] Eases in with a power of 2

Power2.easeInOut

[static] Eases in and then out with a power of 2

Power2.easeOut

[static] Eases out with a power of 2

Power3.easeIn

[static] Eases in with a power of 3

Power3.easeInOut

[static] Eases in and then out with a power of 3

Power3.easeOut

[static] Eases out with a power of 3

Power4.easeIn

[static] Eases in with a power of 4

Power4.easeInOut

[static] Eases in and then out with a power of 4

Power4.easeOut

[static] Eases out with a power of 4

Power0

Provides an easeIn, easeOut, and easeInOut with a power (or strength) of 0 which is identical to Linear but with a more intuitive name.

Linear.Linear()

Constructor

Linear

Linear ease with no acceleration or deceleration.

Expo.easeIn

[static] Eases in a strong fashion starting out slowly and then accelerating.

Expo.easeOut

[static] Eases out in a strong fashion starting out fast and then decelerating.

Expo.easeInOut

[static] Eases out in a strong fashion starting out fast and then decelerating.

Linear.ease

[static] The default ease instance which can be reused many times in various tweens in order to conserve memory and improve performance slightly compared to creating a new instance each time.

Linear.easeIn

[static] Linear ease with no acceleration or deceleration

Linear.easeInOut

[static] Linear ease with no acceleration or deceleration

Linear.easeNone

[static] Linear ease with no acceleration or deceleration (for backwards compatibility)

Linear.easeOut

[static] Linear ease with no acceleration or deceleration

Expo

Eases in a strong fashion either at the beginning (easeIn), the end (easeOut), or both (easeInOut).

Elastic.easeIn

[static] Eases using a sine wave that starts slowly and then accelerates over time

Elastic.easeInOut

[static] Eases using a sine wave that starts slowly, then accelerates and then decelerates over time.

Elastic.easeOut

[static] Eases using a sine wave that starts fast and then decelerates over time.

Elastic

Eases with an elastic effect either at the beginning (easeIn), the end (easeOut), or both (easeInOut).

EaseLookup.find()

[static] Finds the easing function associated with a particular name (String), like "easeOutStrong".

Ease.EaseLookup

EaseLookup enables you to find the easing function associated with a particular name (String), like "strongEaseOut" which can be useful when loading in XML data that comes in as Strings but needs to be translated to native function references.

Ease.getRatio()

Translates the tween's progress ratio into the corresponding ease ratio.

Linear.getRatio()

Translates the tween's progress ratio into the corresponding ease ratio.

Ease.Ease()

Constructor

Ease

Base class for all GreenSock easing equations.

Cubic

Provides an easeIn, easeOut, and easeInOut with a power (or strength) of 2 which is identical to the Power2 ease.

Circ.easeInOut

[static] Eases in and out with an abrupt change in velocity.

Circ.easeOut

[static] Eases out with an abrupt change in velocity.

Circ.easeIn

[static] Eases in with an abrupt change in velocity.

Cubic.easeIn

[static] Eases in with a power of 2

Cubic.easeInOut

[static] Eases in and then out with a power of 2

Cubic.easeOut

[static] Eases out with a power of 2

Bounce.easeOut

[static] Eases out, bouncing at the end.

Bounce.easeInOut

[static] Bounces in increasing degree towards the center of the ease, then eases out, bouncing to the end (decreasing in degree at the end).

Bounce.easeIn

[static] Bounces slightly at first, then to a greater degree over time, accelerating as the ease progresses.

Bounce

Eases, bouncing either at the beginning (easeIn), the end (easeOut), or both (easeInOut).

Back.easeOut

[static] Eases out with an overshoot.

Back.easeInOut

[static] Eases in and out with an overshoot, initially dipping below the starting value before accelerating towards the end, overshooting it and easing out.

Back.easeIn

[static] Eases in with an overshoot, initially dipping below the starting value before accelerating towards the end.

VelocityTracker.untrack()

[static] Stops tracking the velocity of certain properties (or all properties of an object), like ones initiated with the track() method.

VelocityTracker.track()

[static] Allows you to have the velocity of particular properties automatically tracked for you so that you can access them anytime using the VelocityTracker's getVelocity() method, like myTracker.getVelocity("y").

VelocityTracker.removeProp()

Stops tracking a particular property

VelocityTracker.isTrackingProp()

Allows you to discern whether the velocity of a particular property is being tracked.

VelocityTracker.isTracking()

[static] Allows you to discern whether the velocity of a particular target or one of its properties is being tracked (typically initiated using the VelocityTracker.track() method).

VelocityTracker.getVelocity()

Returns the current velocity of the given property.

VelocityTracker.getByTarget()

[static] Returns the VelocityTracker associated with a particular object.

VelocityTracker.addProp()

Adds a property to track

VelocityTracker.target

Returns the target object with which the VelocityTracker is associated.

SplitText.split()

[static] Splits the text in the target element(s) according to the provided config properties.

SplitText.revert()

Reverts to the original content (the innerHTML before the split).

SplitText.SplitText()

Creates a SplitText object.

SplitText.words

An array containing all of the words' raw DOM elements that were split apart.

SplitText.selector

[static] When you pass a string to a SplitText (as the first parameter), it will feed that to its selector engine internally to find the element(s), and jQuery is used by default if it happens to be loaded.

SplitText.lines

An array containing all of the lines' raw DOM element that were split apart.

SplitText.chars

An array containing all of the characters' raw DOM elements that were split apart.

ThrowPropsPlugin.untrack()

[static] Stops tracking the velocity of certain properties (or all properties of an object), like ones initiated with the track() method.

ThrowPropsPlugin.track()

[static] Allows you to have the velocity of particular properties automatically tracked for you so that ThrowPropsPlugin tweens can access that data internally instead of manually calculating it and feeding it into each tween.

ThrowPropsPlugin.to()

[static] Automatically analyzes various throwProps variables (like velocity, max, min, and resistance) and creates a TweenLite instance with the appropriate duration.

ThrowPropsPlugin.isTracking()

[static] Allows you to discern whether the velocity of a particular target or one of its properties is being tracked (typically initiated using the track() method).

ThrowPropsPlugin.getVelocity()

[static] Returns the current velocity of the given property and target object (only works if you started tracking the property using the ThrowPropsPlugin.track() or VelocityTracker.track() method).

ThrowPropsPlugin.calculateTweenDuration()

[static] Analyzes various throwProps variables (like initial velocities, max/min values, and resistance) and determines the appropriate duration.

ThrowPropsPlugin.calculateDuration()

[static] Calculates the duration (in seconds) that it would take to move from a particular start value to an end value at the given initial velocity, decelerating according to a certain easing equation (like Strong.easeOut).

ThrowPropsPlugin.calculateChange()

[static] Determines the amount of change given a particular velocity, an easing equation, and the duration that the tween will last.

ThrowPropsPlugin.defaultResistance

[static] The default resistance that is used to calculate how long it will take for the tweening property (or properties) to come to rest by the static ThrowPropsPlugin.to() and ThrowPropsPlugin.calculateTweenDuration() methods.

TextPlugin

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).

ScrollToPlugin

Allows TweenLite and TweenMax to animate the scroll position of either the window (like doing window.scrollTo(x, y)) or a <div> DOM element's content (like doing myDiv.scrollTop = y; myDiv.scrollLeft = x;).

ScrambleTextPlugin

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 over the course of the tween (left to right).

RoundPropsPlugin

If you'd like the inbetween values in a tween to always get rounded to the nearest integer, use the roundProps special property.

RaphaelPlugin

Enables TweenLite and TweenMax to animate properties of Raphael JavaScript objects (see http://www.raphaeljs.com/).

PhysicsPropsPlugin

Sometimes it's useful to tween a value at a particular velocity and/or acceleration without a specific end value in mind.

Physics2DPlugin

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.

EaselPlugin

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).

DirectionalRotationPlugin

Tweens any rotation-related property to another value in a particular direction which can be either clockwise ("_cw" suffix), counter-clockwise ("_ccw" suffix), or in the shortest direction ("_short" suffix) in which case the plugin chooses the direction for you based on the shortest path.

CSSRulePlugin.getRule()

[static] Provides a simple way to find the style sheet object associated with a particular selector like ".myClass" or "#myID".

BezierPlugin.quadraticToCubic()

[static] Returns the Cubic equivalent of a Quadratic Bezier.

BezierPlugin.cubicToQuadratic()

[static] Using the fixed midpoint approach, we return an array of 4 quadratic Beziers that closely approximates the cubic Bezier data provided.

BezierPlugin.bezierThrough()

[static] Takes an array that contains objects (could be Points, could be generic objects with any number of properties but they should all match in terms of the names of properties like [{x:0, y:0, scaleX:0.5}, {x:100, y:-200, scaleX:1.2}, {x:300, y:20, scaleX:0.8}]) and plots Bezier segments THROUGH those values and returns an array containing a generic object for each Bezier segment.

TweenPlugin

TweenPlugin is the base class for all TweenLite and TweenMax plugins, but generally isn't used directly.

TweenMax.pauseAll()

[static] [deprecated] Pauses all tweens and/or delayedCalls/callbacks and/or timelines.

TweenMax.yoyo()

Gets or sets the tween's yoyo state, where true causes the tween to go back and forth, alternating backward and forward on each repeat.

TweenMax.updateTo()

Updates tweening values on the fly so that they appear to seamlessly change course even if the tween is in-progress.

TweenMax.totalProgress()

totalProgress()

TweenMax.totalDuration()

[override] Gets or sets the total duration of the tween in seconds (or frames for frames-based tweens) including any repeats or repeatDelays.

TweenMax.to()

[static] Static method for creating a TweenMax instance that animates to the specified destination values (from the current values).

TweenMax.time()

[override] Gets or sets the local position of the playhead (essentially the current time), not including any repeats or repeatDelays.

TweenMax.staggerFrom()

[static] Tweens an array of targets from a common set of destination values (using the current values as the destination), but staggers their start times by a specified amount of time, creating an evenly-spaced sequence with a surprisingly small amount of code.

TweenMax.staggerFromTo()

[static] Tweens an array of targets from a common set of destination values to a common set of destination values, but staggers their start times by a specified amount of time, creating an evenly-spaced sequence with a surprisingly small amount of code.

TweenMax.staggerTo()

[static] Tweens an array of targets to a common set of destination values, but staggers their start times by a specified amount of time, creating an evenly-spaced sequence with a surprisingly small amount of code.

TweenMax.set()

[static] Immediately sets properties of the target accordingly - essentially a zero-duration to() tween with a more intuitive name.

TweenMax.resumeAll()

[static] [deprecated] Resumes all paused tweens and/or delayedCalls/callbacks and/or timelines.

TweenMax.repeatDelay()

Gets or sets the amount of time in seconds (or frames for frames-based tweens) between repeats.

TweenMax.repeat()

Gets or sets the number of times that the tween should repeat after its first iteration.

TweenMax.progress()

[override] Gets or sets the tween's progress which is a value between 0 and 1 indicating the position of the virtual playhead (excluding repeats) where 0 is at the beginning, 0.5 is halfway complete, and 1 is complete.

TweenMax.killTweensOf()

[static] Kills all the tweens (or specific tweening properties) of a particular object or the delayedCalls to a particular function.

TweenMax.killDelayedCallsTo()

[static] Immediately kills all of the delayedCalls to a particular function.

TweenMax.killChildTweensOf()

[static] Kills all tweens of the children of a particular DOM element, optionally forcing them to completion first.

TweenMax.killAll()

[static] Kills all tweens and/or delayedCalls/callbacks, and/or timelines, optionally forcing them to completion first.

TweenMax.isTweening()

[static] Reports whether or not a particular object is actively tweening.

TweenMax.invalidate()

[override] Clears any initialization data (like starting/ending values in tweens) which can be useful if, for example, you want to restart a tween without reverting to any previously recorded starting values.

TweenMax.getTweensOf()

[static] Returns an array containing all the tweens of a particular target (or group of targets) that have not been released for garbage collection yet which typically happens within a few seconds after the tween completes.

TweenMax.getAllTweens()

[static] Returns an array containing all tweens (and optionally timelines too, excluding the root timelines).

TweenMax.fromTo()

[static] Static method for creating a TweenMax instance that allows you to define both the starting and ending values (as opposed to to() and from() tweens which are based on the target's current values at one end or the other).

TweenMax.from()

[static] Static method for creating a TweenMax instance that tweens backwards - you define the BEGINNING values and the current values are used as the destination values which is great for doing things like animating objects onto the screen because you can set them up initially the way you want them to look at the end of the tween and then animate in from elsewhere.

TweenMax.delayedCall()

[static] Provides a simple way to call a function after a set amount of time (or frames).

TweenMax.totalTime()Gets or sets the position of the playhead according to the totalDuration which includes any repeats and repeatDelays (only available in TweenMax and TimelineMax).
TweenMax.timeScale()Factor that's used to scale time in the animation where 1 = normal speed (the default), 0.5 = half speed, 2 = double speed, etc.
TweenMax.startTime()Gets or sets the time at which the animation begins on its parent timeline (after any delay that was defined).
TweenMax.seek()Jumps to a specific time without affecting whether or not the instance is paused or reversed.
TweenMax.reversed()Gets or sets the animation's reversed state which indicates whether or not the animation should be played backwards.
TweenMax.reverse()Reverses playback so that all aspects of the animation are oriented backwards including, for example, a tween's ease.
TweenMax.resume()Resumes playing without altering direction (forward or reversed), optionally jumping to a specific time first.
TweenMax.restart()Restarts and begins playing forward from the beginning.
TweenMax.play()Begins playing forward, optionally from a specific time (by default playback begins from wherever the playhead currently is).
TweenMax.paused()Gets or sets the animation's paused state which indicates whether or not the animation is currently paused.
TweenMax.pause()Pauses the instance, optionally jumping to a specific time.
TweenMax.kill()Kills the animation entirely or in part depending on the parameters.
TweenMax.isActive()Indicates whether or not the animation is currently active (meaning the virtual playhead is actively moving across this instance's time span and it is not paused, nor are any of its ancestor timelines).
TweenMax.eventCallback()Gets or sets an event callback like "onComplete", "onUpdate", "onStart", "onReverseComplete" or "onRepeat" (onRepeat only applies to TweenMax or TimelineMax instances) along with any parameters that should be passed to that callback.
TweenMax.duration()Gets or sets the animation's duration, not including any repeats or repeatDelays (which are only available in TweenMax and TimelineMax).
TweenMax.delay()Gets or sets the animation's initial delay which is the length of time in seconds (or frames for frames-based tweens) before the animation should begin.
TweenMax.TweenMax()

Constructor

TweenMax.varsThe vars object passed into the constructor which stores configuration variables like onComplete, onUpdate, etc.
TweenMax.timeline[Read-only] Parent timeline.
TweenMax.ticker

[static] The object that dispatches a "tick" event each time the engine updates, making it easy for you to add your own listener(s) to run custom logic after each update (great for game developers).

TweenMax.target[READ-ONLY] Target object (or array of objects) whose properties the tween affects.
TweenMax.selector[static] The selector engine (like jQuery) that should be used when a tween receives a string as its target, like TweenLite.to("#myID", 1, {x:"100px"}).
TweenMax.dataA place to store any data you want (initially populated with vars.data if it exists).
TweenLite.invalidate()

[override] Clears any initialization data (like starting/ending values in tweens) which can be useful if, for example, you want to restart a tween without reverting to any previously recorded starting values.

TweenLite.totalTime()Gets or sets the position of the playhead according to the totalDuration which includes any repeats and repeatDelays (only available in TweenMax and TimelineMax).
TweenLite.totalProgress()Gets or sets the animation's total progress which is a value between 0 and 1 indicating the position of the virtual playhead (including repeats) where 0 is at the beginning, 0.5 is at the halfway point, and 1 is at the end (complete).
TweenLite.totalDuration()Gets or sets the animation's total duration including any repeats or repeatDelays (which are only available in TweenMax and TimelineMax).
TweenLite.timeScale()Factor that's used to scale time in the animation where 1 = normal speed (the default), 0.5 = half speed, 2 = double speed, etc.
TweenLite.time()Gets or sets the local position of the playhead (essentially the current time), described in seconds (or frames for frames-based animations) which will never be less than 0 or greater than the animation's duration.
TweenLite.startTime()Gets or sets the time at which the animation begins on its parent timeline (after any delay that was defined).
TweenLite.seek()Jumps to a specific time without affecting whether or not the instance is paused or reversed.
TweenLite.reversed()Gets or sets the animation's reversed state which indicates whether or not the animation should be played backwards.
TweenLite.reverse()Reverses playback so that all aspects of the animation are oriented backwards including, for example, a tween's ease.
TweenLite.resume()Resumes playing without altering direction (forward or reversed), optionally jumping to a specific time first.
TweenLite.restart()Restarts and begins playing forward from the beginning.
TweenLite.progress()Gets or sets the animations's progress which is a value between 0 and 1 indicating the position of the virtual playhead (excluding repeats) where 0 is at the beginning, 0.5 is at the halfway point, and 1 is at the end (complete).
TweenLite.play()Begins playing forward, optionally from a specific time (by default playback begins from wherever the playhead currently is).
TweenLite.paused()Gets or sets the animation's paused state which indicates whether or not the animation is currently paused.
TweenLite.pause()Pauses the instance, optionally jumping to a specific time.
TweenLite.kill()Kills the animation entirely or in part depending on the parameters.
TweenLite.isActive()Indicates whether or not the animation is currently active (meaning the virtual playhead is actively moving across this instance's time span and it is not paused, nor are any of its ancestor timelines).
TweenLite.eventCallback()Gets or sets an event callback like "onComplete", "onUpdate", "onStart", "onReverseComplete" or "onRepeat" (onRepeat only applies to TweenMax or TimelineMax instances) along with any parameters that should be passed to that callback.
TweenLite.duration()Gets or sets the animation's duration, not including any repeats or repeatDelays (which are only available in TweenMax and TimelineMax).
TweenLite.delay()Gets or sets the animation's initial delay which is the length of time in seconds (or frames for frames-based tweens) before the animation should begin.
TweenLite.varsThe vars object passed into the constructor which stores configuration variables like onComplete, onUpdate, etc.
TweenLite.timeline[Read-only] Parent timeline.
TweenLite.dataA place to store any data you want (initially populated with vars.data if it exists).
Draggable.update()

Updates the Draggable's x and y properties so that they reflect the target element's current position.

Draggable.timeSinceDrag()

Returns the time (in seconds) that has elapsed since the last drag ended - this can be useful in situations where you want to skip certain actions if a drag just occurred.

Draggable.startDrag()

This is rarely used, but you may force the Draggable to begin dragging by calling startDrag() and passing it the original mouse or touch event that initiated things - this is necessary because Draggable must inspect that event for various information like pageX, pageY, target, etc.

Draggable.kill()

Disables the Draggable instance and removes it from the internal lookup table so that it is made eligible for garbage collection and it cannot be dragged anymore (unless enable() is called).

Draggable.hitTest()

[static] Provides an easy way to test two elements (or an element and a mouse/touch event's position) to determine whether or not they overlap according to whatever threshold you [optionally] define.

Draggable.hitTest()

Provides an easy way to test whether or not the target element overlaps with a particular element (or the mouse position) according to whatever threshold you [optionally] define.

Draggable.get()

[static] Provides an easy way to get the Draggable instance that's associated with a particular DOM element.

Draggable.endDrag()

You may force the Draggable to immediately stop interactively dragging by calling endDrag() and passing it the original mouse or touch event that initiated the stop - this is necessary because Draggable must inspect that event for various information like pageX, pageY, target, etc.

Draggable.enable()

Enables the Draggable instance.

Draggable.disable()

Disables the Draggable instance so that it cannot be dragged anymore (unless enable() is called).

Draggable.create()

[static] Provides a more flexible way to create Draggable instances than the constructor (new Draggable(...)) because the Draggable.create() method can accommodate multiple elements (either as an array of elements or a jQuery object with many results) or even selector text like ".yourClass" which gets fed to whatever TweenLite.selector is (defaults to jQuery if it's loaded).

Draggable.applyBounds()

Immediately updates and applies bounds, ensuring that the target element is within the bounds (if any were defined).

Draggable.zIndex

[static] The starting zIndex that gets applied by default when an element is pressed/touched (for positional types, like "x,y", "top,left", etc.

Draggable.y

[read-only] The current y (vertical) position of the Draggable instance.

Draggable.x

[read-only] The current x (horizontal) position of the Draggable instance.

ThrowPropsPlugin

ThrowPropsPlugin allows you to smoothly glide any property to a stop, honoring an initial velocity as well as applying optional restrictions on the end value. You can define a specific end value or allow it to be chosen automatically based on the initial velocity and ease or you can define a max/min range or even an array of snap-to values that act as notches. ThrowPropsPlugin even integrates VelocityTracker so that you can have it "watch" certain properties to keep track of their velocities for you and then use them automatically when you do a throwProps tween. This is perfect for flick-scrolling or animating things as though they are being thrown (where momentum factors into the tween).

Draggable.tween

[read-only] The TweenLite instance that gets created as soon as the mouse (or touch) is released (when throwProps is true) - this allows you to check its duration or pause/resume or change its timeScale or whatever you want.

Draggable.scrollProxy

[read-only] A special object that gets created for type:"scroll" (or "scrollTop" or "scrollLeft") Draggables; this object manages the scrolling behavior, applying the necessary transforms or margins to accomplish overscrolling when necessary.

Draggable.rotation

[read-only] [only applies to type:"rotation"] The current rotation (in degrees) of the Draggable instance.

Draggable.pointerY

[read-only] The y (vertical) position of the pointer (mouse or touch) associated with the Draggable's last event (like event.pageY).

Draggable.pointerX

[read-only] The x (horizontal) position of the pointer (mouse or touch) associated with the Draggable's last event (like event.pageX).

Draggable.pointerEvent

[read-only] The last pointer event (either a mouse event or touch event) that affected the Draggable instance.

Draggable.minY

[read-only] When bounds are applied, minY refers to the minimum "legal" value of the vertical property (either "y" or "top", depending on which type the Draggable is).

Draggable.minX

[read-only] When bounds are applied, minX refers to the minimum "legal" value of the horizontal property (either "x" or "left", depending on which type the Draggable is).

Draggable.minRotation

[read-only] [only applies to type:"rotation"] When bounds are applied, minRotation refers to the minimum "legal" rotation.

Draggable.maxY

[read-only] When bounds are applied, maxY refers to the maximum "legal" value of the vertical property (either "y" or "top", depending on which type the Draggable is).

Draggable.maxX

[read-only] When bounds are applied, maxX refers to the maximum "legal" value of the horizontal property (either "x" or "left", depending on which type the Draggable is).

Draggable.maxRotation

[read-only] [only applies to type:"rotation"] When bounds are applied, maxRotation refers to the maximum "legal" rotation.

Draggable.endY

[read-only] The ending y (vertical) position of the Draggable instance which is calculated as soon as the mouse/touch is released after a drag, meaning you can use it to predict precisely where it'll land after a throwProps flick.

Draggable.lockAxis

If true, dragging more than 2 pixels in either direction (horizontally or vertically) will lock movement into that axis so that the element can only be dragged that direction (horizontally or vertically, whichever had the most initial movement).

Draggable.endX

[read-only] The ending x (horizontal) position of the Draggable instance which is calculated as soon as the mouse/touch is released after a drag, meaning you can use it to predict precisely where it'll land after a throwProps flick.

Draggable.endRotation

[read-only] [only applies to type:"rotation"] The ending rotation of the Draggable instance which is calculated as soon as the mouse/touch is released after a drag, meaning you can use it to predict precisely where it'll land after a throwProps flick.

Animation.totalTime()

Gets or sets the position of the playhead according to the totalDuration which includes any repeats and repeatDelays (only available in TweenMax and TimelineMax).

TweenLite.set()

[static] Immediately sets properties of the target accordingly - essentially a zero-duration to() tween with a more intuitive name.

TweenLite.killTweensOf()

[static] Kills all the tweens (or specific tweening properties) of a particular object or delayedCalls to a particular function.

TweenLite.killDelayedCallsTo()

[static] Immediately kills all of the delayedCalls to a particular function.

TweenLite.getTweensOf()

[static] Returns an array containing all the tweens of a particular target (or group of targets) that have not been released for garbage collection yet which typically happens within a few seconds after the tween completes.

TweenLite.fromTo()

[static] Static method for creating a TweenLite instance that allows you to define both the starting and ending values (as opposed to to() and from() tweens which are based on the target's current values at one end or the other).

TweenLite.from()

[static] Static method for creating a TweenLite instance that tweens backwards - you define the BEGINNING values and the current values are used as the destination values which is great for doing things like animating objects onto the screen because you can set them up initially the way you want them to look at the end of the tween and then animate in from elsewhere.

Animation.totalProgress()

Gets or sets the animation's total progress which is a value between 0 and 1 indicating the position of the virtual playhead (including repeats) where 0 is at the beginning, 0.5 is at the halfway point, and 1 is at the end (complete).

Animation.totalDuration()

Gets or sets the animation's total duration including any repeats or repeatDelays (which are only available in TweenMax and TimelineMax).

Animation.timeScale()

Factor that's used to scale time in the animation where 1 = normal speed (the default), 0.5 = half speed, 2 = double speed, etc.

Animation.time()

Gets or sets the local position of the playhead (essentially the current time), described in seconds (or frames for frames-based animations) which will never be less than 0 or greater than the animation's duration.

Animation.endTime()

Returns the time at which the animation will finish according to the parent timeline's local time.

Animation.startTime()

Gets or sets the time at which the animation begins on its parent timeline (after any delay that was defined).

Animation.seek()

Jumps to a specific time without affecting whether or not the instance is paused or reversed.

Animation.reversed()

Gets or sets the animation's reversed state which indicates whether or not the animation should be played backwards.

Animation.reverse()

Reverses playback so that all aspects of the animation are oriented backwards including, for example, a tween's ease.

Animation.resume()

Resumes playing without altering direction (forward or reversed), optionally jumping to a specific time first.

Animation.restart()

Restarts and begins playing forward from the beginning.

Animation.progress()

Gets or sets the animations's progress which is a value between 0 and 1 indicating the position of the virtual playhead (excluding repeats) where 0 is at the beginning, 0.5 is at the halfway point, and 1 is at the end (complete).

Animation.play()

Begins playing forward, optionally from a specific time (by default playback begins from wherever the playhead currently is).

Animation.paused()

Gets or sets the animation's paused state which indicates whether or not the animation is currently paused.

Animation.kill()

Kills the animation entirely or in part depending on the parameters.

Animation.isActive()

Indicates whether or not the animation is currently active (meaning the virtual playhead is actively moving across this instance's time span and it is not paused, nor are any of its ancestor timelines).

Animation.invalidate()

Clears any initialization data (like starting/ending values in tweens) which can be useful if, for example, you want to restart a tween without reverting to any previously recorded starting values.

Animation.eventCallback()

Gets or sets an event callback like "onComplete", "onUpdate", "onStart", "onReverseComplete" or "onRepeat" (onRepeat only applies to TweenMax or TimelineMax instances) along with any parameters that should be passed to that callback.

Animation.duration()

Gets or sets the animation's duration, not including any repeats or repeatDelays (which are only available in TweenMax and TimelineMax).

TweenLite.delayedCall()

[static] Provides a simple way to call a function after a set amount of time (or frames).

Animation.delay()

Gets or sets the animation's initial delay which is the length of time in seconds (or frames for frames-based tweens) before the animation should begin.

TweenLite.TweenLite()

TweenLite Constructor creates a tween.

Animation.vars

The vars object passed into the constructor which stores configuration variables like onComplete, onUpdate, etc.

Animation.timeline

[Read-only] Parent timeline.

TweenLite.target

[READ-ONLY] Target object (or array of objects) whose properties the tween affects.

TweenLite.ticker

[static] The object that dispatches a "tick" event each time the engine updates, making it easy for you to add your own listener(s) to run custom logic after each update (great for game developers).

TweenLite.onOverwrite

[static] A function that should be called when any tween gets overwritten by another tween (great for debugging).

Animation.pause()

Pauses the instance, optionally jumping to a specific time.

TweenLite.to()

[static] Static method for creating a TweenLite instance that animates to the specified destination values (from the current values).

TweenLite.selector

[static] The selector engine (like jQuery) that should be used when a tween receives a string as its target, like TweenLite.to("#myID", 1, {x:"100px"}).

TweenLite.defaultOverwrite

[static] Provides An easy way to change the default overwrite mode.

TweenLite.defaultEase

[static] Provides An easy way to change the default easing equation.

Animation.data

A place to store any data you want (initially populated with vars.data if it exists).

VelocityTracker

Allows you to have the velocity of particular properties automatically tracked for you so that you can access them anytime using the VelocityTracker's getVelocity() method, like myTracker.getVelocity("y").

SplitText

SplitText makes it easy to break apart the text in an HTML element so that each character, word, and/or line is in its own <div>,, making complex animation simple.

Draggable

Provides a surprisingly simple way to make virtually any DOM element draggable, spinnable, tossable, and even flick-scrollable using mouse and/or touch events, plus Draggable integrates beautifully (and optionally) with ThrowPropsPlugin so that the user can flick and have the motion decelerate smoothly based on momentum.

CSSRulePlugin

Allows TweenLite and TweenMax to animate the raw style sheet rules which affect all objects of a particular selector rather than affecting an individual DOM element's style (that's what the CSSPlugin is for).

CSSPlugin

With the help of the CSSPlugin, GSAP can animate almost any css-related property of DOM elements including the obvious things like width, height, margin, padding, top, left, and more plus more interesting things like transforms (rotation, scaleX, scaleY, skewX, skewY, x, y, rotationX, and rotationY), colors, opacity, and lots more.

ColorPropsPlugin

Tweens any color-related property of any object, like myObject.borderColor from "rgb(255,0,51)" to "rgb(102,204,0)" (and you can define the initial color in almost any format like "#FF00CC" or "rgba(255,0,51,0.5)" or "red" or "#f0c" or 0xFF00CC or "hsl(105,50%,80%)").

BezierPlugin

Animate virtually any property (or properties) along a curved Bezier path which you define as an array of points/values that can be interpreted 4 different ways (described as the Bezier's "type", like type:"soft"): "thru" (the default) - the plugin figures out how to draw the Bezier naturally through the supplied values using a proprietary algorithm.

AttrPlugin

Tweens any numeric attribute of a DOM element

Circ

Eases with an abrupt change in velocity either at the beginning (easeIn), the end (easeOut), or both (easeInOut).

Back

Eases with an overshoot either at the beginning (easeIn), the end (easeOut), or both (easeInOut).

SimpleTimeline

SimpleTimeline is the base class for TimelineLite and TimelineMax, providing the most basic timeline functionality and it is used for the root timelines in TweenLite but is only intended for internal use in the GreenSock tweening platform. It is meant to be very fast and lightweight.

Animation

Base class for all TweenLite, TweenMax, TimelineLite, and TimelineMax classes, providing core methods/properties/functionality, but there is no reason to create an instance of this class directly.

TimelineLite

TimelineLite is a powerful sequencing tool that acts as a container for tweens and other timelines, making it simple to control them as a whole and precisely manage their timing. Without TimelineLite, building complex sequences would be far more cumbersome because you'd need to use the delay special property for every tween, making future edits far more tedious.TimelineLite Intro text

TimelineMax

TimelineMax extends TimelineLite, offering exactly the same functionality plus useful (but non-essential) features like repeat, repeatDelay, yoyo, currentLabel(), addCallback(), removeCallback(), tweenTo(), tweenFromTo(), getLabelAfter(), getLabelBefore(), getActive() (and probably more in the future).

TweenLite

TweenLite is an extremely fast, lightweight, and flexible animation tool that serves as the foundation of the GreenSock Animation Platform (GSAP), available in JavaScript, AS2, AS3. 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 use in conjuction with advanced sequencing tools like TimelineLite or TimelineMax to make complex tasks much simpler.

TweenMax

TweenMax extends TweenLite, adding many useful (but non-essential) features like timeScale(), repeat(), repeatDelay(), yoyo(), updateTo(), and more. It also activates many extra plugins by default, making it extremely full-featured. Any of the plugins can work with TweenLite too, but TweenMax saves you the step of activating the common ones like CSSPlugin, RoundPropsPlugin, and BezierPlugin. Since TweenMax extends TweenLite, it can do ANYTHING TweenLite can do plus more. The syntax is identical. You can mix and match TweenLite and TweenMax in your project as you please, but if file size is a concern it is best to stick with TweenLite unless you need a particular TweenMax-only feature.

MORE

Blog Post Results

Club GreenSock Updates, Q1 2017

Club GreenSock members get a fresh batch of superpowers with updates to SplitText, ScrambleText, plus two new eases in this 1st-Quarter 2017 update.

Introducing CustomWiggle and CustomBounce

Add wiggle and bounce effects to your GSAP animations with these highly customizable eases from GreenSock. Even get squash and stretch!

"will-change" must change? Animators beware.

The will-change property can have some unintended consequences for animators, as Chrome 53 proves. Should something be done at the spec level?

GSAP 1.19.0 Released

GSAP version 1.19.0 introduces function-based values, a new "modifiers" plugin, plus convenient updates to ScrollToPlugin and SplitText.

The "Why" Behind the GreenSock License

Why doesn't GreenSock use a more common open source license like MIT? Find out here.

MorphSVGPlugin Performance Update

Since launching MorphSVGPlugin, we've made a bunch of improvements and exposed several new features. Here are the highlights...

Banner ads: the kilobyte conundrum

HTML5 has unique strengths that allow us to move beyond the simplistic "aggregate total file size" mentality of yesteryear. We need to look at kilobyte cost in a new way, especially for banner ads.

Introducing GSAP 1.18.0

GSAP 1.18.0 is packed with exciting features to help you unleash your creativity. Learn about the new "cycle" property for staggered animations, relative HSL color tweening and more.

Solutions for Banner Ads in the Post-Flash World

The sudden and rather violent shift away from Flash in the banner ad industry has designers and developers scrambling. We've got answers. Welcome to the HTML5 era.

HTML5 Banner Survey: Results

The results of our survey about the urgent shift from Flash to HTML5 in banner ads.

Animating SVG with GSAP

A list of common SVG animation challenges along with GSAP solutions. This page is intended to be a go-to resource for anyone animating SVG with GSAP.

GSAP 1.16.x Update

The GSAP 1.16.x update delivers some nifty new features like svgOrigin as well as a better-than-ever Draggable that has autoScroll capabilities, a new method for determining the drag direction, and more.

Advanced tutorial: CubeDial, a 3D Carousel made with GSAP

Chris Gannon shows how he built a draggable 3D carousel with GSAP. We'll call it "CubeDial". It's pretty slick.

Ease Visualizer

Visually explore various eases that are available in GSAP with this interactive tool.

CSS animations performance: the untold story

There are some interesting (and surprising) performance implications of using CSS animations that aren't widely known. Check out this video demonstration.

Breakthrough: SVG animation with GSAP solves cross‑browser issues

Animating the rotation, scale, skew, and position of SVG elements via CSS has been completely impractical due to major browser inconsistencies...until now. GreenSock's CSSPlugin handles major bugs and inconsistencies across a wide range of modern browsers, making it easy for you to animate SVG elements exactly like regular DOM elements... even in IE.

GSAP 1.13.1 Released

Responsive animation just got easier with GSAP 1.13.1 and support for percent-based translations. Plus enhanced support for RequireJS, AMD, Browserify and one less reason to use jQuery.

GSAP 1.12.0: Smoother, faster, smarter HTML5 animation

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.

CSS Animations: Workflow Issues Exposed [Includes Videos]

I'm going to take a deeper look into CSS Animations and how they fit (or don't fit) into a modern animator's workflow. You'll see exactly where some of the pain points are for a typical project and how they can bring your workflow to a grinding halt.

Why GSAP for HTML5 Animation?

People are switching to GSAP in droves, and here are a few of the practical, real-world reasons why.

iOS 7 Safari Performance: A Step Backward?

With the release of iOS 7, I was anticipating some big leaps forward in browser performance. What I found was quite surprising. Is anyone else experiencing the same thing? Here's a quick [and very casual] video showing what I discovered:

Meet GreenSock's Draggable: spin, flick, drag, throw, or scroll with "physics"

Making a DOM element draggable isn't terribly difficult - there are jQuery plugins and even some native HTML5 capabilities in newer browsers. But generic dragging is kinda boring. What about smooth, natural momentum-based continuation after the user releases the mouse (or touch on mobile devices)? What about imposing bounds and edge resistance and silky-smooth redirection to certain landing values that you provide? Or flick/drag scrolling with bounce-back that doesn't look awkward? Or instead of dragging to change the position of an element, what if you want to spin it? Maybe you even want to track the momentum and let it come to rest naturally or rig it to glide to a stop at a certain value, Wheel-of-Fortune style? Yeah, that's a lot more complex. In fact, it can be a real drag to build (sorry, the pun was irresistible).

CSS Animations vs GSAP: Cage Match

Ever since CSS3 "transitions" and "animations" were introduced, they have been widely lauded as the future of animation on the web. It often seems like all the "cool kids" are talking about them. Should you jump on the bandwagon? Is JavaScript animation headed for extinction? How does the new GreenSock Animation Platform (GSAP) fare when it steps into the ring and faces off against the hyped-up tag-team of CSS3 transitions & animations? Does GSAP have the chops to hold its own? Let's find out.

Ready...FIGHT!

3D Transforms & More CSS3 Goodies Arrive in GSAP JS

GSAP's CSSPlugin is now super-charged to handle some slick new CSS3 properties like 3D transforms, boxShadow, textShadow, borderRadius and clip. Plus you don't need to worry about a litany of vendor prefixes. GSAP makes it easy to create next-generation effects today.

jQuery vs GSAP: Cage Match

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.

Getting Started Tweening with GSAP for Flash

Get up and running quickly with GSAP.

MORE

Pages and other content

Enterprise Training

Wouldn't it be nice if you could have a GreenSock expert come to your office and make your whole team into animation superheroes? Now you can.

Faith: Silly or Significant?

Disclaimer: This post has nothing to do with Flash, JavaScript, or what you may typically expect to see on this site. It's about my (Jack's) personal faith journey from Atheist to Christian and some of the wrestling I did in my head and heart along the way. Why put it on the web site?

MORE

Learning Article Results

Quick Start: GSAP and Adobe Animate CC 2017

Learn how to load GSAP into Animate CC 2017 in 3 easy steps (video included)

immediateRender demystified

The immediateRender property of from() tweens is one of those things you only find out about when it gives you unexpected results. Learn what this property does and why it is so important.

Quick Start: GSAP and Adobe Animate CC (ARCHIVED)

Cory Hudson provides starter files to get up and running quickly with Adobe Animate CC and GSAP. Tons of great tips for those transitioning from the world of Flash and the swf.

Creating GSAP Templates for Adobe Animate CC

Learn how to create GSAP Templates for Adobe Animate CC and greatly increase your workflow.

GreenSock 101

Learn the core of GSAP in 60 minutes. Petr Tichy from ihatetomatoes.net has created a fantastic video series that is perfect for beginners.

Create an Animated SVG Jump Loader

A great tutorial from Chris Gannon about using DrawSVGPlugin for simple, yet compelling effects.

QuickTip: Basic play / pause toggle button

Learn how to make a simple play / pause toggle button to control any GSAP animation (tweens or timelines). Same concepts apply to toggling the reversed() state of an animation too.

QuickTip: Create staggered animations with TweenMax

This QuickTip focuses on creating staggered animations on multiple objects with TweenMax's power methods staggerFrom() and staggerTo().

Timeline Tip: Understanding the Position Parameter

The secret to building gorgeous sequences with precise timing is understanding the super-flexible "position" parameter which controls the placement of your tweens, labels, callbacks, pauses, and even nested timelines.

Video: Sequence JavaScript Animations Like a Pro with GSAP's TimelineLite

This video walks you through some common problems that professional animators face every day and shows you how GSAP’s TimelineLite tackles these challenges with ease.

Jump Start: GSAP JS

Learn the basics of GSAP JS fast. The Jump Start will walk you through a number of interactive slides that will show you exactly how GSAP JS works. Animating with JavaScript just got a whole lot easier.

Getting Started with GSAP (GreenSock Animation Platform)

Learn the basics of GSAP quickly with this video and article that'll have you animating in no time.

MORE

FAQ Results

Will the bonus plugins suddenly stop working when my membership expires?

Nope. We don't inject any "phone home" code that tracks usage or causes the plugins to suddenly stop working on a certain date. Hopefully our tools prove so valuable and profitable to you that you'll gladly renew every year to keep getting access to the goodies.

Is there a way to disable/enablejquery.gsap.js functionality? In other words, what iIf the jquery.gsap.js is loaded and GSAP isn't animating something properly and I want to revert to using the native jQuery.animate() method?

Yes:

//disables GSAP from all jQuery.animate() calls:
$.gsap.enabled(false);

//enables it again:
$.gsap.enabled(true);

//disables GSAP only in a particular animate() call:
$(".myClass").animate({left:100, skipGSAP:true}, 2000);

Can I use other GSAP plugins like ScrollToPlugin with jQuery.animate() and jquery.gsap.js?

Yes, as long as you loaded the plugin you can use it. For example:

$(window).animate({scrollTo:{y:300}}, 3000);

When features get added to GSAP, will this jquery.gsap.js get updated?

The plugin is just a harness that takes whatever you give jQuery.animate() and feeds the data to GSAP under the hood, so yes, when you update your GSAP files you'll instantly get the new features.

Using jquery.gsap.js can I get the tween instances so that I can control them individually?

No, not from the animate() method - if you want to get precise control like that, please use the regular GSAP API. The jQuery.animate() method only returns a jQuery object and it taps into an internal queue system for sequencing that would get circumvented if you manually paused or reversed the tweens. The plugin is only intended to duplicate the native functionality plus add extra tweenable properties and speed things up of course.

Using jquery.gsap.js can I define the ease in the standard jQuery way, like "easeOutStrong" and "linear" and "swing"?

Absolutely, please do.

is cabbage gross?

yes

If I already know the GSAP API, is it better to use jQuery.animate() with jquery.gsap.js or the standard GSAP methods like TweenLite.to()?

Using jQuery.animate() is fine for basic stuff, but we would definitely recommend using the native GSAP methods whenever you can because they're slightly faster (no extra parsing) and they make experimenting and building sequences much easier, plus they're object-oriented so you can pause()/resume()/reverse()/restart()/seek() individual tweens or entire timelines. You can even nest timelines within timelines.

Do I have to learn the GSAP API in order to use the jquery.gsap plugin? I don't want to learn another API. I love jQuery.

Nope, you don't have to worry your pretty little head about learning the GSAP API if you don't want to. Just load the plugin and animate() the way you always have. However, if you take the time to learn the native GSAP API, it could revolutionize your animation workflow in some surprising ways. If you're doing anything beyond very basic tweens, it's probably worth your time. But there's no pressure.

Do I have to purchase a license to use LoaderMax code? Can I use LoaderMax commercial projects?

You may use the code at no charge in commercial or non-commercial web sites, games, components, applications, and other software as long as end users are not charged a fee of any kind to use your product or gain access to it. If your client pays you a one-time fee to create the site/product, that’s perfectly fine and qualifies under the “no charge” license. If multiple end users are charged a usage/access/license fee of any kind, please simply sign up for a corporate Club GreenSock membership which comes with a special commercial license granting you permission to do so. Click here for details. Club GreenSock members get several useful bonus plugins, classes, update notifications, SVN access, and more. Please see the licensing page for details on licensing.

Why did you use the loosely typed vars parameter to define all the special properties (like {name:”myLoader”, width:100, height:200}) instead of regular strong-typed parameters or properties? Your way doesn’t give me code hinting either.

Don’t worry – you can get code hinting and strong data typing by using the data classes in the com.greensock.loading.data package, but two of the primary objectives were to keep file size to a minimum and encourage readable code, neither of which could be accomplished very well without using a generic vars object by default. There are quite a few optional special properties for various loaders (SWFLoader recognizes 41!) and regular constructor parameters just wouldn’t be feasible. Which one is more readable?:

new SWFLoader("main.swf", "myFile", 100, 100, 200, 200, this, completeHandler, null, null, progressHandler);
-OR-
new SWFLoader("main.swf", {name:"myFile", x:100, y:100, width:200, height:200, container:this, onComplete:completeHandler, onProgress:progressHandler});

But again, if you want strong typing and code hinting, use data classes in the com.greensock.loading.data package (like LoaderMaxVars, ImageLoaderVars, XMLLoaderVars, etc.) which allow you to define all your vars with a special object.

Is the LoaderMax API finalized? Might it change?

It is highly unlikely that the API will change.

Why do I have to use different loader types (ImageLoader, XMLLoader, SWFLoader) instead of LoaderMax automatically figuring out the appropriate type based on the file extension in the URL?

Actually, LoaderMax has a parse() method that can do exactly that (automatically figure out the appropriate loader type based on the file extension) – you just need to make sure you use LoaderMax.activate() first to activate the loader types that you want LoaderMax to be able to recognize like LoaderMax.activate([ImageLoader, SWFLoader]). This extra step may seem annoying, but there are a few reasons LoaderMax doesn’t activate all loader types by default:

  • Doing so would force ALL types of loaders to be compiled in your swf so that they’re available just in case you need them. Your project may never need an SWFLoader or MP3Loader, etc. but they would still be compiled into your SWF to accommodate “lazy” loading. In my opinion, this bloats the whole system which isn’t good because a loading system should be relatively lightweight in order to get things moving quickly.
  • It’s virtually impossible to accurately determine the file type if the extension is something like “.php” because you could have a server-side script that spits back any type – an image, an XML file, etc. In those cases, the “lazy” system would break down. You’d have to explicitly define the type anyway.

Ultimately I believe it is much cleaner to have the developer choose the appropriate loader for the asset whenever possible and it definitely allows the system to be more lightweight and efficient. It could literally reduce the file size requirement by more than 60%.

If a child loader inside a LoaderMax has already completed and I call load() again on the LoaderMax, will it waste time reloading that already-completed loader?

No. If a loader has completed, LoaderMax will skip it in the queue for maximum efficiency and performance. If you want to force a full reload, though, set the “flush” parameter to true in your load() call, like myLoader.load(true)

Do I need to define estimatedBytes for all my loaders?

Nope. If you don’t define one, the default value of 20000 will be used. The only benefit of defining an estimatedBytes is to make the loader’s progress more accurate before it has downloaded enough information to determine the bytesTotal. Once it can accurately determine the bytesTotal, it will stop using the estimatedBytes. By default, when a LoaderMax loads, it will loop through its children first and find any that don’t explicitly define an “estimatedBytes” and quickly open a URLStream to determine the bytesTotal if possible. There’s a slight speed penalty when the LoaderMax first starts loading, but it makes it very accurate. You can turn that feature off with auditSize:false in your LoaderMax’s vars parameter.

What if I need to send variables to the server along with my request in a loader?

The first parameter of the various loaders (ImageLoader, XMLLoader, SWFLoader, MP3Loader, etc.) accepts either a simple String URL or a URLRequest. So if you want to pass data to the server, simply construct a URLRequest accordingly, like:

var request:URLRequest = new URLRequest("http://www.yourDomain.com/whatever.php");
var data:URLVariables = new URLVariables();
data.exampleSessionId = new Date().getTime();
data.exampleUserLabel = "label1";
request.data = data;
request.method = URLRequestMethod.POST;
var loader:ImageLoader = new ImageLoader(request, {name:"image1"});

Where do I get LoaderMax?

LoaderMax is included in the main AS3 GreenSock download zip.

Do I have to purchase a license to use GSAP? Can I use it in commercial projects?

GreenSock uses a very permissive license that allows you to use the tools for free for everything except a very specific type of commercial use (if you collect a fee from multiple customers for the same app/product/site that uses GreenSock tools) which makes it extremely accessible and business-friendly while providing a small funding mechanism to sustain ongoing support, enhancement, and innovation. The web is littered with abandoned “open source” projects, but GreenSock has a years-long track record of commitment to the platform. This unique licensing model is a key component of that sustainability. If multiple customers are charged a usage/access/license fee of any kind, please simply sign up for a “Business Green” Club GreenSock membership which comes with a special commercial license granting you permission to do so. Click here for details. Joining the club also gets you members-only bonus plugins, classes, update notifications, and more. Please see the licensing page for details.

Are more plugins coming for GSAP JS? The Flash version seems to have a lot more than the JS version.

Yes, you can expect to see many more plugins coming in the future.

Does the GreenSock Animation Platform use the newer “requestAnimationFrame” API for its timing mechanism to maximize performance and minimize CPU load?

Yes indeed, and it falls back to a standard 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.

Do I need to worry about garabage collection in the JavaScript version of GSAP? What happens when a tween finishes?

No need to worry. Tweens and timelines are automatically made eligible for garbage collection when appropriate (typically when they finish but if you maintain a reference to an instance so that you can restart it later, for example, it won’t be gc’d out from under you). Basically the system manages gc for you and generally cleans up after itself.

Does the JavaScript version of GSAP use CSS3 transitions to deliver even better performance (with help from the GPU)?

CSS3 transitions have some significant limitations that make them unworkable for a serious animation platform. They don’t provide precise controls over the timing or easing. They’re great for simple effects but the GreenSock Animation Platform delivers extremely precise rendering, so you can do things like pause() and reverse() an animation anytime or skip to a specific time and play from there, etc. Try creating a CSS3 transition that uses an Elastic.easeOut or SlowMo.ease and then jump to 0.72494-seconds into a 2-second transition and pause() only to resume() later. It’s impossible from what I understand. So no, the platform doesn’t make use of CSS3 transitions. However, it is highly optimized for performance. See the detailed cage match where GSAP battles CSS3 transitions where there’s a detailed comparison in several categories.

How big are the GSAP JavaScript files?

Here are the minified gzipped file sizes:

  • TweenLite (includes standard eases): 7kb (20.4kb without gzip)
  • CSSPlugin: 12kb (26.5kb without gzip)
  • RoundPropsPlugin: 0.5kb (1kb without gzip)
  • BezierPlugin: 3.6kb (7.8kb without gzip)
  • EasePack: 1.6kb (3.6kb without gzip)
  • TimelineLite: 2.8kb (8.8kb without gzip)
  • TimelineMax (includes TimelineLite): 4.4kb (15.6kb without gzip)
  • TweenMax (includes ALL of the above): 29kb (81.7kb without gzip)

Do I have to purchase a license to use Draggable? Can I use it in commercial projects?

ThrowPropsPlugin is a membership benefit of Club GreenSock, so you need to sign up to get that. Draggable, however, is included in all the standard downloads and you don't need a membership to get that; Draggable can be used apart from ThrowPropsPlugin as long as you don't need the momentum-based motion. GreenSock's standard license allows you to use GreenSock tools for free in
everything except a very specific type of commercial project (if you collect a fee from multiple customers for the app/product/game/site that uses GreenSock tools) which makes it extremely accessible and business-friendly while providing a small funding mechanism to sustain ongoing support, enhancement, and innovation. The web is littered with abandoned “open source” projects, but GreenSock has a years-long track record of commitment to the platform. This unique licensing model is a key component of its sustainability. If you charge multiple customers a usage/access/license fee, please simply sign up for a “Business Green” Club GreenSock membership which comes with a special commercial license granting you permission to do so. Click here for details. Joining the club also gets you members-only bonus plugins, utilities, update notifications, and more.

Does Draggable use CSS3 animations or transitions for the motion?

Nope. CSS3 transitions and animations have some significant limitations that make them ill-suited for the type of motion that these tools require, so highly optimized JavaScript is used instead. In order to tap into GPU compositing, 3D transforms are used when possible (in browsers that support them) and updates are made using requestAnimationFrame (when available) for maximum efficiency. See for yourself in Chrome Dev Tools - you should see very snappy performance in the timeline. Many other tools like jQuery UI use top/left properties for positioning which don't generally perform as well. These tools have been fully "GreenSocked" so performance is smoking fast, just like the core tweening engine.

How big are the JavaScript files needed to use Draggable?

Here are the rough sizes, assuming they're gzipped and minified:

  • Draggable: 6kb
  • ThrowPropsPlugin: 3kb
  • TweenLite: 7kb
  • CSSPlugin: 12kb

What browsers does Draggable support?

Pretty much every major browser is supported including Chrome, Firefox, Opera, iOS, Android and IE even back to version 8! We're not aware of any significant browsers that don't work, but please let us know if you stumble across an issue.

Does Draggable only work with DOM elements? Can I get it in a canvas-based app ?

Draggable is just for DOM elements, yes, but the real magic behind all the fluid motion and snapping is ThrowPropsPlugin, and that can be used to tween any property of any object, not just DOM elements. So yes, you can absolutely get this kind of motion in other contexts but you'd need to wire up the actual dragging logic yourself and then fire off a ThrowPropsPlugin tween when the user releases their mouse/touch. ThrowPropsPlugin can even track the velocity of any property for you too (even function-based getters/setters!), so it's quite a powerful tool.

Does Draggable have any dependencies on things like jQuery?

The only dependency is on GreenSock's very own TweenLite and CSSPlugin (which are also inside TweenMax). There are no dependencies on jQuery or any other libraries, although they work great together.

Who uses GreenSock tools?

Here are just a few: Google, Microsoft, Dow, Sony, Amazon, Fox, EA, Ford, HP, Adobe, Coca-Cola. To see the great work these and other brands are creating with GreenSock tools, swing by our showcase.

Who do I talk to if I have questions?

The best place to receive assistance is in our support forums.
If you have a private matter to discus simply complete the form on our contact page. We will respond promptly.

Why not give the code away for free?

We firmly believe this licensing model ultimately delivers a superior end product and serves the community better. Open source projects with no funding mechanism typically stagnate and become obsolete. Our goal with this licensing model is to keep the tools extremely accessible while putting in place a mechanism that funds continued support, innovation, and bug fixes. Read The "Why" Behind the GreenSock License for details.

If I get an annual membership, can I upgrade to a permanent one later?

Sure. You can upgrade directly from within your GreenSock account anytime. Contact us if you need help.

Can I include GreenSock code in my open source library?

Absolutely, but there are a few caveats: You may not include any of the members-only bonus plugins/classes in your open source tool (for obvious reasons) and you must clearly represent that the GreenSock code uses its own separate licensing model. We encourage the use of GreenSock tools to empower other open source tools.

What if I develop a commercial product for my client who will be the one selling the product? Who needs the “Business Green” membership?

To make it easier on GreenSock customers, the policy is that the development company needs to maintain a valid “Business Green” membership. If, for example, Company A develops a Work Product that uses TweenLite/Max and sells it to Company B who will be licensing it to end users, Company A must maintain a “Business Green” membership. Company B would not be required to have a membership. If, however, Company B prefers to maintain a membership instead, that is perfectly acceptable as long as it wouldn’t reduce the club level, meaning if the development company has 20 developers and Company B has 1 developer, it wouldn’t be fair to circumvent the terms by only having Company B get a single developer membership. A 20-developer membership would be required.

I don’t want to pay annually. Can I get a permanent license that never expires?

Absolutely. Click the "permanent" checkbox under the "Business Green" membership on the Club GreenSock page.

How do I get a license?

Just sign up for a “Business Green” Club GreenSock membership at the level that corresponds to the number of developers in your organization. That’s it!

How much does It cost?

There are several different “Business Green” membership levels based on the number of developers that will have access to the code. All “Business Green” memberships come with the special commercial license. Please see the Club GreenSock page for pricing details.

When determining the appropriate membership level, do I need to include only full-time developers? What if my company doesn’t have any?

You must include all freelancers, consultants, subcontractors, etc. in addition to full-time developers.

For how long must I maintain my membership?

You may cancel anytime. You'll simply lose access to updates to the bonus plugins/tools and if you're a Business Green member, your commercial license would expire at that point. You should keep it active as long you are selling/licensing your product to multiple end users. Work Products that you sold in the past do not suddenly fall out of compliance when your membership lapses – you just can't continue to sell products that use GreenSock tools after your membership expires. If you don't want to worry about the license expiring, you can simply get a permanent license. Oh, and we don't add any code into the members-only plugins that would make them suddenly stop working when your membership expires. They'll continue to work.

Can I distribute GreenSock files as a part of my Work Product?

Yes, as long as the source files are unaltered (including copyright notices therein). Your customer may use GreenSock tools (including bonus plugins/classes you got with your membership) only as a part of your Work Product. However, if your customer wants to use the GreenSock tools outside of your Work Product (or make customizations to your Work Product) to resell to their customers, they would need to get their own "Business Green" Club GreenSock membership to cover their usage. If your Work Product is given away freely and you're not distributing members-only plugins, you're golden...er, green...er, fine.

Is there a limit to the number of projects I can use GreenSock tools in as a “Business Green” member?

No. The commercial license that comes with “Business Green” Club GreenSock memberships applies to an unlimited number of apps/sites/software/games that your organization sells while the membership is active (see the license agreement for specifics). Please be sure, however, to get the appropriate membership level based on the number of developers associated with your organization.

Can I use my old v11 Flash GSAP plugins with v12?

There were some changes necessary in the plugin architecture, so all of the plugins have been updated for compatibility. You cannot use old plugins with v12.

Which browsers work with the JavaScript version of GSAP?

GSAP itself is pure JavaScript and should work in virtually ALL browsers. The CSSPlugin tweens css-related values and its compatibility is based on which properties you use in your tweens. GSAP wasn’t intended to solve all browser incompatibilities, but it does implement wizardry for critical features like 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.

Can I use the JavaScript version of GSAP for canvas objects or 3rd party tools like EaselJS?

You can animate ANY numeric property of ANY JavaScript object – it’s not just for DOM elements. So yes, you can animate canvas objects, EaselJS assets, and pretty much anything JavaScript-related. In fact, GSAP even has an EaselPlugin to make it easier to animate EaselJS properties. If you need to run logic after each refresh (like to redraw things on the canvas), either use an onUpdate on the individual tween/timeline or add a “tick” event listener to the core Ticker that drives the platform.

Can I use jQuery with the GSAP?

Absolutely! jQuery is great for selecting DOM elements, adding event handlers, and lots more. GSAP treats jQuery objects like arrays, so you can pass a single jQuery object as the target of the tween (as of 1.8.0),and you can even pass a string of selector text as the target and if jQuery is loaded, GSAP will use it as the selector!

For example:

//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.

Where can I report a bug, feature request, or rave about my tweening adventures with GSAP?

MORE

Examples & Showcase Results

Moments of Happiness

A series of WebGL experiments developed to make you smile (and spin your fans) using Three.js and GSAP.

I Buongiorno

I Buongiorno showcases wines from Salento.

Truth Labs

Truth Labs interactive agency.

Climber

Portfolio of Climber interactive agency.

Richard Rodrigues

Portfolio of Richard Rodrigues

Master Digital Design

The Amsterdam University of Applied Sciences launches a Master of
Science programme in Digital Design.

Lorenzo Bocchi

Portfolio site of Lorenzo Bocchi

Nike SB Dunk

Nike product site.

Anzi

Music visualizer from Anzi.

Prashant Sani

Website of Prashant Sani.

Milwaukee Ballet

Website of the Milwaukee Ballet

Wind and Words

An interactive Game of Thrones data visualization.

mstudio

A unique portfolio.

Uber

A faster way to ride.

Valerian

Stunning and immersive experience.

Snowden

Great site

Uprising

Great Site

Reputation Squad

Great site

Future Living

Great site

Carv

Great site

Filippo Bello

Great site

Ell Creative

Great site. Checkout the menu animation

Getty Endless

great site

Invstr

Great site using GSAP

A World of Oil

A great site made with GSAP

Solarin

Sirin Labs presents their new secure phone: Solarin. Explore in stunning 3D detail how not all privacy is created equal.

Locus Solus

View the exclusive re-release of the first outdoor collection by master of Italian design Gae Aulenti. Fun use of ThrowPropsPlugin and Draggable.

Cuberto

Cuberto is a UK-based agency specializing in mobile and web apps. Check out there impressive portfolio.

Electric Enjin

Electric Enjin is a full-service creative technology studio. Their skills shine throughout their site with really nice scroll-driven 3D animation.

Waaark

Super slick site of Waaaark agency. Lots of elegant animations, cool transitions and heaps of great design.

Now You See Me 2

Take a virtual tour through the characters and world of Now You See Me 2. Amazing use of scroll-driven animation through impressive 3D scenes.

Jetlag

Two photographers, two places, and 12 hours of photography. At least one shot every 30 min. Very clever transitions.

INRA 70

Discover the 70 year history of the Institut National de Recherche Agronomique through an interactive journey.

Because Recollection

A music and interactive experience based on ten years of sound and 20 classic artworks. Highly animated and eclectic experience.

Publicis 90

Publicis90 supports 90 digital projects and start-ups with the most business potential through funding and mentoring.

Make Me Pulse 2016

A collection of wonderfully animated and interactive demos from Make Me Pulse agency. Be sure to follow the very simple directions.

Nascar: 24ever

Nascar pays a touching tribute to Jeff Gordon as he takes his final lap. Great typography and text effects galore.

Fleximize

This site is absolutely packed with amazing SVG animation. Learning about business loans has never been more enjoyable.

Subaru: Zero Landfill

Learn how Subaru is protecting the environment with its Zero Landfill initiative.

VW: Touran

This VW Touran brochure comes to live with silky smooth transitions. Test your music knowledge in the "blind test".

Technics

Celebrate the past 50 years of Technics' achievements. The interactive timeline adds some very unique and interesting visual effects.

US Army

The US Army has battle-tested GSAP and the results are stunning. Find out if you have what it takes to complete the Cryptaris Mission.

Bacon Clubhouse

What is better than mixing GSAP with bacon? Nothing. Explore the world of a juicy bacon clubhouse and if you find one, you may just win one!

Spare Time Calculator

Find out how much your spare time is worth. This is probably one of the best forms we have seen. Incredible animation and interface design make it a treat to use.

Wove

Wove.com has some buttery smooth transitions and excellent use of 3D.

Zuto: 88 Miles Per Hour

Loved seeing this on Back To the Future day. Great use of SVG animation powered by GSAP. Fully responsive and best treats on wide screens.

Greenwood Campbell

Greenwood Campbell may sell themselves as digital traditionalists but they are winning awards with cutting-edge design and technology. Take a spin around their site. Literally.

Target: Share the Force

When Target and Star Wars joined forces (get it?), they decided GSAP was their only hope (there I go again) for bringing the Star Wars universe to life in the browser.

Google Photos

Google Photos showcases their many features with slick GSAP animations and full-screen video. The page comes to life with some really nice transitions as you scroll.

Sound City Project

The Sound City Project takes you on an immersive journey though the soundscapes of popular cities. Awesome UI animations follow you along each step of your travels.

Happy Forecast

The Happy Forecast is a social happiness experiment that uses the weather to predict your mood. Is your happiness outlook slightly hazy, gloomy or breezy?

Toyota Dream Car

The Toyota Dream Car collection showcases the dreams of children all over the world. The illustration and animation are superb!

McWhopper

McWhopper was Burger King's way to seek worldwide burger-peace with McDonalds. For such a massive effort they could use no less than the animation power of GSAP.

Diagnosite

Diagnosite describes their services with a fun animated story. Great illustration and just the right amount of flair take this seemingly simple site to the next level.

OMM

OMM pulls out all the stops to exhibit what is capable in modern browsers. Is it engaging, immersive, atmospheric, captivating and interactive? Omm, you better believe it!

Bose

Vibrant and stunning. Bose thinks out of the box with fullscreen animations that are elegant and super smooth. Excellent use of SplitText.

Google Ideas

Google chooses GSAP again to add impressive animations to this fabulous site. Get a look at that many important projects going on behind the scenes at Google.

Guillame Tomasi

Guillame Tomasi uses an animation style that matches the elegance and sophistication of his photos. Includes some clever effects we haven't seen before.

CAVE A BIERES

Things are very busy at La Plus Grande Cave a Bieres du Monde. The brewery comes to life as dozens of workers go about their business. Lots to enjoy once you get over the awe how grand this production is.

Tomorrowland

A fully immersive 3D journey through Tommorowland. Lots to explore, including some fun games along the way.

SpaceLamb

SpaceLamb takes flight and its your mission to guide him through an asteroid field in search of powerups! Checkout the power of GSAP when used with Three.js. Silky smooth with lots of great lighting and effects.

Sébastien Lempens Design

It's clear Sébastien Lempens Design puts an amazing amount of thought into every animation. As you explore the site by scrolling and interacting with various menus and items, each interaction is rewarded by a tasteful, visual treat.

Claudio Calautti

Claudio's animation blends perfectly with his visual design. A great example of using GSAP with responsive web design. Check it out on mobile and desktop.

BMW Auto Salon

A "must see" on tablet. Tilt your device to explore BMW's installation at the Geneva International Motorshow 2015.

YouTube 10 Years

Great to see Google and YouTube using GSAP to celebrate their achievements. Silky smooth animations abound in this playful quiz.

US Open Sessions

A gallery of jaw-dropping effects from award-winning animator Shane Mielke. Be sure to click all the bottom icons.

Alfred

Creative use of scroll-driven animation to tell a story. Gears, gizmos and rabbits all come to life. Super smooth rendering on behalf of Pixi.js / WebGL.

Mint Design Company

Hand-drawn illustrations come to life throughout this site from Mind Design. A visual treat awaits on every page.

Sortable Grid Using Draggable

See how Draggable can be used to drag and sort items of different sizes. Demo created by Blake Bowen.

Let's Make History

The rivalry of Pachuga vs Impact Montreal is told through comic book style illustrations and animation.

Bose Dream and Reach

Take a journey through the history of Bose. See how animation is used to tell the story of 50 years of innovation.

Risen Church

Graceful animations and modern design. Tasteful use of SplitText and other subtle delights.

Google Photos

Google relies on GSAP's smooth animation to bring Google Photos to life.

Big Hero 6

Lots of nice animation on the Big Hero 6 movie site. Be sure to explore.

Edge Rotater

An excellent example of Draggable and ThrowPropsPlugin. Flick and spin in 3D! Another wonderful creation from Chris Gannon.

Sound City Project

Elegant animation enhances the experience of traveling through ambient soundscapes.

Howl's Moving Castle

A magical wonder of animation grandeur by Nathan Gordon.

The Capitol

The Capitol believes the citizens deserve websites with immaculate design, superb photography and animation by GSAP.

Smarty Pins

A Google Maps-driven trivia game with silky smooth UI animation.

The Bezier Game

A masterful use of GSAP to illustrate the proper use of the pen tool found in Illustrator and PhotoShop. I only wish this existed 10 years ago.

Make Me Pulse

Make Me Pulse is an agency site that shows that these developers really know what they are doing with cutting-edge technology. Lots of a great animation tastefully applied.

FUTURESTATES

According to the site's creators, "FUTURESTATES is transporting you to an unprecedented narrative experience — an immersive and interactive storyworld of interconnected stories." In my own words, "There's definitely some things here that you don't see every day".

Honeywell Spectra

Who thought a site about fishing line could be this fun? See how Honeywell uses GSAP to bring infographics to life in this clever exploration of a fishing line 15x stronger than steel.

40 Together

Another powerhouse showcase from the team at GoodBoy Digital which will inevitably beg the question, "How did they do it?".

Soleilnoir Dream On

One of the smoothest page scrollers out there. Super slick animation loaded with 3D goodness. Power combo of GSAP, Pixi and ThreeJS.

Schiphol Destination Unknown

This fun game makes you guess the location of random Instagram photos. Clever design and great use of animation throughout.

Circular Preloader Animation (GSPreloader)

This is the preloader we use during all AJAX calls on GreenSock.com.

GreenSock Homepage Animation

Here is the demo we use on our homepage. It shows the true power of nesting timelines.

Code And Theory

Code and Theory uses GSAP to create an immersive and visual tour of their branding philosophy.

McDonald's: Build A Burger

Excellent animation and user interface for this "build-a-burger" experience. Drool worthy.

Google: Nexus7

Great to see Google choose GSAP to help highlight their flagship mobile devices.

Greenpeace: Into The Arctic

Extremely immersive experience with tons of great animation.

McDonald's 100 Moments

The team from Goodboy went all out on this FWA award-winning site.

SplitText: Multiple Split Types

See how to use SplitText to split text into characters, words and lines (or any combination).

Draggable Toss Demo

This demo illustrates many of the features of Draggable and ThrowPropsPlugin.

Beyond The Uniform

Compelling stories of how 12 people came to be soldiers in the US Army. Each story is very well designed and uses animation to enhance the experience.

Bright Media

Bright Media is an agency with an award winning portfolio.

Coin

Clean animation graces the Coin site.

Bezier Tweens with KineticJS (v5)

Random bezier tweens created with the canvas library KineticJS.

Multiple TextShadows for 3D Text Effect

Animate multiple text-shadows at once for elegant effects

3D Transforms

Objects transforming in 3D space.

MORE
No results were found for

Get GSAP

Version: 1.19.0 updated 2017-01-17

Core

    Extras

      Plugins

        By using GreenSock code, you agree to the terms of use.

        For an all-access pass to premium content

        Join Club GreenSock