Che cos'è page-transitions?
Da utilizzare quando si implementano modifiche al percorso, transizioni di visualizzazione, aperture/chiusure modali o animazioni di navigazione in applicazioni Web e mobili. Fonte: dylantarre/animation-principles.
·page-transitions
*
page-transitions
✓dylantarre/animation-principlesGitHub: dylantarre/animation-principlesFonte: dylantarre/animation-principles
Da utilizzare quando si implementano modifiche al percorso, transizioni di visualizzazione, aperture/chiusure modali o animazioni di navigazione in applicazioni Web e mobili.
Installazione
Come installare page-transitions
Installa rapidamente la skill AI page-transitions nel tuo ambiente di sviluppo tramite riga di comando
- Apri il terminale: Apri il tuo terminale o strumento da riga di comando (Terminal, iTerm, Windows Terminal, ecc.)
- Esegui il comando di installazione: Copia ed esegui questo comando: npx skills add https://github.com/dylantarre/animation-principles --skill page-transitions
- Verifica l'installazione: Dopo l'installazione, la skill verrà configurata automaticamente nel tuo ambiente AI di coding e sarà pronta all'uso in Claude Code, Cursor o OpenClaw
Fonte: dylantarre/animation-principles.
SKILL.md
Visualizza rawApply Disney's 12 animation principles to route changes, view transitions, and navigation patterns.
| Squash & Stretch | Entering page elastic effect | | Anticipation | Exit animation before enter | | Staging | Hero elements bridge views | | Straight Ahead / Pose to Pose | Shared element vs crossfade | | Follow Through / Overlapping | Content settles after nav | | Slow In / Slow Out | Asymmetric enter/exit easing | | Arc | Slide transitions with curve |
| Secondary Action | Background, nav state changes | | Timing | 200-500ms total transition | | Exaggeration | Reserved for emphasis moments | | Solid Drawing | Consistent spatial model | | Appeal | Smooth, oriented navigation |
Fatti (pronti per citazione)
Campi e comandi stabili per citazioni AI/ricerca.
- Comando di installazione
npx skills add https://github.com/dylantarre/animation-principles --skill page-transitions- Categoria
- *Creatività
- Verificato
- ✓
- Prima apparizione
- 2026-03-03
- Aggiornato
- 2026-03-10
Risposte rapide
Come installo page-transitions?
Apri il tuo terminale o strumento da riga di comando (Terminal, iTerm, Windows Terminal, ecc.) Copia ed esegui questo comando: npx skills add https://github.com/dylantarre/animation-principles --skill page-transitions Dopo l'installazione, la skill verrà configurata automaticamente nel tuo ambiente AI di coding e sarà pronta all'uso in Claude Code, Cursor o OpenClaw
Dov'è il repository sorgente?
https://github.com/dylantarre/animation-principles
Dettagli
- Categoria
- *Creatività
- Fonte
- skills.sh
- Prima apparizione
- 2026-03-03