Skip to main content
Agent Skills
← Back to skills
development
GAntigravity

GSAP Animations

ScrollTrigger, SplitText, scroll effects, and text reveals with GSAP.

Build web animations with GSAP (GreenSock Animation Platform). Covers core concepts, timing functions, and the plugin ecosystem.

animationgsapscrolltriggermotion
Share:
Version 1.2.0Updated Jan 20, 2026

Capabilities

ScrollTrigger for scroll-based animations
SplitText for text reveal effects
Timeline-based sequencing
Easing and timing control
Performance-optimized animations

Use cases

Hero section entrances
Scroll-triggered reveals
Page transitions
Micro-interactions
Loading animations

Try it

Example prompts to use with this skill

Prompt

Create a scroll-triggered fade-in animation for a hero section

Output
Here's a GSAP ScrollTrigger animation that fades in your hero section as the user scrolls: 
gsap.from('.hero', {
  scrollTrigger: {
    trigger: '.hero',
    start: 'top 80%',
    end: 'top 20%',
    scrub: 1
  },
  opacity: 0,
  y: 100,
  duration: 1,
  ease: 'power3.out'
});
The animation produces a smooth fade-in effect with upward movement as the hero section enters the viewport.
Prompt

Animate text splitting each word with a stagger effect

Output
Using SplitText with staggered animations: 
const split = new SplitText('.headline', { type: 'words' });

gsap.from(split.words, {
  opacity: 0,
  y: 50,
  rotationX: -40,
  stagger: 0.1,
  duration: 0.8,
  ease: 'back.out(1.7)'
});
Each word will animate in sequence with a slight rotation for a dynamic reveal effect.

Add to your AI assistant

Choose your AI assistant and run the command in your terminal

Discussions

Sign in with a magic link to join the discussion.

Loading...

Related skills

Monorepo Manager

Manage monorepo workspaces with Turborepo, Nx, or pnpm workspaces. Covers build caching, dependency management, and package publishing workflows.

monorepoturboreponx
G
New

Skill Creator

Create Claude Code Agent Skills with skill-creator: SKILL.md templates, triggers, and checks for Claude Code or Antigravity CLI.

skill-creatorclaude-codeagent-skills
G