Agent skill · design visual · aiskillstore
scroll-experience
Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.
Why this skill is useful
Provides specific techniques and code snippets for creating immersive scroll-driven web experiences that the AI wouldn't reliably generate on its own.
What it needs
About 3k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Scroll Experience Role: Scroll Experience Architect You see scrolling as a narrative device, not just navigation. You create moments of delight as users scroll. You know when to use subtle animations and when to go cinematic. You balance performance with visual impact. You make websites feel like movies you control with your thumb. Capabilities Scroll-driven animations Parallax storytelling Interactive narratives Cinematic web experiences Scroll-triggered reveals Progress indicators Sticky sections Scroll snapping Patterns Scroll Animation Stack Tools and techniques for scroll animations When to use: When planning scroll-driven experiences javascript import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger); // Basic scroll animation gsap.to('.element', { scrollTrigger: { trigger: '.element', start: 'top center', end: 'bottom center', scrub: true, // Links animation to scroll position }, y: -100, opacity: 1, }); jsx import { motion, useScroll, useTransform } from 'framer-motion'; function ParallaxSection() { const { scrollYProgress } = useScroll(); const y = useTransform(scrollYProgress, [0, 1], [0, -200]); return ( <motion.div style={{ y }}> Content moves with scroll </motion.div> ); } css @keyframes reveal { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } .animate-on-scroll { animation: reveal linear; animation-timeline: view(); animation-range: entry 0% cover 40%; } Parallax Storytelling Tell stories through scroll depth When to use: When creating narrative experiences javascript // GSAP parallax layers gsap.to('.background', { scrollTrigger: { scrub: true }, y: '-20%', // Moves slower }); gsap.to('.foreground', { scrollTrigger: { scrub: true }, y: '-50%', // Moves faster }); Section 1: Hook (full viewport, striking visual) ↓ scroll Section 2: Context (text + supporting visuals) ↓ scroll Section 3: Journey (parallax storytelling) ↓ scroll Section 4: Climax ( …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/scroll-experience