svelte-animejs

What problem does it solve?

Anime.js is imperative; Svelte is declarative; this guide shows how to bridge them safely, enabling reliable, lifecycle-aware animations without leaking styles or causing conflicts.

Core Features & Use Cases

• Use: action for element-scoped entrance and hover animations with automatic cleanup on unmount.
• State-driven replays with $effect and bind:this for dynamic state changes like HP changes or roll results.
• Timelines for sequenced animations using createTimeline for choreographed effects.
• Component isolation with createScope to prevent animation leaks in repeated components.
• WAAPI-based animations for high-performance transforms when supported by the browser.

Quick Start

Install animejs, import the ready-made use: action, and apply use:animateIn on a component to trigger a simple fade-in.