Web Animation AI Skill: GSAP, CSS, Motion

Name: Quintessa - Web Animation Developer (GSAP & CSS) AI Skill
Brand: KissMySkills
Price: 7.0 USD
Availability: InStock

Quintessa - Web Animation Developer (GSAP & CSS) AI Skill

Smooth, accessible web animation in CSS, GSAP or Motion, with cleanup and a reduced-motion path.

$7.00 ce skill un seul paiement à vous pour toujours

Pack skill complet téléchargement immédiatquintessa-web-animation-developer-gsap-css.md

Unlimited

Or get every skill, not just this one $9/mois

Celui-ci et 2,500+ autres, dans votre IA

Ce skill$7

Unlimited$9/mois

See Unlimited · $9/mois → or try every skill free for 7 days, no card

Payez une fois, gardez-le pour toujoursTéléchargement immédiatSatisfait ou remboursé 30 jours

As featured onProduct Hunt Fazier KittyLaunch

Works with

Secure checkout by Shopify

Trademarks of their respective owners. KissMySkills is not affiliated with or endorsed by them.

Ask Quintessa something hard.

📎 quintessa-web-animation-developer-gsap-css.md LOADED ✓

Next.js App Router. My GSAP ScrollTrigger card animation stutters on mobile and fires twice after I navigate away and back. Here is the component. Fix it and keep the same look.

CLAUDE · AS QUINTESSA, WEB ANIMATION DEVELOPER (GSAP & CSS) You get: a diagnosis table naming 7 problems (missing cleanup, top and height animated, heading not scroll-triggered, heavy shadow) -> a tool choice with one-line reason (GSAP inside useGSAP) -> a property plan replacing layout properties with transform and opacity -> a reduced-motion plan with gsap.matchMedia -> the rewritten client component and CSS -> a pre-flight checklist marking what you must measure on your phone.

Ou tous les skills, directement dans votre IA.

0:33 · sans son

Les 2,500+ avec Unlimited · $9/mois en annuel →

Des questions avant d’acheter ? Une personne répond, souvent le jour même : hello@kissmyskills.com

// the file itself

Read it before you buy it.

The first lines of the file your AI will read, exactly as delivered. Nothing rewritten for the page.

// le skill qui fait tourner votre IA

You are Quintessa, a senior front-end developer who specialises in web animation and lives in the DevTools Performance panel. You have been activated to build or fix this animation with the lightest tool, compositor-friendly properties, proper cleanup and a reduced-motion path.

Your job is motion that explains something, runs smoothly on a mid-range phone, cleans up after itself and has a calm alternative for people who turn motion off. You write the code and pick the lightest tool that can do the job. · Saskia - Motion Designer plans motion as a designer: storyboards, logo stings, explainer video motion, kinetic type and micro-interaction specs. Quintessa implements motion in the browser: CSS, GSAP, Motion for React, scroll-driven CSS and view transitions, with performance and cleanup. · AI Motion Graphics Coach (After Effects) teaches After Effects from timeline screenshots. Quintessa does not touch After Effects or video export; her output is code that runs on a live page. · Lena - Frontend Developer and Yuna - Frontend Engineer build whole components and apps (state, data, TypeScript, tests, Core Web Vitals in general). Animation is one topic among many for them. Quintessa goes deep on one layer: motion, its tool choice, its frame budget and its accessibility. · Entrance, hover, scroll-triggered or scroll-scrubbed animation for a page or component. · Choosing between CSS, the Web Animations API, GSAP and Motion for React. · Fixing animation in React or Next.js: Strict Mode double-runs, stale ScrollTriggers after route change, leaks. · Diagnosing jank, layout shift caused by animation, or long tasks during scroll. · Page and route transitions; making existing motion accessible. · Storyboarding a brand film or planning a motion language from scratch - use Saskia. · After Effects, Lottie authoring in AE, or video rendering - use the After Effects coach. · Full app architecture, data fetching, state or testing - use Lena or Yuna. · WebGL scenes and shaders (Three.js, R3F) beyond a simple handoff - Quintessa will say when this is outside her lane. Ask once, grouped, and skip what is already given. If the user wants speed, proceed with stated assumptions.

232 lignes · .md · telechargement immediat

// what's inside

Que contient cette compétence ?

Tool choice table: CSS, Web Animations API, GSAP or Motion for React
Only transform and opacity on the hot path; will-change used sparingly
useGSAP and ScrollTrigger cleanup for React and Next.js route changes
Reduced-motion path, flash limit and pause controls checked against WCAG

Front-end developers, Next.js and Webflow builders and designers who code and want motion that is smooth, clean on unmount and accessible.

// two ways to get it

Buy this file, or open the whole library.

Buy once

This skill as a file

$7 one payment, yours forever

Download right after checkout, keep it for good
Paste it into ChatGPT, Claude, Gemini or any AI chat, free plans included
30-day money-back guarantee

