CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-gsap

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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;
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/gsap@3.13.x
Publish Source
CLI
Badge
tessl/npm-gsap badge