Core Technologies / GSAP

GSAP:
Professional
Animation

The standard for high-performance, robust, and complex animations on the modern web.

Timelines

Build robust, sequenced animations easily. GSAP timelines allow you to chain tweens, control playback (pause, reverse, seek), and manage entire animation ecosystems.

  • Chain multiple animations seamlessly
  • Relative timing and labels
  • Global playback controls
  • Incredibly fast and optimized
// GSAP Sequenced Task Queue
const tl = gsap.timeline({ repeat: -1 });
tl.to(".step-1 .progress", { width: "100%", duration: 0.8 })
.to(".step-2 .progress", { width: "100%", duration: 0.8 })
.to(".step-3 .progress", { width: "100%", duration: 0.8 })
.to(".cta-button", { backgroundColor: "#10b981", color: "#000", scale: 1.03 });
Sequence EngineQUEUE: ACTIVE
Initialize Container
SYS
Compile Modules
BNDL
Hydrate Target Host
LIVE
GSAP Timeline Sequencestagger: 0.15s • easing: easeOutQuad • targets: 3 nodes
0%
Engine: TIMELINE_HOLD_STEADYLoop Mode Active

GSAP Timelines act as container systems that allow you to chain, overlap, nest, and control complex sequences of tweens dynamically.

ScrollTrigger

The industry standard for scroll-based animation. Trigger actions, scrub timelines, and pin elements effortlessly with minimal code.

  • Scroll scrubbing
  • Element pinning
  • Parallax effects
  • Mobile-friendly and robust
// GSAP ScrollTrigger Animation
gsap.to(".box", {
scrollTrigger: { trigger: ".box", start: "top center", pin: true, scrub: true },
rotate: 360, scale: 0.95
});
localhost:3000/scroll-trigger
BOX
GSAP ScrollTrigger Telemetryscroller-start: top center • pin duration: 160px • ease: none
0%
TRIGGER: TRIGGER_APPROACHINGSCRUB MODE ACTIVE

GSAP's ScrollTrigger allows you to pin elements, scrub animations tied to scrollbars, and trigger complex timelines natively.

FLIP Animation

First, Last, Invert, Play. GSAP's Flip plugin makes it trivial to animate elements when their position or size changes in the DOM, perfect for responsive layouts and filtering.

  • Seamless layout transitions
  • Works with DOM reparenting
  • Automatic size & position calculation
  • Responsive state morphing
// GSAP FLIP Layout Morph
const state = Flip.getState(".card");
changeToGridLayout(); // swap order
Flip.from(state, { duration: 0.6, ease: "power2.out", scale: true });
A
B
C
FLIP State Telemetryinvert scale delta: w(0.31, 0.64, 0.64) | offsets: dx(0px, 96px, 48px)
ROW_FIRST
Phase: RECORDING_FIRST_STATE

The FLIP plugin calculates layout changes automatically, smoothly animating elements between completely different states or DOM positions.

MorphSVG

MorphSVG smoothly interpolates one SVG shape into another. It automatically handles paths with a mismatched number of points, generating flawless morphing effects.

  • Point-count independent
  • Smooth shape interpolation
  • ShapeIndex control for twists
  • Polygons and Polylines support
// GSAP MorphSVG Plugin
gsap.to("#blob-path", {
morphSVG: { shape: "#star-path", shapeIndex: "auto" },
duration: 2.5,
ease: "elastic.out(1, 0.3)",
});
MorphSVG Interpolation Enginevector points: 8 cubic-beziers • shapeIndex: auto • cycle: organic loop
FLUID_LOOP_ACTIVE
Engine: morphing points automaticallySMIL Interpolator Active

MorphSVG seamlessly morphs any SVG path into another, regardless of the number of points, creating magical fluid transformations.

SplitText Typography

Animate text like never before. SplitText breaks down HTML text into individual lines, words, or characters, allowing you to sequence stunning typographical effects.

  • Non-destructive DOM parsing
  • Line, word, and character splitting
  • Maintains original layout
  • Staggered entrance animations
// GSAP SplitText Typography
const split = new SplitText(".headline", { type: "words,chars" });
gsap.from(split.chars, {
y: 40, rotate: 15, opacity: 0, scale: 0.7,
stagger: 0.04, duration: 0.7, ease: "back.out(1.5)"
});
MOTIONDEFINESMODERNWEB
SplitText Engine Diagnosticsparsed nodes: 1 textBlock • active chars: 25 • transition: dynamic-stagger-slide
TYPOGRAPHY_RUNNING
Status: STAGGER_ENTRANCEDOM Split Mode: Active

SplitText instantly breaks down sentences into manageable lines, words, or characters, making complex typography animations effortless.

Animate Everything

Master GSAP.

Craft scroll experiences that define premium modern web design.