skills.rest
josippapez
josippapezCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

cinematic-scroll-storytelling

Builds scroll-driven landing pages with Lenis smooth scrolling and GSAP ScrollTrigger animations.

Updated May 5, 2026
Search Tags:#landing page#gsap#parallax#lenis#scrolltrigger#scroll animation#kinetic typography
One-click install
npx skills add https://github.com/josippapez/ai-setup --skill cinematic-scroll-storytelling-josippapez
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cinematic-scroll-storytelling
Source: https://github.com/josippapez/ai-setup/tree/main/claude/plugins/better-design/skills/cinematic-scroll-storytelling
Command: npx skills add https://github.com/josippapez/ai-setup --skill cinematic-scroll-storytelling-josippapez

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap, lenis.

What problem does it solve? Creating premium editorial landing pages with scroll-linked animation requires coordinating smooth scrolling, scroll triggers, split text, parallax, and sticky layouts, which is error-prone when assembled ad hoc. This Skill provides a complete, tested implementation pattern for cinematic scroll storytelling. ## Core Features & Use Cases - Smooth Scroll Foundation: Integrates Lenis with GSAP ScrollTrigger, including reduced-motion detection and ticker synchronization. - Animation Patterns: Provides ready-made code for split-text reveals, scroll-triggered section reveals, scrubbed pinned scenes, sticky card stacks, parallax layers, footer reveals, and preloaders. - Use Case: A designer building a studio portfolio site can use this Skill to implement a preloader, masked headline reveal, sticky project card stack, and parallax hero image with consistent motion tokens and a QA checklist. ## Quick Start Ask the AI to create a cinematic scroll-driven landing page with Lenis smooth scrolling, GSAP ScrollTrigger animations, staggered text reveals, and a sticky card stack for your portfolio project.

Frequently Asked Questions about cinematic-scroll-storytelling

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

FAQPage Schema
How do I create scroll-driven animations with GSAP ScrollTrigger?▼

Register the ScrollTrigger plugin with gsap.registerPlugin, then attach scrollTrigger configs to tweens or timelines. Use scrub for scroll-linked progress, start/end positions for trigger points, and pin for pinned scenes.

How to combine Lenis smooth scrolling with GSAP ScrollTrigger?▼

Create a Lenis instance, call ScrollTrigger.update on Lenis scroll events, and drive lenis.raf inside gsap.ticker. Disable lag smoothing with gsap.ticker.lagSmoothing(0) so scroll timing stays synchronized.

Does scroll animation work for users with reduced motion preferences?▼

The pattern checks prefers-reduced-motion via matchMedia and skips Lenis, split-text animation, parallax, and scrubbed scenes when enabled. Reduced-motion users see static content with no smooth-scroll layer.

Why do ScrollTrigger animations break after images load?▼

Images and fonts change page layout after triggers are calculated, shifting trigger positions. Call ScrollTrigger.refresh() on window load and after layout shifts to recalculate positions.

When should I avoid scroll scrubbing and pinned sections?▼

Avoid scrubbing and pinning when they harm readability or mobile performance, and never use scroll hijacking that traps the page. The Skill recommends simplified or no pinning on mobile if performance drops.

Related Skills

Explore More Design & Creative Skills→
fivebucksventuresfivebucksventures

creative-designer

Generate on-brand visual assets from brand guidelines in brands/{brand}/brand.md.

Official
Intermediate
dineshrevunurudineshrevunuru
1

verify-ui-quality

Runs mechanical pre-ship verification of self-built UI across intent, click-paths, browsers, and performance.

Community
Advanced
rakibulismrakibulism
2

frontend-performance-engineer

Profile and fix frontend performance issues like jank and memory leaks.

Community
Advanced
sharkitect-solutionssharkitect-solutions

scroll-experience

Develop scroll-driven animations, parallax effects, and sticky sections for web interfaces.

Community
Advanced