Animations

Annotates and visualizes GitLab CI/CD runs and provides actionable insights for failures and bottlenecks, accessible via REST API and Python wheelhouse.

Updated Apr 1, 2026

Search Tags:#ui #accessibility #css #animation #web #motion #gpu-acceleration

One-click install

npx skills add https://github.com/dz07/goku-skills --skill animations-dz07

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: Animations
Source: https://github.com/dz07/goku-skills/tree/main/skills/animations
Command: npx skills add https://github.com/dz07/goku-skills --skill animations-dz07

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Create performant web animations with proper accessibility and timing.

Core Features & Use Cases

GPU-Accelerated properties: Use transform and opacity for smooth animations; avoid layout thrashing by not animating width/height/margins, etc.
Reduced motion & accessibility: respect user preferences and disable heavy animations with media queries.
Timing functions & best practices: offer guidance on easing, durations, and common mistakes.
Start with CSS; progressively enhance with AutoAnimate for lists and Motion/GSAP for complex sequences.
Common mistakes: avoid animating layout properties, ignore prefers-reduced-motion, and overusing transition: all.

Quick Start

Start with CSS transitions using transform and opacity for smooth, accessible animations, add prefers-reduced-motion handling, then progressively enhance with AutoAnimate for lists or bring in Motion/GSAP only for complex choreography.

Frequently Asked Questions about Animations

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

FAQPage Schema

How do I create web animations that are accessible and performant?▼

Accessible web animations require GPU-accelerated CSS properties like transform and opacity, combined with prefers-reduced-motion media queries to disable heavy transitions for users with motion sensitivities.

What are the best practices for CSS animation timing and easing?▼

CSS animation best practices involve using appropriate duration and easing functions, avoiding layout-thrashing properties like width or height, and progressively enhancing transitions with libraries like Motion or GSAP for complex sequences.

Why does my CSS transition cause layout thrashing and jank?▼

CSS transitions cause layout thrashing when animating properties like width, height, or margins; switching to GPU-accelerated properties such as transform and opacity prevents these repaints and ensures smooth motion.

When should I use AutoAnimate, Motion, or GSAP for web animations?▼

Use AutoAnimate for list animations, Motion, or GSAP for complex choreography, and CSS transitions as the baseline; this progressive enhancement approach keeps web animations performant and accessible.

How do I handle prefers-reduced-motion in web animation?▼

Handle prefers-reduced-motion by using CSS media queries to disable heavy animations and transitions, ensuring web motion respects user accessibility preferences and prevents motion-induced discomfort.