GSAP Skill
Teaches Claude Code how to build smooth GSAP-powered animations.
by AgentVoltv1.0.0Published 1y ago1 install
Free to sign up · every skill included with AgentVolt Pro
Before & after
Same prompt, same agent — the only difference is the skill.
Prompt“Add GSAP animations to our landing page for scroll reveals and transitions.”
Beforegeneric AI agent
GSAP is an animation library that makes things move smoothly. You could use it to animate elements when they scroll into view, or add transitions between sections. It handles easing and timing so animations feel polished. You'd need to import the library and then write code to define what moves when. There are lots of easing options to choose from. You could animate things like fade-in, slide-in, scale-up—basically any CSS property. It's popular because it's performant and has good browser support.
Afterwith GSAP Skill
I'll add production-grade GSAP animations to your pages, including scroll reveals, hover transitions, and section-entrance effects. ANIMATION TYPES BUILT SCROLL REVEALS Elements fade-in and slide-up as they enter viewport. Staggered: each item in a list animates with a 100ms delay, creating a cascade effect. You define the trigger (when element reaches 80 percent of viewport height) and duration (600ms). HOVER TRANSITIONS Button: scale 1.05 and shadow-darken on hover (200ms ease-out), reverse on mouseout. Card: lift (translateY -10px) on hover, rotate 2deg, shadow intensify. Smooth 300ms revert. Text underline: line slides in from left on hover (300ms). SECTION TRANSITIONS Full-page fade-out before route change (200ms), new page fades in (300ms). Prevents jarring visual jump between pages. HERO ANIMATIONS Staggered headline entrance: each word appears from the left with 50ms spacing. Subheading fades in after headline completes. CTA button scales/glows after content settles. IMPLEMENTATION Declarative: add data-animate="fade-up" to any element. GSAP hook picks it up automatically. Customize via data-delay and data-duration attributes. Easing library: easeInOutQuad (smooth motion), easeOutBounce (playful), easeInQuad (snappy). PERFORMANCE GPU-accelerated transforms (no layout thrash). Reduced motion respects user's prefers-reduced-motion. Animations run at 60fps. DELIVERABLE Fully-animated landing page with hero reveal, card stagger, scroll sequences, and CTA micro-interactions. Code is reusable across other pages.
About this skill
name: gsap-skill description: Use when Teaches Claude Code how to build smooth GSAP-powered animations.
GSAP Skill
Equips Claude with GSAP animation library knowledge so generated sites include polished scroll, hover, and transition animations rather than static layouts.
What you get
- SKILL.md with GSAP setup and common animation recipes.
Customize your output
- Configurable easing, timing, and trigger patterns.
Example output
Animated hero sections, scroll reveals, and transitions.
Best for
Frontend developers and designers wanting motion on Claude built sites.
SKILL.md preview
SKILL.md
---
name: gsap-skill
description: Use when building or enhancing a website's front end and the page needs polished scroll, hover, or transition animation rather than a static layout.
version: 1.0.0
category: Design / Design and Frontend
author: AgentVolt
license: proprietary
tags:
- design
- design-and-frontend
- standard
---
# GSAP Skill
Equips the agent with working GreenSock (GSAP) animation knowledge so generated sites ship with smooth, professional motion instead of static markup.
## When to use
… (sign up to view the full skill)Sign up to view, copy, and install the full skill
More design skills
View all Design skills →Frontend UI UX Skill (oh-my-opencode)
A frontend UI and UX focused skill from the oh-my-opencode toolkit.
Design
Mobile App UI Design Skill
Guides Claude in designing native feeling mobile app interfaces.
Design
Premium Frontend UI Skill
Pushes generated frontend UI toward a premium, polished visual style.
Design
Material 3 Skill
Teaches Claude Google Material 3 design system conventions.
Design