Skills
.Work. You
Rest

orchestrating-css-gsap-conflicts

Community

Sync CSS and GSAP animations

Software Engineering#performance#web development#javascript#css#animation#gsap
Authoralexejluft
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill addresses the common issue where CSS transitions and GSAP animations conflict when applied to the same HTML element, leading to unexpected behavior and animation failures.

Core Features & Use Cases

  • Conflict Resolution: Enforces the "one system per property" rule to prevent GSAP animations from being overridden by CSS or vice-versa.
  • clearProps Utility: Demonstrates the effective use of GSAP's clearProps option to gracefully hand back control of animated properties to CSS after an animation completes.
  • Use Case: When animating an element's transform property with GSAP, but also having a CSS transition defined for transform on hover, this Skill ensures the GSAP animation runs with its specified easing and that the CSS transition is re-enabled afterward.

Quick Start

Use the orchestrating-css-gsap-conflicts skill to animate the x property of an element with GSAP and then clear the transform property.

Dependency Matrix

Required Modules

None required

Components

references

💻 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: orchestrating-css-gsap-conflicts
Download link: https://github.com/alexejluft/brudi/archive/main.zip#orchestrating-css-gsap-conflicts

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.