animation-transitions

Coordinate CSS, LiveView JS, and Svelte transitions with shared timing tokens.

Updated Feb 16, 2026

Search Tags:#css #svelte #coordination #animation #transitions #liveview

Ready to run

npx skills add https://github.com/hwatkins/my-skills --skill animation-transitions

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: animation-transitions
Source: https://github.com/hwatkins/my-skills/tree/main/skills/animation-transitions
Command: npx skills add https://github.com/hwatkins/my-skills --skill animation-transitions

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Coordinating three animation systems across a Phoenix LiveView + Svelte stack to keep CSS animations, LiveView JS transitions, and Svelte transitions in sync and avoid jank.

Core Features & Use Cases

Unified animation ownership per element across LiveView, Svelte, and CSS to prevent conflicts
Shared timing tokens and safe handling of reduced-motion preferences
Page transitions, modals, and dynamic list updates that feel cohesive across systems

Quick Start

Apply per-element ownership rules and shared timing tokens to coordinate LiveView, Svelte, and CSS animations across your UI.

Frequently Asked Questions about animation-transitions

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

FAQPage Schema

How do I coordinate LiveView and Svelte animations to prevent UI jank?▼

Coordinate LiveView and Svelte animations by assigning clear per-element ownership across CSS, LiveView JS, and Svelte to prevent conflicts. Using shared timing tokens ensures UI transitions remain cohesive and jank-free across page navigations and component mounts.

Why do my CSS transitions conflict with LiveView JS transitions on the same element?▼

CSS transitions conflict with LiveView JS transitions when multiple animation systems attempt to control the same element. Establishing unified animation ownership per element prevents these conflicts and ensures cohesive state changes across the UI.

Can I use shared timing tokens for Svelte transitions in a Phoenix LiveView app?▼

Yes, you can use shared timing tokens for Svelte transitions in a Phoenix LiveView app. Shared timing tokens synchronize animation duration and easing across LiveView, Svelte, and CSS, ensuring cohesive transitions for modals and dynamic list updates.

What is the best way to handle reduced-motion preferences across LiveView and Svelte?▼

The best way to handle reduced-motion preferences is to apply dedicated handling within your animation coordination strategy. Safely disabling or adjusting CSS transitions, LiveView JS transitions, and Svelte transitions ensures accessible user experiences.

How to manage page transitions when embedding Svelte islands in LiveView?▼

Manage page transitions with Svelte islands by applying per-element ownership rules across your LiveView and CSS systems. Coordinating these animation systems ensures dynamic list updates and component mounts feel cohesive during navigation.

Do I need to define animation ownership for every element in LiveView and Svelte?▼

You need to define animation ownership for elements targeted by multiple animation systems. Assigning clear ownership prevents overlapping execution between LiveView JS, Svelte, and CSS transitions, keeping UI updates jank-free.