Scroll behavior design
Skill Dragoon0x/everything-design-taste/skills/scroll-behavior-design
Scroll-based interactions, scroll snapping, parallax alternatives, and scroll-linked animation.From its SKILL.md
npx -y skills add Dragoon0x/everything-design-taste --skill scroll-behavior-designAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 9 stars9 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
1.1 KB, 212 tokens by cl100k_base, as published. Nobody here has run it
Scroll Behavior Design
Scroll Patterns
Scroll Snap
.container {
scroll-snap-type: y mandatory; /* or x, or proximity */
}
.section {
scroll-snap-align: start;
}
Use for: full-page sections, image galleries, card carousels.
Scroll-Linked Animation
- Reveal elements as they enter viewport.
- Use IntersectionObserver (not scroll event listeners).
- Subtle fade + translateY is the safest bet.
- Don't animate on every scroll pixel (performance).
Sticky Elements
- Sticky headers: useful for long pages.
- Sticky sidebars: useful for comparison pages.
- Sticky CTAs: useful for long forms or product pages.
.sticky { position: sticky; top: 0; }
Anti-Patterns
- Parallax that causes motion sickness.
- Scroll hijacking (overriding native scroll speed).
- Animations that play on every scroll (jarring on scroll up).
- Infinite scroll without position memory.
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.