skills.rest
pedropenha
pedropenhaCOMMUNITY
Explore all skills by this author →
GitHub

cinematic-gsap-lenis-motion-system

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

Updated Sep 8, 2026
Search Tags:#gsap#parallax#lenis#scrolltrigger#scroll animation#web motion#smooth scrolling
One-click install
npx skills add https://github.com/pedropenha/project-skills --skill cinematic-gsap-lenis-motion-system-pedropenha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cinematic-gsap-lenis-motion-system
Source: https://github.com/pedropenha/project-skills/tree/main/.agents/skills/cinematic-gsap-lenis-motion-system
Command: npx skills add https://github.com/pedropenha/project-skills --skill cinematic-gsap-lenis-motion-system-pedropenha

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 scenes, hover effects, and custom cursors without conflicts, jank, or accessibility regressions. This Skill provides a complete, reusable implementation pattern so these behaviors work together instead of as isolated animations. ## Core Features & Use Cases - Unified Motion Foundation: Initializes Lenis smooth scrolling synced to the GSAP ticker so ScrollTrigger animations and scroll position stay in lockstep, with reduced-motion fallbacks. - Data-Attribute Motion API: Reusable markup hooks (data-motion-text, data-reveal, data-parallax-image, data-magnetic, data-cursor) for staggered text reveals, clip-path image reveals, parallax layers, pinned horizontal galleries, magnetic hover, and custom cursors. - Use Case: A creative studio building an Awwwards-style portfolio site uses this Skill to add masked line-by-line headline reveals, a pinned horizontal work gallery, subtle image parallax, and a magnetic CTA with a labeled custom cursor, all disabled gracefully for touch and reduced-motion users. ## Quick Start Use the cinematic-gsap-lenis-motion-system skill to add smooth Lenis scrolling with staggered text reveals, parallax images, and a magnetic hover button to my 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 scrolling 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 scroll positions perfectly synchronized.

How to create staggered text reveal animations with GSAP?▼

Split text into masked word or line spans, then animate from yPercent 110 with blur using power4.out easing and stagger values of 0.035-0.14 seconds. Trigger once when the element reaches the top 82% of the viewport via ScrollTrigger.

Does GSAP ScrollTrigger work with reduced motion preferences?▼

Yes, but you must handle it manually. Check prefers-reduced-motion before initializing Lenis and animations, then set elements to visible with gsap.set and skip smooth scrolling so users get static, readable content.

Why do ScrollTrigger animations break after SPA route changes?▼

ScrollTriggers persist across route transitions unless cleaned up. Wrap setup in gsap.context() and call ctx.revert() on unmount, or kill existing triggers before initializing the next route, then call ScrollTrigger.refresh().

When should I avoid pinned scroll sections and parallax effects?▼

Avoid pinning for content-heavy sections and on mobile where it causes overlap issues. Skip parallax, magnetic hover, and custom cursors on touch devices and for reduced-motion users, keeping movement subtle and limited to transform and opacity.

Related Skills

Explore More Design & Creative Skills→
ebarroso12ebarroso12

frontend-design

Design accessible frontend interfaces with cohesive design tokens and motion.

Community
Intermediate
coastdigitalgroupcoastdigitalgroup
2

scroll-reveal-implementation

Trigger viewport-based entrance animations using IntersectionObserver with reduced-motion fallbacks.

Official
Intermediate
marcius-llmusmarcius-llmus
1

web-design-guidelines

Review UI and frontend files for accessibility, performance, and UX violations.

Community
Intermediate
smithisrealdevsmithisrealdev

animation-designer

Design and implement web animations with Framer Motion and CSS.

Community
Intermediate