gabros20

Scroll Animation Skill — Development skill for Claude Code

Development community

Claude skill: scroll animation system — measured entrance curves, pinned all-intra video scrub, scroll wells, header ink, iOS Safari/video/perf learnings, Motion + GSAP primitives.

How to install Scroll Animation Skill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open gabros20/scroll-animation-skill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Scroll Animation Skill does

Claude skill: scroll animation system — measured entrance curves, pinned all-intra video scrub, scroll wells, header ink, iOS Safari/video/perf learnings, Motion + GSAP primitives. Companion to fluid-design-skill.

Alternatives in Development

Cohort Analysis — Cohort retention curves, feature adoption, and segment insights 7.8k ★
Bypass 403 — Probe a 403/401 endpoint with the most-paid bypass tricks (header injection, path encoding, method swap, WAF f 4.5k ★
License — Check that every Python source file carries the required SPDX Apache-2.0 license header 1.1k ★

README

scroll-animation, a Claude skill

A skill that teaches a coding agent to build web animation tied to page arrival and scroll, and to debug it: **triggered entrances**, **one pinned scroll-driven scene per page**, **scrubbed and looping video**, **scroll wells** that pull a section to rest, and **header ink that follows the section underneath**. It ships the same primitives for **React + Motion** and for **GSAP**, sharing one DOM attribute contract and one set of curves measured frame by frame from a reference capture.

It also covers the fixes this kind of work needs: all-intra encoding for scrubbing, frame-accurate loop seams, preload tiers, tab-sleep recovery, iOS Safari's silent video pauses and toolbar feedback, sticky pitfalls, per-frame performance budgets, and working next to existing GSAP, Lenis and header scripts without two systems fighting over one property.

The whole thing is extracted from a production marketing site whose motion layer was built three times. Nearly every rule in `references/` records the bug it prevents and the measurement behind it.

What's inside

scroll-animation/                  the skill: copy this folder into your skills directory
  SKILL.md                         workflow: preflight → triage by clock → foundation → entrances →
                                   the one scene → media → header theme → brownfield coexistence → verify
  references/                      the method and its reasons (preflight, motion architecture, scroll scenes,
                                   video, header theme, brownfield coexistence, iOS Safari motion,
                                   performance, verification, attribute contract, fluid interop)
  assets/
    react-motion/                  React + Motion primitives: Stage/StageItem/StageVeil, CountUp, FadeOnExit,
                                   ScrubStage, PullToCentre, InViewLoopVideo, useHeaderTheme
    gsap/                          the same primitives for GSAP, framework-agno