Unlimited Access

Every skill, prompt and agent, inside your chat

$9/mo cancel anytime, or $59 a year

All 2,500+ files in the library, loaded the moment you ask
Nothing to download or paste: connect once in Claude, ChatGPT, Claude Code or Cursor
Works on every Claude plan, free included · 30-day money-back guarantee on the first charge

See Unlimited Access →

Subscribers can still buy single files and keep them after they cancel.

Works with

Trademarks of their respective owners. KissMySkills is not affiliated with or endorsed by them.

// ask your assistant

Or let your AI set up this skill for you.

Go to kissmyskills.com/pages/for-ai-agents and set up the "Quintessa - Web Animation Developer (GSAP & CSS) AI Skill" skill (handle: quintessa-web-animation-developer-gsap-css) for me

Paste it into Claude, ChatGPT, Claude Code, Cursor or Codex. Your AI walks you through connecting KissMySkills (about 3 minutes, 7-day free trial) and loads the skill. What your AI will read →

What you're actually buying

Quintessa is a web animation developer who writes the code, not just the idea. Describe a scroll, hover, entrance or page-transition effect and she picks the lightest tool for it - CSS transitions and keyframes, the Web Animations API, GSAP with ScrollTrigger, or Motion for React - then animates only transform and opacity, writes a reduced-motion version first and returns runnable code with cleanup, a property plan and a pre-flight checklist.

For front-end developers, Webflow and Next.js builders and designers who code. Quintessa never claims frame rates she has not measured; she shows you how to check in the DevTools Performance panel. Unlike Saskia, who storyboards motion as a designer, or our After Effects coach, she ships browser code. Unlike Lena and Yuna, who build whole apps, she goes deep on one layer: animation, its frame budget and its accessibility.

Smooth, accessible web animation in CSS, GSAP or Motion, with cleanup and a reduced-motion path.

Compatible with: Claude, Claude Code, ChatGPT, Gemini and Copilot. Install once as a Skill in Claude or paste it as instructions in any other AI chat.

GSAP or Framer Motion? She uses a tool choice table: Motion for React UI state and exits, GSAP for timelines and scroll stories, CSS for the rest.
Does it fix janky animation? Yes - it swaps layout properties for transform and opacity and walks you through a DevTools Performance recording.
Does it handle ScrollTrigger in React? Yes - it uses the useGSAP hook with scoped selectors so triggers are cleaned up on unmount and route changes.
Does it respect reduced motion? Yes - every effect gets a prefers-reduced-motion path, and flashing and autoplay are checked against WCAG.

// installation Moins de 2 minutes

Quatre étapes. N’importe quel chat AI.

01
Télécharger le fichier
Après le paiement, le lien de téléchargement arrive dans votre boîte de réception. Enregistrez le fichier où vous voulez sur votre appareil.
02
Ouvrez votre conversation AI
Claude, ChatGPT, Gemini, Grok ou Copilot — celui que vous utilisez déjà.
03
Collez le contenu du fichier
Insérez-le dans le prompt système, les instructions du projet ou le champ des instructions personnalisées.
04
Commencez à travailler
Votre AI est maintenant configurée comme spécialiste. Posez-lui n’importe quelle question relevant de son domaine.

Aucune connaissance technique requise.

Avec Unlimited, rien à télécharger. Connectez votre IA une fois, puis demandez : « Charge Quintessa depuis KissMySkills. »

Guide d’installation → Unlimited · $4.92/mois en annuel →

// faq

Questions concernant ce produit

What does Quintessa - Web Animation Developer (GSAP & CSS) do?+

Quintessa turns Claude or ChatGPT into a web animation developer. She builds and fixes scroll, hover, entrance and page-transition animation in CSS, the Web Animations API, GSAP with ScrollTrigger and Motion for React. Each answer gives a tool choice, a property plan, a reduced-motion plan, runnable code with cleanup and a pre-flight checklist for performance and accessibility.

How is Quintessa different from Saskia, the After Effects coach, Lena and Yuna?+

Saskia is a motion designer who storyboards and specs motion. The AI Motion Graphics Coach teaches After Effects from screenshots. Lena and Yuna are frontend developers who build full components and apps. Quintessa does one layer in depth: animation code in the browser, the right tool for each effect, frame budget, cleanup in React and motion accessibility.

Is GSAP free to use, and does she cover its plugins?+

GSAP became free for commercial use in 2025 after Webflow acquired it, including former bonus plugins such as SplitText and MorphSVG. Quintessa still tells you to read the current GSAP license, since terms can change and carry restrictions. She covers the core API, timelines, ScrollTrigger, gsap.matchMedia and the useGSAP hook for React.

Will my animation run at 60fps?+

She does not promise a number she has not measured. She removes the usual causes of jank, such as animating layout properties, too many layers and layout thrash, then shows you how to record with CPU throttling in the DevTools Performance panel and check the result on a real phone.