skills.rest
MengTo
MengToCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

scroll-scrubbed-visual-sequence

Build reversible scroll-controlled visual sequences with sticky stages and normalized progress.

5.7k|685|Updated Feb 3, 2026
Search Tags:#GSAP#scrolltrigger#scroll animation#reduced motion#Landing Page#scroll scrubbing#sticky stage
One-click install
npx skills add https://github.com/MengTo/Skills --skill scroll-scrubbed-visual-sequence
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: scroll-scrubbed-visual-sequence
Source: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/scroll-scrubbed-visual-sequence
Command: npx skills add https://github.com/MengTo/Skills --skill scroll-scrubbed-visual-sequence

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Scroll-driven animations often break on reverse scrolling, trap the footer, ignore reduced-motion preferences, or depend on autoplay and wheel hijacking. This Skill provides a disciplined architecture for building scroll-scrubbed visual sequences where native scroll position deterministically controls the exact visual state in both directions.

Core Features & Use Cases

  • Renderer Selection Guidance: Choose between video, image sequences, canvas, SVG/DOM, or WebGL renderers based on content type, with media-safety rules like frame clamping, poster frames, and requestAnimationFrame-coalesced seeks.
  • Sticky Stage Architecture: Build a section in normal document flow with a position:sticky viewport stage, normalized 0-1 progress mapping, and clean release into the next section, with optional GSAP ScrollTrigger integration.
  • Accessibility and Cleanup Contracts: Preserve semantic copy, keyboard navigation, prefers-reduced-motion static fallbacks, and full cleanup of listeners, observers, and renderer resources.
  • Use Case: A designer wants a hero section where an abstract product assembles as the user scrolls and disassembles on scroll-up. The Skill supplies the progress math, sticky layout, state-driven copy stops, and a working demo (demo/index.html) to recreate or remix.

Quick Start

Use the scroll-scrubbed-visual-sequence skill to turn this visual transformation into a responsive, reversible scroll-controlled sequence with a sticky stage and reduced-motion fallback.

Frequently Asked Questions about scroll-scrubbed-visual-sequence

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a scroll-scrubbed animation that works in reverse?▼

Derive one normalized progress value from the section's scroll position and map it directly to the renderer with no implicit easing. Never use wheel delta, elapsed time, or autoplay as the source of truth, so the same scroll position always reproduces the same state.

Should I use video, image sequence, canvas, or SVG for scroll animations?▼

Use video for continuous photographic content, image sequences for exact art-directed frames, canvas for procedural drawing, and SVG or DOM for diagrams and accessible text. Reserve WebGL for cases needing real depth, lighting, or a 3D camera.

Can I use GSAP ScrollTrigger for scroll-scrubbed sequences?▼

Yes, use ScrollTrigger when the project already uses GSAP or needs exact pin, refresh, and timeline coordination with scrub: true. A dependency-free alternative measures the section on scroll and resize, then schedules one render per animation frame.

How do scroll animations handle prefers-reduced-motion?▼

Under prefers-reduced-motion: reduce, remove pinning and scrubbing, render a selected static frame, and restore ordinary document flow. Keep headings, copy, and CTAs in semantic HTML so content never depends on the animated visual.

Why does my scroll sequence stutter during fast scrolling?▼

Stutter comes from uncoalesced seeks and stale requests. Coalesce video currentTime writes in requestAnimationFrame, cancel stale image requests, clamp frame indexes, and pause decoding and rendering while the section is offscreen or the document is hidden.

Related Skills

Explore More Design & Creative Skills→
ayrshareayrshare
12

popup-cro

Optimize popup and modal triggers, timing, and accessibility for conversions.

Official
Advanced
deomiarndeomiarn

smooth-scroll

Implement smooth scrolling for same-page anchor links in router-based web applications.

Community
Basic
spencerpaulyspencerpauly
672

accessibility-auditing

Audit web pages for accessibility issues using browser snapshots and keyboard navigation checks.

Community
Intermediate
alexejluftalexejluft

scrolling-with-purpose

Enforce GSAP ScrollTrigger, React, and Lenis scroll animation best practices.

Community
Intermediate