development

GAntigravity

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

animationgsapscrolltriggermotion

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

Related skills

Monorepo Manager

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

monorepoturboreponx

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