Learn GSAP with Real Code Examples

Install via npm (`npm install gsap`) or include via CDN

Import GSAP core (`import { gsap } from 'gsap';`)

Optional: import plugins (`import { ScrollTrigger } from 'gsap/ScrollTrigger';`)

Register plugins using `gsap.registerPlugin()`

Start creating tweens and timelines for your objects

Modern browser with JS enabled

Node.js environment for local builds

Bundler like Vite, Webpack, or Parcel

Optional: framework integration (React, Vue, etc.)

Optional: plugin registration (ScrollTrigger, etc.)

index.html - main page and elements to animate

main.js - animation scripts

assets/ - SVG, images, media

modules/ - reusable animation functions

styles/ - initial CSS for layout

npm install gsap

vite dev / webpack dev

npm run build

npx serve to host locally

Use codepens or JSFiddle for prototyping

Animations are language-agnostic

TextPlugin allows animating localized content

Direction-sensitive animations (LTR/RTL) supported

No inherent i18n dependencies

Content-based animations rely on DOM text

Use motion-reduction media queries (`prefers-reduced-motion`)

Ensure focus states are respected during animations

Avoid triggering disorienting motion

Provide alternative navigation paths

GSAP animations should enhance, not hinder accessibility

Initial layout via CSS/HTML

Animations applied via GSAP

Responsive handling through JS and media queries

Interactive motion tied to user events

GSAP controls motion, not static styling

GSAP maintains internal animation state

Timelines manage sequencing and progress

Callbacks allow external state updates

Control playback (pause, reverse, seek)

Responsive updates via refresh() for layout changes

Track animated properties efficiently

Use timelines to group related animations

Reuse tweens for multiple elements

Avoid animating unnecessary DOM properties

Leverage plugin features for advanced data handling