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

cinematic-gsap-lenis-motion-system

Implements scroll-driven web motion systems using GSAP, ScrollTrigger, and Lenis smooth scrolling.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap, lenis.

What problem does it solve? Building a cohesive premium motion language for a website requires coordinating smooth scrolling, scroll-triggered reveals, parallax, pinned sections, hover effects, and custom cursors without conflicts, jank, or accessibility regressions. ## Core Features & Use Cases - Unified Motion Setup: Initializes Lenis smooth scrolling synced to the GSAP ticker so ScrollTrigger animations and scroll position stay in lockstep. - Reusable Motion Primitives: Provides data-attribute-driven patterns for staggered text reveals, clip-path image reveals, parallax layers, pinned horizontal galleries, magnetic hover, custom cursors, and mouse-reactive depth. - Accessibility & Performance Guardrails: Respects prefers-reduced-motion, disables cursor effects on touch devices, and limits animation to transform and opacity properties. - Use Case: A creative studio portfolio site needs cinematic scroll storytelling with masked headline reveals, a pinned horizontal work gallery, and a magnetic call-to-action, all sharing one consistent easing and timing system. ## Quick Start Ask the AI to set up a GSAP and Lenis cinematic motion system with staggered text reveals and parallax images for your landing page.

Frequently Asked Questions about cinematic-gsap-lenis-motion-system

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

FAQPage Schema
How do I sync Lenis smooth scroll with GSAP ScrollTrigger?▼

Create a Lenis instance, call ScrollTrigger.update on Lenis scroll events, and drive lenis.raf from the GSAP ticker with lag smoothing disabled. This keeps scroll-triggered animations and smooth scrolling in lockstep.

How to create staggered text reveal animations with GSAP?▼

Split text into masked word or line spans, then animate them from yPercent 110 with blur using a power4.out ease and stagger of 0.055 to 0.11 seconds. Trigger the reveal once when the element reaches the top 82% of the viewport.

Does GSAP ScrollTrigger work with reduced motion preferences?▼

Yes, but you must handle it manually. Check the prefers-reduced-motion media query, skip Lenis initialization, and set animated elements to fully visible with gsap.set so users get static content without scroll hijacking.

Why do pinned ScrollTrigger sections overlap the next section?▼

Overlap usually happens when pin spacing or end calculations are wrong, or when content loads after initialization. Use anticipatePin: 1, compute end values with functions, and call ScrollTrigger.refresh after images and fonts load.

When should I avoid parallax and pinned scroll effects?▼

Avoid them for reduced-motion users, on touch devices for cursor-based effects, and when sections stack too many simultaneous transforms. Keep pinned scenes to one idea per viewport and test thoroughly on mobile.

Related Skills

Explore More Design & Creative Skills→
kompassdevkompassdev
9

frontend-skill

Design art-directed landing pages with visual hierarchy, motion, and minimal clutter.

Official
Advanced
oriysoriys

optimize

Identify and fix web interface performance bottlenecks using Core Web Vitals metrics.

Community
Advanced
alex-jordan547alex-jordan547

animate

Build, review, and audit web animations using CSS transitions, springs, and gesture patterns.

Community
Intermediate
markus41markus41
18

Scroll Animations Skill

Implement scroll-triggered animations and parallax effects with Framer Motion or GSAP.

Community
Intermediate