GSAP Scroll and UI Animation Builder
Production-ready GSAP and ScrollTrigger code for your stack, with no content flash, clean React/Vue teardown, and reduced-motion support.
Before & after
Same prompt, same agent — the only difference is the skill.
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.
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
Your scroll animations look great in the demo, then break in the real app. Content flashes before it fades in, markers drift after images load, animations fire twice in React dev mode, or pinned sections jump after resize. This skill writes GSAP the way production motion engineers do: initial state set before paint, triggers refreshed when layout changes, everything scoped and reverted, and reduced motion respected.
What it does
- Writes GSAP timelines, ScrollTrigger reveals, pins, scrubs, hovers, and text splits in your actual stack (React, Next.js App Router, Vue, Svelte, or vanilla)
- Diagnoses pasted GSAP code: stale start/end positions, nested scrollTriggers, stacked from() tweens, pins inside transformed parents, missing cleanup
- Fixes the flash of unanimated content without hiding content from no-JS visitors
- Wires
useGSAP,gsap.context, andgsap.matchMediaso animations survive Strict Mode, route changes, breakpoints, and prefers-reduced-motion - Syncs ScrollTrigger with Lenis or ScrollSmoother and handles custom scroll containers
- Plans full-page choreography as a motion table (trigger, effect, duration, ease) before writing code
What you get
Drop-in code for your framework with the CSS needed to prevent flash, a short note on where it goes and why, and, for bug reports, the cause pinned to the exact line with a minimal fix.
Best for
Frontend developers and design engineers adding or fixing scroll and interaction motion on marketing sites, portfolios, and product pages built in React, Next.js, Vue, or plain HTML.
SKILL.md preview
---
name: gsap-scroll-ui-animation-builder
description: Builds and debugs GSAP animations (timelines, ScrollTrigger reveals, pinning, scrub, hover, SplitText) that survive framework lifecycles, layout shifts, resize, and reduced motion, with flash-free initial states and proper teardown. Use when the user says "add GSAP animations to this page", "stagger these cards in on scroll", "pin this section and scrub through it", "my ScrollTrigger markers are in the wrong place", "my GSAP animation runs twice in React", "content flashes before the animation starts", "scroll animations break after resize", or "convert this CSS/Framer Motion animation to GSAP".
---
… (sign up to view the full skill)More development skills
View all Development skills →Frontend Component UX and Accessibility Review
Severity-ranked fixes with code for UI components: states, keyboard, focus, ARIA, touch targets, contrast, and responsive breakage.
Three.js Click-to-Learn 3D Game Builder
Build click-to-learn 3D games in Three.js: TSL materials, reliable object picking, and an accessible quiz overlay fed by content data.
Angular Standalone Features and State Architecture
Build Angular standalone features with lazy routes, scoped state, safe RxJS flows, and targeted tests.
shadcn/ui Component Building and Theming
Build, theme, and debug shadcn/ui components the way the library is designed to work, with Tailwind v3 and v4 theming handled correctly.