gsap-framer-scroll-animationавтор GitHub

GSAP Framer Scroll Animation Skill.

Skill для Claude Code и Codex для анимации и видео: параллакс, закреплённые секции, горизонтальная прокрутка и текстовые scroll-анимации.

Анимация и видео
UI-код

Скачать OpenDesign Инструкция по использованию

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

Метаданные и заголовки разделов считаны из исходного файла 2026-09-14 · 6 365 символов в полной версии

01 Что делает

Что делает skill gsap-framer-scroll-animation в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Этот skill реализует production-grade анимации при скролле с использованием GSAP ScrollTrigger и Framer Motion. Он охватывает эффекты параллакса, появление при скролле, закреплённые секции, горизонтальный скролл и текстовые анимации для проектов на чистом JavaScript, React и Next.js. Skill включает быстрый селектор библиотеки для выбора между GSAP (для чистого JS, Webflow, Vue, закрепления и сложных таймлайнов) и Framer Motion (для декларативного стиля React/Next.js).

Он предоставляет готовые к использованию рецепты кода, полные справочники по API в отдельных файлах-справочниках и паттерны промптинга для Copilot. Skill сочетается со skill premium-frontend-ui, который задаёт творческую философию и принципы дизайна, определяющие, когда и почему стоит анимировать.

Что он выдаёт

Production-grade анимации при скролле с готовыми рецептами кода

Смотрите пример запроса ↗

Как это работает

01
Определение намерения и выбор библиотеки
Сначала skill определяет, что лучше подходит — GSAP или Framer Motion — на основе запроса пользователя и контекста проекта.
02
Изучение справочной документации
Для получения подробных API и паттернов реализации используется соответствующий справочный документ в каталоге references.
03
Предложение установки пакетов
Если необходимые npm-пакеты ещё не установлены в проекте, предлагается их установить.
04
Реализация каркаса анимации
Структура анимации выстраивается в запрошенном формате — будь то компоненты React, хуки или чистый JavaScript.
05
Применение инструментов с учётом доступности
Применяются корректные инструменты для скролла или отслеживания видимости, при этом обеспечиваются параметры доступности и отсутствие бесконечных повторных рендеров у хуков.

02 Определите своё применение

Когда использовать skill gsap-framer-scroll-animation

Используйте skill gsap-framer-scroll-animation в Claude Code или Codex, когда задача связана с motion и видео такого типа. Область применения и ограничения взяты из собственного файла skill.

Хорошо подходит

Создание анимаций при скролле, появления при скролле, эффектов параллакса, закреплённых секций, горизонтального скролла или текстовых анимаций на чистом JS, React или Next.js
Запросы пользователя вроде «анимировать при скролле», «появление при скролле», «сделать скролл как у Apple», «эффект параллакса», «липкая секция» или «анимация появления»
Генерация кода GSAP или Framer Motion с шаблонами промптов Copilot

Знайте границы

Требуется GSAPSKILL.md указывает эту зависимость; без неё в вашем проекте скилл не работает.

Что предоставить

Полный селектор, базовое изображение и диапазон скроллаCopilot нужны полный селектор, базовое изображение и диапазон скролла заранее, потому что смутные промпты дают смутный код.
Параметры, специфичные для GSAPДля реализаций на GSAP укажите селектор, строки start/end и нужен ли scrub или toggleActions.
Параметры, специфичные для Framer MotionДля реализаций на Framer укажите, какой хук использовать (useScroll или whileInView), значения offset и что нужно трансформировать.
Точные сообщения об ошибкахКогда просите Copilot исправить проблему, вставляйте точное сообщение об ошибке — это значительно улучшает результат.

03 Внутри скилла

Правила, которые skill gsap-framer-scroll-animation даёт Claude Code и Codex

8 конкретных инструкций, значений по умолчанию и ограничений, которые SKILL.md задаёт для агента — та часть файла, которая влияет на результат.

Сначала зарегистрируйте плагин ScrollTrigger
GSAP требует вызова gsap.registerPlugin(ScrollTrigger) перед использованием любых функций ScrollTrigger.
Используйте ease: 'none' со scrub
Когда в GSAP активен scrub, всегда используйте ease: 'none', потому что easing при скраббинге ощущается неправильно.
Используйте useGSAP в React
В React используйте useGSAP из @gsap/react вместо обычного useEffect, потому что он автоматически очищает ScrollTrigger.
Добавляйте markers только во время разработки
Отладочные маркеры GSAP следует добавлять с markers: true во время разработки, но удалять перед production.
Результат useTransform идёт в проп style
Результат useTransform из Framer Motion должен помещаться в проп style элемента motion.*, а не обычного div.
Добавляйте директиву use client в Next.js
Любой файл Next.js, использующий хуки motion, должен содержать 'use client' в начале файла.
Анимировать только Transform и Opacity
Анимируйте только свойства transform и opacity. Избегайте анимации width, height или box-shadow — это влияет на производительность.
Проверяйте prefers-reduced-motion
Всегда проверяйте пользовательскую настройку prefers-reduced-motion, чтобы учитывать потребности доступности.

