SkillsAdd

dragoon0x/optik

scroll-fx

Add scroll-triggered reveals and parallax effects. Uses IntersectionObserver for reveals and CSS scroll-driven animations for parallax.

First seen May 9, 2026

Installation

$ npx skills add dragoon0x/optik --skill scroll-fx
View on skills.sh ↗ GitHub repository ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

gsap-framer-scroll-animation Similar name
github/awesome-copilot

>- Use this skill whenever the user wants to build scroll animations, scroll effects, parallax,…

3.5K installs
gsap-scrolltrigger Similar name
greensock/gsap-skills

Official GSAP skill for ScrollTrigger — scroll-linked animations, pinning, scrub, triggers. Use…

52.3K installs
scroll-world Similar name
oso95/scroll-world

Build an immersive scroll-scrubbed "fly through the world" landing page for any industry or bra…

3.3K installs
gsap-scrolltrigger Similar name
nexu-io/open-design

Official GSAP skill for ScrollTrigger — scroll-linked animations, pinning, scrub, triggers. Use…

2.4K installs
gsap-scrolltrigger Similar name
freshtechbro/claudedesignskills

Comprehensive skill for GSAP (GreenSock Animation Platform) and ScrollTrigger plugin.

2.2K installs
locomotive-scroll Similar name
freshtechbro/claudedesignskills

Comprehensive skill for Locomotive Scroll smooth scrolling library with parallax effects, viewp…

2K installs

Also in this package

Other skills from dragoon0x/optik · top by installs.

npx skills add dragoon0x/optik
normalize 7 layout-audit 7 bolder 7 type-set 6 type-scale 6 type-rhythm 6 type-pair 6 type-measure 6 type-hierarchy 6 type-fix 6

Browse all from dragoon0x/optik

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Not declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 1
License LICENSE
Default branch main
Open issues 0
Status Active

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 722 B
  • docs SUMMARY.md 152 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 5 installs

SKILL.md

/scroll-fx — Scroll Effects

Add scroll-based effects:

Reveal on scroll: Elements fade in and translate up 20-30px as they enter the viewport.

  • Use IntersectionObserver with threshold: 0.1
  • Stagger siblings with 80-120ms delays
  • One-shot (don't re-hide on scroll up)

Parallax: Background layers move at different rates.

  • Use CSS scroll-driven animations where supported
  • Fall back to transform: translateY with scroll listeners
  • Keep subtle (0.1-0.3 rate difference)

Always respect prefers-reduced-motion.