gsap-framer-scroll-animationpor GitHub

GSAP Framer Scroll Animation Skill.

Uma skill de Claude Code e Codex para movimento e vídeo: parallax, seções fixadas, scroll horizontal e animações de texto em scroll.

Motion e Vídeo
Código de UI

Baixar OpenDesign Ver guia de uso

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

Front matter e títulos de seção lidos do arquivo original em 14/09/2026 · 6.365 caracteres no total

01 O que faz

O que a Skill gsap-framer-scroll-animation Faz no Claude Code e no Codex

Resumo, fluxo de trabalho e resultados, todos lidos do SKILL.md do skill.

Do SKILL.mdLido em 14/09/2026 · não é uma execução registrada

Nos termos do próprio skill

Esta skill implementa animações de rolagem de nível profissional usando GSAP ScrollTrigger e Framer Motion. Ela abrange efeitos de paralaxe, revelações acionadas por rolagem, seções fixadas (pinned), rolagem horizontal e animações de texto para projetos em JavaScript puro, React e Next.js. A skill inclui um Seletor Rápido de Biblioteca para escolher entre GSAP (para JS puro, Webflow, Vue, pinning e timelines complexas) e Framer Motion (para o estilo declarativo do React/Next.js).

Ela fornece receitas de código prontas para uso, referências completas de API em arquivos de referência separados e padrões de prompting para o Copilot. A skill combina com a skill premium-frontend-ui, que fornece a filosofia criativa e os princípios de design que orientam quando e por que animar.

O que ele produz

Animações de rolagem de nível profissional com receitas de código prontas para uso

Veja o exemplo de prompt ↗

Como funciona

01
Interpretar a Intenção e Escolher a Biblioteca
A skill primeiro identifica se o GSAP ou o Framer Motion é a melhor opção com base na solicitação do usuário e no contexto do projeto.
02
Ler a Documentação de Referência
O documento de referência relevante no diretório references é consultado para obter APIs detalhadas e padrões de implementação.
03
Sugerir a Instalação de Pacotes
Os pacotes npm necessários são sugeridos caso ainda não estejam presentes no projeto.
04
Implementar a Estrutura da Animação
A estrutura da animação é montada no formato solicitado, seja em componentes React, hooks ou JavaScript puro.
05
Aplicar Ferramentas com Acessibilidade
As ferramentas corretas de rolagem ou de detecção de visibilidade são aplicadas, garantindo que as opções de acessibilidade estejam presentes e que os hooks não causem renderizações infinitas.

02 Encontre o ideal para você

Quando Usar a Skill gsap-framer-scroll-animation

Use a skill gsap-framer-scroll-animation no Claude Code ou Codex quando o trabalho for motion e vídeo deste tipo. Adequação e limites abaixo são retirados do próprio arquivo da skill.

Boa Combinação

Criação de animações de rolagem, revelações acionadas por rolagem, efeitos de paralaxe, seções fixadas, rolagem horizontal ou animações de texto em JS puro, React ou Next.js
Solicitações do usuário como 'animar ao rolar', 'aparecer gradualmente conforme eu rolo', 'fazer rolar como a Apple', 'efeito de paralaxe', 'seção fixa (sticky)' ou 'animação de entrada'
Gerando código GSAP ou Framer Motion com padrões de prompt do Copilot

Conheça os Limites

Requer GSAPO SKILL.md lista esta dependência; a skill não funciona sem ela no seu projeto.

O Que Fornecer

Seletor completo, imagem base e intervalo de rolagemO Copilot precisa do seletor completo, da imagem base e do intervalo de rolagem desde o início, porque prompts vagos produzem código vago.
Parâmetros específicos do GSAPPara implementações GSAP, especifique o seletor, as strings de start/end e se scrub ou toggleActions é desejado.
Parâmetros específicos do Framer MotionPara implementações Framer, especifique qual hook usar (useScroll vs whileInView), valores de offset e o que transformar.
Mensagens de erro exatasAo pedir ao Copilot para corrigir problemas, cole a mensagem de erro exata para correções muito melhores.

03 Dentro da skill

Regras que o skill gsap-framer-scroll-animation Dá ao Claude Code e Codex

8 instruções concretas, padrões e limites que o SKILL.md define para o agente — a parte do arquivo que muda o resultado.

Registre o Plugin ScrollTrigger Primeiro
O GSAP exige chamar gsap.registerPlugin(ScrollTrigger) antes de usar qualquer recurso do ScrollTrigger.
Use Ease None com Scrub
Quando scrub está ativo no GSAP, sempre use ease: 'none', porque o easing parece errado ao fazer scrub.
Use useGSAP no React
No React, use useGSAP de @gsap/react em vez de useEffect simples, porque ele limpa automaticamente os ScrollTriggers.
Adicione Markers Apenas Durante o Desenvolvimento
Os markers de debug do GSAP devem ser adicionados com markers: true durante o desenvolvimento, mas removidos antes da produção.
A Saída do useTransform Vai na Prop Style
A saída do useTransform do Framer Motion deve ser colocada na prop style de um elemento motion.*, não em uma div simples.
Adicione a Diretiva Use Client no Next.js
Qualquer arquivo Next.js que use hooks de motion deve ter 'use client' no topo do arquivo.
Anime Apenas Transform e Opacity
Anime apenas as propriedades transform e opacity. Evite animar width, height ou box-shadow por questões de desempenho.
Verifique prefers-reduced-motion
Sempre verifique a preferência do usuário prefers-reduced-motion para respeitar as necessidades de acessibilidade.

04 Coloque em prática

Instalar gsap-framer-scroll-animation no Claude Code ou Codex

Um comando npx skills add, depois uma primeira tarefa no seu agente e uma checklist para o resultado.

