motion-engineering
CommunityMaster web animation and scrolling interactions with GSAP, React, and View Transitions API.
Design & Creative#ScrollTrigger#GSAP#React integration#web animation#web motion#animation techniques
AuthorSensLiao
Version1.0.0
Installs0
System Documentation
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'.
Dependency Matrix
Required Modules
None requiredComponents
scriptsassetsreferences
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: motion-engineering Download link: https://github.com/SensLiao/Claude-code-setting/archive/main.zip#motion-engineering Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 620,000+ vetted skills library on demand.