skills.rest
SensLiao
SensLiaoCOMMUNITY
Explore all skills by this author →
GitHub

motion-engineering

Automate GSAP web animations including scroll interactions, text reveal, and parallax.

Updated May 28, 2026
Search Tags:#ScrollTrigger#GSAP#React integration#web animation#web motion#animation techniques
One-click install
npx skills add https://github.com/SensLiao/Claude-code-setting --skill motion-engineering
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: motion-engineering
Source: https://github.com/SensLiao/Claude-code-setting/tree/main/skills/motion-engineering
Command: npx skills add https://github.com/SensLiao/Claude-code-setting --skill motion-engineering

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and assets (resource) and references (resource) components.

What problem does it solve?

This Skill addresses the complexity of web animation, providing a set of executable web-motion recipes built with GSAP and native APIs, allowing users to implement dynamic web animations and interactions with ease.

Core Features & Use Cases

  • GSAP Integration: Offers GSAP v3.13+ recipes and plugins, ensuring compatibility and performance for web animations.
  • Scroll-Driven Animations: Allows scroll-linked effects, parallax, and pinning sections.
  • Text Reveal: Includes text reveal animations and page transitions.
  • React Integration: Provides seamless integration with React and useGSAP hooks for clean animation management.
  • Reduced Motion Accessible: Ensures that animations are optional for users with vestibular sensitivity.

Quick Start

Implement a text reveal animation on the "Welcome" section by loading the motion-engineering skill and triggering it with the command: 'animate text reveal "Welcome" section'.

Frequently Asked Questions about motion-engineering

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

FAQPage Schema
How do I implement GSAP scroll animations in a React project?▼

GSAP scroll animations integrate with React through useGSAP hooks and ScrollTrigger, managing scroll-linked effects and pinning cleanly within React components.

What is the best way to create text reveal animations on scroll?▼

Text reveal animations are created using GSAP timelines triggered by ScrollTrigger, automating dynamic reveals as users scroll through targeted web page sections.

Can I build parallax scrolling interactions without conflicting with React's render cycle?▼

Yes, parallax scrolling interactions are built using the useGSAP hook for React integration, ensuring animation logic runs outside React's render cycle for optimized performance.

Does web motion support accessibility for users with vestibular sensitivity?▼

Web motion supports accessibility through reduced motion options, ensuring GSAP timeline effects and scroll interactions are optional for users with vestibular sensitivity.

How do View Transitions API and GSAP work together for page transitions?▼

View Transitions API and GSAP combine native browser features with timeline-based effects to execute seamless page transitions and text reveal animations across web pages.

Related Skills

Explore More Design & Creative Skills→
woxiangyangzhimaowoxiangyangzhimao
3

gsap-frameworks

Integrate GSAP animations into Vue and Svelte component lifecycles.

Community
Advanced
woxiangyangzhimaowoxiangyangzhimao
3

gsap-scrolltrigger

Creates scroll-driven animations and effects with GSAP's ScrollTrigger plugin.

Community
Advanced
beardcoderbeardcoder

css-animate

Create composited CSS animations with scroll-driven effects and reduced-motion fallbacks.

Community
Advanced
flatratemechanic1-glitchflatratemechanic1-glitch

Web Animation Patterns

Define layered web animation strategies using CSS, GSAP, and React Three Fiber.

Community
Advanced