or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

advanced-plugins.mdanimation-control.mdcore-animation.mdcss-properties.mddraggable.mdindex.mdscroll-trigger.mdsvg-animation.mdtext-animation.mdtimeline-system.mdutility-functions.md
tile.json

tessl/npm-gsap

High-performance JavaScript animation library for animating CSS, SVG, canvas, React, Vue, WebGL, and any JavaScript-accessible properties.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/gsap@3.13.x

To install, run

npx @tessl/cli install tessl/npm-gsap@3.13.0

index.mddocs/

GSAP (GreenSock Animation Platform)

GSAP is a robust JavaScript animation library that provides high-performance, cross-browser compatible animations for web applications. It offers a comprehensive suite of tools for animating CSS properties, SVG elements, canvas objects, and any JavaScript-accessible properties with extreme precision and performance.

Package Information

  • Package Name: gsap
  • Package Type: npm
  • Language: JavaScript/TypeScript
  • Installation: npm install gsap

Core Imports

import gsap from "gsap";

For individual imports:

import { gsap, Timeline, Tween } from "gsap";

CommonJS:

const gsap = require("gsap");

Basic Usage

import gsap from "gsap";

// Basic animation - animate to values
gsap.to(".box", { 
  duration: 2, 
  x: 100, 
  rotation: 360, 
  backgroundColor: "red" 
});

// Timeline for sequenced animations
const tl = gsap.timeline();
tl.to(".box1", { duration: 1, x: 100 })
  .to(".box2", { duration: 1, y: 100 }, "-=0.5")
  .to(".box3", { duration: 1, rotation: 360 });

// Set properties immediately
gsap.set(".element", { opacity: 0, scale: 0.5 });

Architecture

GSAP is built around several key components:

  • Core Engine: High-performance property manipulation with sub-pixel precision and 60fps+ performance
  • Timeline System: Nested timeline containers for complex animation sequencing and control
  • Plugin Architecture: Modular plugin system for specialized functionality (ScrollTrigger, Draggable, etc.)
  • Easing System: Comprehensive easing functions with configurable parameters
  • Utility System: Helper functions for common animation tasks and calculations
  • Context Management: Animation context system for cleanup and scoped control

Capabilities

Core Animation Methods

Primary animation creation methods for animating properties to, from, or between values.

gsap.to(targets: gsap.TweenTarget, vars: gsap.TweenVars): gsap.core.Tween;
gsap.from(targets: gsap.TweenTarget, vars: gsap.TweenVars): gsap.core.Tween;
gsap.fromTo(targets: gsap.TweenTarget, fromVars: gsap.TweenVars, toVars: gsap.TweenVars): gsap.core.Tween;
gsap.set(targets: gsap.TweenTarget, vars: gsap.TweenVars): gsap.core.Tween;
gsap.delayedCall(delay: number, callback: Function, params?: any[]): gsap.core.Tween;

Core Animation

Timeline Management

Timeline system for creating complex, sequenced animations with precise timing control.

gsap.timeline(vars?: gsap.TimelineVars): gsap.core.Timeline;

interface Timeline extends Animation {
  add(child: gsap.core.Animation | string, position?: string | number): Timeline;
  to(targets: gsap.TweenTarget, vars: gsap.TweenVars, position?: string | number): Timeline;
  from(targets: gsap.TweenTarget, vars: gsap.TweenVars, position?: string | number): Timeline;
}

Timeline System

Animation Control

Methods for controlling animation playback, seeking, and state management.

// Playback control
play(): Animation;
pause(): Animation;
reverse(): Animation;
restart(): Animation;

// Time and progress
seek(time: number): Animation;
progress(value?: number): number | Animation;
duration(value?: number): number | Animation;

Animation Control

Utility Functions

Helper functions for common animation tasks, calculations, and property management.

gsap.utils.random(min: number, max: number, snap?: number): number;
gsap.utils.clamp(min: number, max: number, value: number): number;
gsap.utils.mapRange(inMin: number, inMax: number, outMin: number, outMax: number, value: number): number;
gsap.getProperty(target: Element, property: string): string;
gsap.quickSetter(targets: gsap.TweenTarget, property: string, unit?: string): Function;

Utility Functions

ScrollTrigger Plugin

Scroll-based animation triggers with viewport detection and scroll progress tracking.

ScrollTrigger.create(vars: ScrollTrigger.Vars): ScrollTrigger;

interface ScrollTrigger {
  trigger: Element;
  start: string | number;
  end: string | number;
  onEnter?: Function;
  onToggle?: Function;
  animation?: gsap.core.Animation;
}

ScrollTrigger

Draggable Plugin

Drag and drop functionality with momentum, bounds, and collision detection.

Draggable.create(targets: Element | Element[], vars?: Draggable.Vars): Draggable[];

interface Draggable {
  x: number;
  y: number;
  isDragging: boolean;
  disable(): void;
  enable(): void;
}

Draggable

CSS Properties

Comprehensive CSS property animation including transforms, colors, and layout properties.

// Transform properties
interface TransformVars {
  x?: number | string;
  y?: number | string;
  rotation?: number | string;
  scale?: number | string;
  skewX?: number | string;
  transformOrigin?: string;
}

// Special properties
interface SpecialProps {
  autoAlpha?: number; // opacity + visibility
  alpha?: number;     // opacity alias
}

CSS Properties

SVG Animation

