blessed way of animations and transitions for svelte 5?

[JonathonRP]

What the svelte 5 blessed path for animations and transitions?

[farfromexact]

For Svelte 5, the blessed path depends on the kind of animation, but it is still the built-in declarative primitives rather than manually mutating DOM nodes.

• Use CSS transitions for simple state changes that do not need JavaScript timing.
• Use the transition directive for enter/exit behavior.
• Use keyed each blocks plus the animate directive for list reordering, especially FLIP-style movement.
• Use the current motion primitives when the animated value is application state rather than an element's lifecycle.

The important distinction is between an element entering/leaving and an element moving because data was reordered. A transition is not a substitute for a keyed list animation, and an unkeyed each block can make it look as if Svelte animated the wrong DOM node.

For Svelte 5 code, I would keep the source of truth in runes/state and let the template consume it. Avoid mixing a manually managed requestAnimationFrame loop with Svelte's lifecycle unless the animation is genuinely canvas/WebGL work. If a component needs a custom easing function, make the effect a small reusable transition rather than coupling it to a specific page.

A useful test matrix is: initial render, conditional mount/unmount, keyed reorder, rapid state changes, reduced-motion preference, and SSR/hydration. If you can describe the exact case you are deciding between, the answer is usually one of those primitives rather than a new animation framework.