Next ❯

Tween Intro

  • A Tween in GSAP (GreenSock Animation Platform) is a single animation that transitions (animates) from one set of values to another over a specific duration.

  • TWEEN

    A Tween is the core engine behind GSAP animations — you can think of it as a powerful property updater. You provide it with target elements, a duration, and the properties you want to animate. As the tween’s playhead progresses over time, GSAP automatically calculates the correct intermediate values and applies them smoothly to the target.

    You can create a Tween using any of the following methods (each returns a Tween instance):

    • gsap.to()

    • gsap.from()

    • gsap.fromTo()


For straightforward animations, these methods are usually all you’ll need. For example: 

gsap.to(".box", {
  x: 200,
  duration: 1
});

  • Because GSAP can animate any numeric property of any JavaScript object, you’re not limited to just CSS styles or DOM elements. Feel free to experiment — you’ll be surprised by how many things GSAP can animate effortlessly.

    While you can create simple animation sequences using the delay property, complex choreography becomes much easier with Timelines. A Timeline acts like a container that holds multiple Tweens (and even other Timelines), allowing you to control their timing and behavior together as one unit. This makes advanced sequencing clean, organized, and flexible. Check the Timeline documentation for more details.

    If you need to control a Tween later (pause, resume, reverse, etc.), simply store it in a variable. GSAP’s object-oriented approach makes this convenient and intuitive.


Note: If you just want animations to run without additional control, you don’t need to store them in variables. GSAP Tweens start playing automatically as soon as they’re created (unless you add a delay or set them to paused). Once they finish, they automatically clean themselves up. Feel free to call gsap.to() as often as you like without worrying about memory or manual disposal.

  • GSAP Special Properties

    PropertyDescription
    callbackScopeDefines the scope/context used for callback functions.
    dataAttaches custom data to the tween for referencing later.
    delayTime to wait before the animation begins (in seconds).
    durationTotal length of the animation (in seconds). Default: 0.5.
    easeControls the motion curve/easing style of the animation. Default: "power1.out".
    idAssigns a unique identifier to the tween so it can be found later.
    immediateRenderForces the tween to render immediately upon creation rather than waiting for the next frame.
    inheritDetermines if the tween should inherit defaults from its parent timeline.
    lazyOptimizes performance by batching DOM reads/writes during the first render.
    onCompleteCallback triggered when the animation finishes.
    onCompleteParamsParameters passed to the onComplete callback.
    onRepeatCallback triggered every time the animation repeats.
    onRepeatParamsParameters passed to the onRepeat callback.
    onReverseCompleteCallback triggered when the animation fully completes in reverse.
    onReverseCompleteParamsParameters passed to the onReverseComplete callback.
    onStartCallback triggered when the animation first starts.
    onStartParamsParameters passed to the onStart callback.
    onUpdateCallback triggered every time the animation updates per frame.
    onUpdateParamsParameters passed to the onUpdate callback.
    overwriteControls conflict handling with other tweens targeting the same properties.
    pausedDetermines if the animation starts in a paused state.
    repeatNumber of times the animation should repeat. -1 means infinite repeats.
    repeatDelayDelay time between repeated animation cycles.
    repeatRefreshRefreshes starting/ending values on each repeat (useful for dynamic/random values).
    reversedStarts the tween with its playhead reversed.
    runBackwardsSwaps starting and ending values internally (reverse motion).
    staggerDelays the start time between multiple targets being animated.
    startAtSets initial values before the tween begins animating.
    yoyoCauses the tween to reverse direction on every alternate repeat.
    yoyoEaseApplies a different easing during the yoyo (reverse) phase.
    keyframesAllows the targets to animate through multiple sequential states.

  • GSAP Extra Capabilities 

    Plugins

    ConceptDescription
    PluginsOptional add-ons that extend GSAP’s core functionality.
    Rendering IntegrationSome plugins simplify working with rendering libraries like PIXI.js or EaselJS.
    Advanced EffectsPlugins enable features like SVG morphing, draggable components, etc.
    Lightweight CoreGSAP stays small by keeping advanced features optional.
    Modular UsageOnly load the plugins you need for performance efficiency.
    Plugin ListA full list is available in GSAP documentation.
Note: A GSAP Tween is the core building block of the GreenSock Animation Platform, used to smoothly animate properties of any object—most commonly DOM elements and CSS properties—over time. It works by transitioning values from a starting point to an endpoint with fine control over duration, easing, delay, repeat, yoyo effects, and callbacks. GSAP tweens can handle both simple numeric animations and complex strings like colors, shadows, and transforms, including 2D and 3D properties. Unlike traditional CSS transitions, GSAP tweens provide superior performance, precision timing, cross-browser consistency, and chaining capabilities, making them ideal for creating professional, interactive, and visually rich web animations.
Next ❯