Specialized SVG animation capabilities including path morphing, drawing, and motion paths.

// DrawSVG plugin
interface DrawSVGVars {
  drawSVG?: string | boolean; // "0% 50%" or true
}

// MotionPath plugin  
interface MotionPathVars {
  motionPath: {
    path: string | SVGPathElement;
    autoRotate?: boolean | number;
    start?: number;
    end?: number;
  };
}

SVG Animation

Text Animation

Text animation plugins for character-by-character effects and typewriter animations.

// SplitText for character/word splitting
class SplitText {
  constructor(targets: Element | string, vars?: SplitText.Vars);
  chars: Element[];
  words: Element[];
  lines: Element[];
  revert(): void;
}

// TextPlugin for typewriter effects
interface TextVars {
  text?: string;
  delimiter?: string;
}

Text Animation

Advanced Plugins

Additional plugins for physics, custom easing, development tools, and specialized animations.

// Physics plugins
interface InertiaVars {
  inertia: {
    [property: string]: {
      velocity?: number;
      min?: number;
      max?: number;
    };
  };
}

// Custom easing
CustomEase.create(id: string, path: string): EaseFunction;

Advanced Plugins

Context Management

Animation context system for scoped control, cleanup, and responsive behaviors.

import gsap from "gsap";

// Create context for scoped animations
let ctx = gsap.context(() => {
  gsap.to(".box", { x: 100 });
});

// Create responsive animations
let mm = gsap.matchMedia();
mm.add("(max-width: 768px)", () => {
  gsap.to(".mobile-box", { y: 50 });
});
gsap.context(func?: ContextFunc, scope?: Element | string | object): Context;
gsap.matchMedia(scope?: Element | string | object): MatchMedia;
gsap.matchMediaRefresh(): void;

interface Context {
  selector?: Function;
  isReverted: boolean;
  add(func: Function, scope?: Element | string | object): Function;
  kill(revert?: boolean): void;
  revert(config?: object): void;
}

interface MatchMedia {
  contexts: Context[];
  add(conditions: string | object, func: ContextFunc, scope?: Element | string | object): MatchMedia;
  revert(config?: object): void;
  kill(revert?: boolean): void;
}

Tween Management

Methods for retrieving, checking, and controlling existing animations.

import gsap from "gsap";

// Check if element is animating
if (gsap.isTweening(".box")) {
  console.log("Box is currently animating");
}

// Get all tweens of specific targets
let tweens = gsap.getTweensOf(".element");

// Kill specific animations
gsap.killTweensOf(".box", "x,y");

// Get animation by ID
let tween = gsap.getById("myTween");
gsap.getTweensOf(targets: gsap.TweenTarget, onlyActive?: boolean): gsap.core.Tween[];
gsap.isTweening(targets: gsap.TweenTarget): boolean;
gsap.killTweensOf(targets: gsap.TweenTarget, properties?: object | string, onlyActive?: boolean): void;
gsap.getById(id: string | number): gsap.core.Animation | undefined;

Configuration

Global GSAP configuration and defaults management.

import gsap from "gsap";

// Configure global settings
gsap.config({ 
  force3D: true, 
  autoSleep: 60 
});

// Set global defaults
gsap.defaults({ 
  duration: 1, 
  ease: "power2.out" 
});

// Parse easing function
let ease = gsap.parseEase("bounce.out");
gsap.config(config?: GSAPConfig): GSAPConfig;
gsap.defaults(defaults?: gsap.TweenVars): gsap.TweenVars;
gsap.parseEase(ease: string | EaseFunction): EaseFunction;

interface GSAPConfig {
  autoSleep?: number;
  force3D?: boolean | "auto";
  nullTargetWarn?: boolean;
  units?: { [property: string]: string };
}

Export and Installation

Methods for exporting timelines and managing plugins.

gsap.exportRoot(vars?: gsap.TimelineVars, includeDelayedCalls?: boolean): gsap.core.Timeline;
gsap.install(targets: object): typeof gsap;

Types

// Core types
type TweenTarget = string | Element | object | null;
type ContextFunc = (context: Context, contextSafe?: ContextSafeFunc) => Function | any | void;
type ContextSafeFunc = (func: Function) => Function;

interface TweenVars {
  duration?: number;
  delay?: number;
  ease?: string | EaseFunction;
  repeat?: number;
  repeatDelay?: number;
  yoyo?: boolean;
  paused?: boolean;
  overwrite?: boolean | "auto";
  immediateRender?: boolean;
  onStart?: Function;
  onUpdate?: Function;
  onComplete?: Function;
  onRepeat?: Function;
  onReverseComplete?: Function;
  onStartParams?: any[];
  onUpdateParams?: any[];
  onCompleteParams?: any[];
  callbackScope?: object;
  data?: any;
  id?: string | number;
  [property: string]: any;
}

interface TimelineVars extends TweenVars {
  autoRemoveChildren?: boolean;
  smoothChildTiming?: boolean;
  defaults?: TweenVars;
}

interface Animation {
  play(): Animation;
  pause(): Animation;
  reverse(): Animation;
  seek(time: number): Animation;
  progress(value?: number): number | Animation;
  duration(value?: number): number | Animation;
  kill(): void;
}

interface Timeline extends Animation {
  add(child: Animation | string, position?: string | number): Timeline;
  clear(): Timeline;
  recent(): Animation;
}

type EaseFunction = (progress: number) => number;