skills.rest
openai
openaiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

scrollytelling-and-parallax-data-visualization

Design and implement scroll-driven data visualizations with parallax, sticky graphics, and scene contracts.

5.3k|765|Updated Mar 4, 2026
Search Tags:# accessibility#parallax#scrolltrigger#scrollytelling#Data Visualization#sticky graphic#scrollama
One-click install
npx skills add https://github.com/openai/plugins --skill scrollytelling-and-parallax-data-visualization
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: scrollytelling-and-parallax-data-visualization
Source: https://github.com/openai/plugins/tree/main/plugins/build-web-data-visualization/skills/scrollytelling-and-parallax-data-visualization
Command: npx skills add https://github.com/openai/plugins --skill scrollytelling-and-parallax-data-visualization

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Building scroll-driven data stories often results in decorative parallax, scrolljacking, broken mobile layouts, and inaccessible animations that obscure rather than reveal evidence. This Skill provides a structured workflow for deciding when scrollytelling is justified, modeling scenes as data contracts, and implementing them with the lightest reliable stack.

Core Features & Use Cases

  • Technique Selection: Choose between graphic sequences, animated transitions, pan-and-zoom, moviescrollers, parallax depth layers, sticky side-by-side layouts, and stacked mobile fallbacks based on what the evidence requires.
  • Scene Contracts: Model every scene as structured data with trigger ranges, data layers, annotations, reduced-motion fallbacks, and static key frames before writing implementation code.
  • Implementation Guidance: Select the lightest stack from native CSS sticky positioning and IntersectionObserver through Scrollama, GSAP ScrollTrigger, Motion useScroll, D3, Canvas2D, and WebGL, with performance and accessibility guardrails.
  • Use Case: A journalist wants a sticky map that flies between regions as the reader scrolls through a story. The Skill produces a scene contract with trigger ranges, a reduced-motion fallback, a mobile stacked variant, and a Scrollama-based implementation plan.

Quick Start

Ask the assistant to design a scrollytelling data story with a sticky chart that transitions as the reader scrolls, including accessibility fallbacks and a mobile layout.

Frequently Asked Questions about scrollytelling-and-parallax-data-visualization

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

FAQPage Schema
How do I build a scrollytelling data visualization?▼

Start by defining a story contract with a one-sentence takeaway and key frames, then model each scene as data with trigger ranges, visual states, and fallbacks. Implement with position: sticky and IntersectionObserver or Scrollama for step triggers, reserving GSAP ScrollTrigger for complex scrubbed timelines.

Scrollama vs GSAP ScrollTrigger for scroll-driven charts?▼

Scrollama suits lightweight step triggers, progress callbacks, and sticky graphic patterns. GSAP ScrollTrigger is better for complex scrubbed timelines, pinning, snapping, and velocity-aware choreography. Choose the lightest option that meets the scene requirements.

When should I use a stepper instead of scrollytelling?▼

Use a stepper when states are discrete and readers need direct access, replay, known length, or controlled comparison. Scrollytelling fits author-led narratives where staged reveal of chronology, spatial movement, or accumulation materially aids interpretation.

How do I make scroll animations accessible with prefers-reduced-motion?▼

Honor the prefers-reduced-motion media query by rendering static key frames, numbered steps, or stacked frames instead of animated transitions. Preserve native scrolling and keyboard controls, keep focus order aligned with reading order, and never autoplay audio.

Why does my scrollytelling page jank on mobile browsers?▼

Mobile jank usually comes from animating layout properties, relying on CSS vh units that shift with browser chrome, or running heavy scroll handlers. Animate only transform and opacity, batch work with requestAnimationFrame, measure window.innerHeight, and lazy-load offscreen media.

Related Skills

Explore More Design & Creative Skills→
lyndonkllyndonkl
142

visual-storytelling-design

Structure data-driven narratives with story arcs and annotation strategies.

Community
Intermediate
ayesha-aziz123ayesha-aziz123
2

framer-motion

Automate Framer Motion animations for React and Next.js components.

Community
Intermediate
phazurlabsphazurlabs
35

Accessibility & Inclusive Design

Convert accessibility requirements into WCAG 2.2 and ARIA implementation guidance.

Community
Advanced
EmasoftEmasoft

amvcp-anim-handoffs

Coordinate cross-skill animation handoffs for amvcp pages across print and touch contexts.

Community
Intermediate