cinematic-scroll-storytelling

Coordinate Lenis smooth scrolling with GSAP ScrollTrigger for scroll-driven landing page animations.

4.5k|536|Updated Feb 3, 2026

Search Tags:#gsap #parallax #lenis #scrolltrigger #kinetic typography #cinematic scroll #sticky card stack

Ready to run

npx skills add https://github.com/MengTo/Skills --skill cinematic-scroll-storytelling

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: cinematic-scroll-storytelling
Source: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/cinematic-scroll-storytelling
Command: npx skills add https://github.com/MengTo/Skills --skill cinematic-scroll-storytelling

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It solves the challenge of creating premium, readable, scroll-driven storytelling without turning motion into distracting “effects soup”.

Core Features & Use Cases

Editorial scroll narrative: designs a page that unfolds section-by-section like a cinematic story.
GSAP + ScrollTrigger + Lenis integration: ties animations to real scroll progress using scrub while using smooth scrolling.
Immersive motion patterns: implements staggered kinetic typography, scroll-scrubbed transitions, sticky card stacks, subtle parallax layers, and an optional cinematic preloader.
Product-grade guardrails: includes reduced-motion behavior, readability constraints, and QA checks to avoid janky or inaccessible motion.

Quick Start

Use the skill to implement a premium editorial landing page with Lenis smooth scrolling plus GSAP ScrollTrigger reveals, sticky project card stacks, parallax backgrounds, and a cinematic preloader.

Frequently Asked Questions about cinematic-scroll-storytelling

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

FAQPage Schema

How do sticky card stacks work with ScrollTrigger and smooth scrolling?▼

A sticky card stack uses GSAP ScrollTrigger to pin project cards sequentially during scroll. As users scroll, stacked cards transition cinematically while Lenis maintains smooth scrolling pacing.

Can I create scroll-scrubbed parallax and kinetic typography animations?▼

Scroll-scrubbed parallax and kinetic typography are created by linking GSAP ScrollTrigger timelines to scroll progress. Staggered typography and subtle parallax layers unfold cinematically while preserving readability and compositional pacing.

Does scroll-driven motion support prefers-reduced-motion accessibility?▼

Scroll-driven motion supports prefers-reduced-motion by applying product-grade guardrails. The implementation includes reduced-motion behavior, readability constraints, and QA checks to prevent janky or inaccessible animation experiences.

What's the best way to prevent janky scroll animations in editorial storytelling?▼

Prevent janky scroll animations in editorial storytelling by integrating Lenis smooth scrolling with GSAP ScrollTrigger scrubbed timelines. This approach avoids distracting motion while maintaining readable, section-by-section cinematic pacing.

Do I need to manually register ScrollTrigger for pinned scroll animations?▼

You need to register ScrollTrigger manually when wiring pinned or scrubbed animations to scroll. This registration is required alongside installing gsap and lenis to execute scroll-scrubbed section transitions correctly.