skills.rest
MengTo
MengToCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

cinematic-gsap-lenis-motion-system

Create a cinematic GSAP, ScrollTrigger, and Lenis motion system with data-attribute markup.

4.5k|536|Updated Feb 3, 2026
Search Tags:#ui interaction#gsap#lenis#scrolltrigger#smooth scrolling#scroll reveals#cinematic motion
One-click install
npx skills add https://github.com/MengTo/Skills --skill cinematic-gsap-lenis-motion-system
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cinematic-gsap-lenis-motion-system
Source: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/cinematic-gsap-lenis-motion-system
Command: npx skills add https://github.com/MengTo/Skills --skill cinematic-gsap-lenis-motion-system

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It solves the problem of creating cohesive, premium-feeling web motion that ties smooth scrolling, scroll-triggered reveals, and interactive hover/cursor behavior into a single consistent language.

Core Features & Use Cases

  • Premium cinematic motion language: defines a luxury editorial timing and feel (eases, scrub delays, reveal and hover cadence) to avoid scattered “one-off” animations.
  • Full motion system architecture: pairs GSAP + ScrollTrigger with Lenis so smooth scrolling remains synchronized with scroll-driven triggers.
  • Reusable markup API: enables drop-in behaviors using data attributes for text (word/line masks), reveals, image clipping reveals, parallax, pinned/story scenes, magnetic hover, custom cursor, and mouse-reactive layers.
  • Performance and accessibility guardrails: includes reduced-motion handling, animation limits (transform/opacity), ScrollTrigger refresh guidance, and SPA/React cleanup patterns.

Quick Start

Ask the AI to generate a GSAP + Lenis “cinematic motion” implementation that matches the provided markup attributes and initializes the full init order with reduced-motion fallback.

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 smooth scrolling with GSAP ScrollTrigger for cinematic motion?▼

A cohesive cinematic motion system pairs GSAP, ScrollTrigger, and Lenis to create luxury web interactions. It defines consistent editorial timing, eases, and reveal cadence to prevent scattered one-off animations across marketing sites and creative portfolios.

How do I create scroll reveals and parallax without writing custom JavaScript for each element?▼

You can use a reusable markup API with data attributes to drop in scroll reveals, word or line mask animations, image clipping, and parallax layers without writing custom JavaScript for each interactive element.

Can I use this GSAP and Lenis motion system within a React or SPA environment?▼

Yes, the motion system includes performance and accessibility guardrails with specific SPA and React cleanup patterns. It ensures ScrollTrigger refreshes properly handle component unmounting to maintain smooth scrolling synchronization.

Does the cinematic motion system support accessibility and reduced-motion preferences?▼

Yes, the system includes built-in accessibility guardrails that automatically disable smooth scrolling and scroll-triggered animations when users have reduced-motion preferences enabled, ensuring a compliant cinematic experience.

What is the best way to build a luxury web motion system with magnetic hover and custom cursor effects?▼

The best way is to implement a full motion architecture combining GSAP and Lenis, using data attributes to declaratively apply magnetic hover, custom cursor tracking, and mouse-reactive layers for premium interactive storytelling.

Related Skills

Explore More Design & Creative Skills→
Aurora-AIAurora-AI
1

cinematographer

Transform static HTML into cinematic web experiences with GSAP, ScrollTrigger, and Lenis.

Community
Intermediate
TumeloRamaphosaTumeloRamaphosa

gsap-scrolltrigger

Create scroll-synchronized GSAP animations with ScrollTrigger configurations.

Community
Advanced
fanguyunfanguyun

threejs-shaders

Creates custom ShaderMaterials and RawShaderMaterials for Three.js 3D scenes using GLSL.

Community
Advanced
ayofemiadeayofemiade

animation-designer

Create web animations and transitions using Framer Motion and CSS.

Community
Advanced