04 Применение

Установить gsap-framer-scroll-animation в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавить gsap-framer-scroll-animation в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal

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

Общая форма CLI skills для skills/gsap-framer-scroll-animation/SKILL.md; репозиторий может документировать свой собственный путь.

Дайте skill первую задачу по motion и видео

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

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.

Источник: составлено по SKILL.md в терминах самого skill.

Проверьте первый результат

Что сам SKILL.md считает правильным результатом:

Убедитесь, что gsap.registerPlugin(ScrollTrigger) вызывается перед любым использованием ScrollTrigger

В OpenDesign импортируйте gsap-framer-scroll-animation по ссылке на его SKILL.md: Plugins → Add → Skill → Import from link, затем выберите его в верхней панели.

Скачать OpenDesign Читать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author: GitHub
Repository: github.com/github/awesome-copilot Ветка main
Файл skill: skills/gsap-framer-scroll-animation/SKILL.md Контрольная сумма содержимого записана при проверке; коммит 1899b18
License: MIT Из LICENSE.
Звёзды репозитория: 38 981 Снимок GitHub сделан 2026-09-14 для всего репозитория github/awesome-copilot, который содержит 6 skills в этом каталоге. Не является рейтингом или счётчиком использования для gsap-framer-scroll-animation.
Проверено OpenDesign: 2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

Быстрый выбор библиотекиТаблица сопоставления сценариев использования с GSAP или Framer Motion на основе фреймворка и сложности анимации
Настройка (всегда делайте первым делом)Команды установки и необходимые импорты для GSAP и Framer Motion с регистрацией плагинов
Рабочий процессПятиэтапный процесс от интерпретации намерения до применения инструментов с опциями доступности
5 самых распространённых паттернов скроллаФрагменты кода для паттернов fade-in, scrub, scroll-linked и pinned timeline в обеих библиотеках
Критические правила (применяйте всегда)Восемь обязательных правил для регистрации плагинов, easing, React-хуков, доступности и производительности
Советы по промптингу для CopilotКак структурировать промпты с полными селекторами, диапазонами скролла и сообщениями об ошибках для более качественной генерации кода
Справочные файлыТаблица со списком gsap.md и framer.md с полными справочниками по API и содержимым рецептов
Связанные skillУказывает на skill premium-frontend-ui как спутника по творческой философии, определяющего когда и почему анимировать

Собственное описание skill

«Используйте этот навык, когда пользователь хочет создать скролл-анимации, эффекты прокрутки, параллакс, появление элементов при скролле, закреплённые секции, горизонтальную прокрутку, текстовые анимации или любое движение, связанное с позицией скролла — на чистом JS, React или Next.js. Охватывает GSAP ScrollTrigger (закрепление, scrubbing, snapping, таймлайны, горизонтальный скролл, ScrollSmoother, matchMedia) и Framer Motion / Motion v12 (useScroll, useTransform, useSpring, whileInView, варианты). Используйте этот навык, даже если пользователь просто говорит «анимация при скролле», «появление при прокрутке», «скролл как у Apple», «эффект параллакса», «закреплённая секция», «индикатор прогресса скролла» или «анимация появления». Также срабатывает на паттерны промптов Copilot для генерации кода GSAP или Framer Motion. Сочетается с навыком premium-frontend-ui для творческой философии и проработки дизайна.»

Описание из front-matter SKILL.md. Полный файл составляет около 6365 символов. Читать полный файл на GitHub.

06 Перед установкой

Вопросы о skill gsap-framer-scroll-animation

Ответы взяты из SKILL.md в редакции от 2026-09-14, а не из записанного запуска.

Что использовать для моего проекта — GSAP или Framer Motion?

Используйте GSAP для чистого JS, Webflow, Vue, или когда нужны pinning, горизонтальный скролл или сложные таймлайны. Используйте Framer Motion для проектов на React или Next.js с декларативным стилем, или когда нужны анимации появления whileInView. Оба могут сочетаться в одном приложении Next.js.

GSAP Framer Scroll Animation

Запустите gsap-framer-scroll-animation на реальной задаче категории «Движение и видео».

Загрузите OpenDesign, импортируйте gsap-framer-scroll-animation по ссылке на SKILL.md, вставьте промпт выше и прочитайте план перед результатом.

Загрузить OpenDesign Все навыки

Терминал

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

Что делает skill gsap-framer-scroll-animation в Claude Code и Codex

Словами самого skill

Как это работает

Когда использовать skill gsap-framer-scroll-animation

Хорошо подходит

Знайте границы

Что предоставить

Правила, которые skill gsap-framer-scroll-animation даёт Claude Code и Codex

Сначала зарегистрируйте плагин ScrollTrigger

Используйте ease: 'none' со scrub

Используйте useGSAP в React

Добавляйте markers только во время разработки

Результат useTransform идёт в проп style

Добавляйте директиву use client в Next.js

Анимировать только Transform и Opacity

Проверяйте prefers-reduced-motion