Adicionar gsap-framer-scroll-animation ao Claude Code, Codex ou Seu Agente

Rode no seu projeto; o instalador pergunta a qual agente adicioná-lo.

Terminal

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

Formato genérico da CLI skills para skills/gsap-framer-scroll-animation/SKILL.md; o repositório pode documentar seu próprio caminho.

Dê à Skill uma Primeira Tarefa de Motion e Vídeo

Escrito nos próprios termos do skill; substitua as partes entre colchetes pelo seu 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.

Fonte: escrito a partir do SKILL.md nos próprios termos do skill.

Verifique o Primeiro Resultado

O que o próprio SKILL.md diz sobre como é um resultado correto:

Confirme que gsap.registerPlugin(ScrollTrigger) é chamado antes de qualquer uso do ScrollTrigger

No OpenDesign importe gsap-framer-scroll-animation a partir do link do SKILL.md: Plugins → Add → Skill → Import from link, depois selecione-o na barra superior.

Baixar OpenDesign Ler o quickstart

05 Código aberto, rastreável

Fonte, Licença e Verificação

De onde vêm os fatos desta página e quando foram verificados pela última vez.

Author: GitHub
Repository: github.com/github/awesome-copilot Branch main
Arquivo da skill: skills/gsap-framer-scroll-animation/SKILL.md Checksum de conteúdo registrado na verificação; commit 1899b18
License: MIT De LICENSE.
Estrelas do repositório: 38.981 Snapshot do GitHub tirado em 14/09/2026 para todo o repositório github/awesome-copilot, que contém 6 skills neste catálogo. Não é uma classificação ou contagem de uso da gsap-framer-scroll-animation.
Verificado pelo OpenDesign: 14/09/2026 Arquivo de origem, caminho, texto da licença e contagem de estrelas foram verificados. Não integrado ao OpenDesign principal (verificado em 28/08/2026); uma execução ao vivo não foi registrada nesta página.

Dentro do SKILL.md

Seletor Rápido de BibliotecaTabela que mapeia casos de uso para GSAP ou Framer Motion com base no framework e na complexidade da animação
Configuração (Sempre Faça Primeiro)Comandos de instalação e importações necessárias para GSAP e Framer Motion com registro de plugins
WorkflowProcesso de cinco etapas, da interpretação da intenção até a aplicação das ferramentas, com opções de acessibilidade
Os 5 Padrões de Scroll Mais ComunsTrechos de código para os padrões fade-in, scrub, scroll-linked e pinned timeline em ambas as bibliotecas
Regras Críticas (Aplicar Sempre)Oito regras obrigatórias para registro de plugins, easing, hooks do React, acessibilidade e performance
Dicas de Prompt para o CopilotComo estruturar prompts com seletores completos, intervalos de scroll e mensagens de erro para uma melhor geração de código
Arquivos de ReferênciaTabela listando gsap.md e framer.md com suas referências completas de API e conteúdos de receitas
Skills RelacionadasLista a skill premium-frontend-ui como a companheira de filosofia criativa que define quando e por que animar

A Descrição da Própria Skill

- Use esta skill sempre que o usuário quiser criar animações de scroll, efeitos de scroll, parallax, revelações acionadas por scroll, seções fixadas, scroll horizontal, animações de texto ou qualquer movimento vinculado à posição de scroll — em vanilla JS, React ou Next.js. Cobre GSAP ScrollTrigger (pinning, scrubbing, snapping, timelines, scroll horizontal, ScrollSmoother, matchMedia) e Framer Motion / Motion v12 (useScroll, useTransform, useSpring, whileInView, variants). Use esta skill mesmo se o usuário apenas disser "animar ao rolar", "aparecer enquanto rolo", "fazer rolar como a Apple", "efeito parallax", "seção fixa", "barra de progresso de scroll" ou "animação de entrada". Também ativa para padrões de prompt do Copilot para geração de código GSAP ou Framer Motion. Combina com a skill premium-frontend-ui para filosofia criativa e acabamento de nível de design.

Descrição do front-matter de SKILL.md. O arquivo completo tem cerca de 6.365 caracteres. Leia o arquivo completo no GitHub.

06 Antes de instalar

Perguntas Sobre a Skill gsap-framer-scroll-animation

As respostas vêm do SKILL.md conforme lido em 2026-09-14, e não de uma execução registrada.

Devo usar GSAP ou Framer Motion no meu projeto?

Use GSAP para JS puro, Webflow, Vue, ou quando precisar de pinning, scroll horizontal ou timelines complexas. Use Framer Motion para projetos React ou Next.js com estilo declarativo, ou quando quiser animações de entrada com whileInView. Ambos podem coexistir no mesmo app Next.js.

GSAP Framer Scroll Animation

Executar gsap-framer-scroll-animation em uma Tarefa Real de Motion e Vídeo.

Baixe o OpenDesign, importe gsap-framer-scroll-animation a partir do link SKILL.md, cole o prompt acima e leia o plano antes do resultado.

Baixar OpenDesign Ver todas as skills

Terminal

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

O que a Skill gsap-framer-scroll-animation Faz no Claude Code e no Codex

Nos termos do próprio skill

Como funciona

Quando Usar a Skill gsap-framer-scroll-animation

Boa Combinação

Conheça os Limites

O Que Fornecer

Regras que o skill gsap-framer-scroll-animation Dá ao Claude Code e Codex

Registre o Plugin ScrollTrigger Primeiro

Use Ease None com Scrub

Use useGSAP no React

Adicione Markers Apenas Durante o Desenvolvimento

A Saída do useTransform Vai na Prop Style

Adicione a Diretiva Use Client no Next.js

Anime Apenas Transform e Opacity

Verifique prefers-reduced-motion