gsap-framer-scroll-animationvon GitHub

GSAP Framer Scroll Animation Skill.

Ein Skill für Claude Code und Codex für Motion und Video: Parallax, fixierte Bereiche, horizontales Scrollen und Text-Scroll-Animationen.

Motion & Video
UI-Code

OpenDesign herunterladen Anleitung ansehen

github/awesome-copilot · skills/gsap-framer-scroll-animation/SKILL.mdSKILL.md

--- name: gsap-framer-scroll-animation description: - Use this skill whenever the user wants to build scroll animations, scroll effects, parallax, scroll-triggered reveals, pinned sections, horizontal scroll, text animations, or any motion tied to scroll position — in vanilla JS, React, or Next.js. Covers GSAP ScrollTrigger (pinning, scrubbing, snapping, timelines, horizontal scroll, ScrollSmoother, matchMedia) and Framer Motion / Motion v12 (useScroll, useTransform, … --- ## Quick Library Selector ## Setup (Always Do First) ## Workflow ## The 5 Most Common Scroll Patterns ## Critical Rules (Apply Always) ## Copilot Prompting Tips

Metadaten und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 6.365 Zeichen insgesamt

01 Was es tut

Was der gsap-framer-scroll-animation Skill in Claude Code und Codex leistet

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Dieser Skill implementiert produktionsreife Scroll-Animationen mit GSAP ScrollTrigger und Framer Motion. Er umfasst Parallax-Effekte, scroll-getriggerte Reveals, gepinnte Abschnitte, horizontales Scrollen und Textanimationen für Projekte mit reinem JavaScript, React und Next.js. Der Skill enthält einen Quick Library Selector zur Wahl zwischen GSAP (für reines JS, Webflow, Vue, Pinning und komplexe Timelines) und Framer Motion (für den deklarativen React/Next.js-Stil).

Er bietet einsatzbereite Code-Rezepte, vollständige API-Referenzen in separaten Referenzdateien und Copilot-Prompting-Muster. Der Skill ergänzt den premium-frontend-ui Skill, der die kreative Philosophie und die Designprinzipien liefert, die bestimmen, wann und warum animiert werden soll.

Was er erzeugt

Produktionsreife Scroll-Animationen mit einsatzbereiten Code-Rezepten

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Absicht Interpretieren und Bibliothek Wählen
Der Skill ermittelt zunächst, ob GSAP oder Framer Motion basierend auf der Anfrage des Nutzers und dem Projektkontext besser geeignet ist.
02
Referenzdokumentation Lesen
Das relevante Referenzdokument im references-Verzeichnis wird für detaillierte APIs und Implementierungsmuster herangezogen.
03
Paketinstallation Vorschlagen
Die erforderlichen npm-Pakete werden vorgeschlagen, falls sie noch nicht im Projekt vorhanden sind.
04
Animations-Grundgerüst Implementieren
Die Animationsstruktur wird im gewünschten Format erstellt, egal ob als React-Komponenten, Hooks oder reines JavaScript.
05
Tools mit Barrierefreiheit Anwenden
Die richtigen Scroll- oder In-View-Tools werden angewendet, wobei sichergestellt wird, dass Barrierefreiheitsoptionen vorhanden sind und Hooks keine unendlichen Re-Renders verursachen.

02 Finden Sie Ihren Favoriten

Wann Sie den gsap-framer-scroll-animation Skill verwenden

Verwenden Sie den gsap-framer-scroll-animation Skill in Claude Code oder Codex, wenn die Aufgabe Motion und Video dieser Art betrifft. Eignung und Grenzen unten stammen aus der eigenen Datei des Skills.

Gut geeignet

Erstellen von Scroll-Animationen, scroll-getriggerten Reveals, Parallax-Effekten, gepinnten Abschnitten, horizontalem Scrollen oder Textanimationen in reinem JS, React oder Next.js
Nutzeranfragen wie „beim Scrollen animieren“, „beim Scrollen einblenden“, „scrollen lassen wie Apple“, „Parallax-Effekt“, „sticky Bereich“ oder „Entrance-Animation“
Generieren von GSAP- oder Framer-Motion-Code mit Copilot-Prompt-Mustern

Grenzen kennen

Benötigt GSAPDie SKILL.md nennt diese Abhängigkeit; das Skill funktioniert ohne GSAP in Ihrem Projekt nicht.

Was Sie bereitstellen sollten

Vollständiger Selektor, Basisbild und Scroll-BereichCopilot benötigt vorab den vollständigen Selektor, das Basisbild und den Scroll-Bereich, denn vage Prompts erzeugen vagen Code.
GSAP-spezifische ParameterGeben Sie für GSAP-Implementierungen den Selektor, die Start-/End-Strings und an, ob scrub oder toggleActions gewünscht ist.
Framer-Motion-spezifische ParameterGeben Sie für Framer-Implementierungen an, welcher Hook verwendet werden soll (useScroll vs. whileInView), welche Offset-Werte gelten und was transformiert werden soll.
Exakte FehlermeldungenWenn Sie Copilot bitten, Probleme zu beheben, fügen Sie die exakte Fehlermeldung ein – das führt zu deutlich besseren Fixes.

03 Innerhalb des Skills

Regeln, die der Skill gsap-framer-scroll-animation Claude Code und Codex vorgibt

8 konkrete Anweisungen, Standardwerte und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

ScrollTrigger-Plugin zuerst registrieren
GSAP erfordert den Aufruf von gsap.registerPlugin(ScrollTrigger), bevor jegliche ScrollTrigger-Funktionen verwendet werden.
Ease None mit Scrub verwenden
Wenn scrub in GSAP aktiv ist, verwenden Sie immer ease: 'none', da Easing sich beim Scrubben falsch anfühlt.
useGSAP in React verwenden
Verwenden Sie in React useGSAP aus @gsap/react statt einfachem useEffect, da es ScrollTriggers automatisch bereinigt.
Markers nur während der Entwicklung hinzufügen
GSAP-Debug-Markers sollten während der Entwicklung mit markers: true hinzugefügt, aber vor der Produktion entfernt werden.
useTransform-Ausgabe gehört in die style-Prop
Die Ausgabe von Framer Motion useTransform muss in der style-Prop eines motion.*-Elements platziert werden, nicht in einem einfachen div.
Use-Client-Direktive in Next.js hinzufügen
Jede Next.js-Datei, die motion-Hooks verwendet, muss 'use client' am Anfang der Datei stehen haben.
Nur Transform und Opacity animieren
Animieren Sie nur die Eigenschaften transform und opacity. Vermeiden Sie das Animieren von width, height oder box-shadow aus Performance-Gründen.
prefers-reduced-motion prüfen
Prüfen Sie stets die Nutzerpräferenz prefers-reduced-motion, um Anforderungen an die Barrierefreiheit zu respektieren.

04 In Betrieb nehmen

gsap-framer-scroll-animation in Claude Code oder Codex installieren

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

gsap-framer-scroll-animation zu Claude Code, Codex oder Ihrem Agent hinzufügen

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal

npx skills add https://github.com/github/awesome-copilot --skill gsap-framer-scroll-animation

Generische skills-CLI-Form für skills/gsap-framer-scroll-animation/SKILL.md; das Repository dokumentiert möglicherweise einen eigenen Pfad.

Geben Sie dem Skill eine erste Motion- und Video-Aufgabe

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr Material.

Starter prompt

Create a pinned hero section with a parallax background image that scales and fades as I scroll down. The hero should pin for 200% of viewport height, with the image starting at scale 1 and ending at 1.3 while opacity drops to 0. Add a fade-in for the headline text that appears after 30% of the scroll range. Use [hero-background.jpg] as the image source.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Bestätigen Sie, dass gsap.registerPlugin(ScrollTrigger) vor jeder ScrollTrigger-Nutzung aufgerufen wird

In OpenDesign importieren Sie gsap-framer-scroll-animation über den SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es dann in der oberen Leiste aus.

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author: GitHub
Repository: github.com/github/awesome-copilot Branch main
Skill-Datei: skills/gsap-framer-scroll-animation/SKILL.md Inhaltsprüfsumme bei Verifizierung aufgezeichnet; Commit 1899b18
License: MIT Aus LICENSE.
Repository-Sterne: 38.981 GitHub-Snapshot vom 14.09.2026 für das gesamte github/awesome-copilot Repository, das 6 Skills in diesem Katalog enthält. Keine Bewertungs- oder Nutzungszahl für gsap-framer-scroll-animation.
Verifiziert von OpenDesign: 14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

Quick Library SelectorTabelle, die Use Cases je nach Framework und Animationskomplexität GSAP oder Framer Motion zuordnet
Setup (immer zuerst)Installationsbefehle und erforderliche Imports für GSAP und Framer Motion mit Plugin-Registrierung
WorkflowFünfstufiger Prozess von der Interpretation der Absicht bis zur Anwendung der Tools mit Optionen für Barrierefreiheit
Die 5 häufigsten Scroll-PatternsCode-Snippets für Fade-in-, Scrub-, Scroll-Linked- und Pinned-Timeline-Patterns in beiden Bibliotheken
Kritische Regeln (immer anwenden)Acht unbedingt zu befolgende Regeln zu Plugin-Registrierung, Easing, React-Hooks, Barrierefreiheit und Performance
Copilot-Prompting-TippsWie man Prompts mit vollständigen Selektoren, Scroll-Bereichen und Fehlermeldungen strukturiert, um bessere Code-Generierung zu erzielen
ReferenzdateienTabelle mit gsap.md und framer.md samt vollständigen API-Referenzen und Recipe-Inhalten
Verwandte SkillsFührt den Skill premium-frontend-ui als Begleiter für die kreative Philosophie auf, der definiert, wann und warum animiert werden sollte

Die eigene Beschreibung des Skills

„Verwenden Sie diesen Skill, wenn der Benutzer Scroll-Animationen, Scroll-Effekte, Parallaxe, scroll-ausgelöste Einblendungen, fixierte Abschnitte, horizontales Scrollen, Textanimationen oder jede Bewegung erstellen möchte, die an die Scroll-Position gebunden ist – in Vanilla JS, React oder Next.js. Deckt GSAP ScrollTrigger (Pinning, Scrubbing, Snapping, Timelines, horizontales Scrollen, ScrollSmoother, matchMedia) sowie Framer Motion / Motion v12 (useScroll, useTransform, useSpring, whileInView, Variants) ab. Verwenden Sie diesen Skill auch, wenn der Benutzer nur sagt „animate on scroll", „fade in as I scroll", „make it scroll like Apple", „parallax effect", „sticky section", „scroll progress bar" oder „entrance animation". Gilt auch für Copilot-Prompt-Muster zur GSAP- oder Framer-Motion-Code-Generierung. Kombiniert sich mit dem premium-frontend-ui-Skill für kreative Philosophie und Design-Feinschliff."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 6.365 Zeichen. Lesen Sie die vollständige Datei auf GitHub.

06 Vor der Installation

Fragen zum gsap-framer-scroll-animation Skill

Die Antworten stammen aus der SKILL.md, gelesen am 14.09.2026, nicht aus einem protokollierten Lauf.

Soll ich GSAP oder Framer Motion für mein Projekt verwenden?

Verwenden Sie GSAP für Vanilla JS, Webflow, Vue oder wenn Sie Pinning, horizontales Scrollen oder komplexe Timelines benötigen. Verwenden Sie Framer Motion für React- oder Next.js-Projekte mit deklarativem Stil oder wenn Sie whileInView-Entrance-Animationen möchten. Beide können in derselben Next.js-App koexistieren.

GSAP Framer Scroll Animation

gsap-framer-scroll-animation auf eine echte Motion- und Video-Aufgabe anwenden.

Laden Sie OpenDesign herunter, importieren Sie gsap-framer-scroll-animation über den SKILL.md-Link, fügen Sie den obigen Prompt ein und lesen Sie den Plan vor dem Ergebnis.

OpenDesign herunterladen Alle Skills durchsuchen

Terminal

npx skills add https://github.com/github/awesome-copilot --skill gsap-framer-scroll-animation

Was der gsap-framer-scroll-animation Skill in Claude Code und Codex leistet

In den eigenen Worten des Skills

So funktioniert es

Wann Sie den gsap-framer-scroll-animation Skill verwenden

Gut geeignet

Grenzen kennen

Was Sie bereitstellen sollten

Regeln, die der Skill gsap-framer-scroll-animation Claude Code und Codex vorgibt

ScrollTrigger-Plugin zuerst registrieren

Ease None mit Scrub verwenden

useGSAP in React verwenden

Markers nur während der Entwicklung hinzufügen

useTransform-Ausgabe gehört in die style-Prop

Use-Client-Direktive in Next.js hinzufügen

Nur Transform und Opacity animieren

prefers-reduced-motion prüfen