animated-svelte

animated-svelte

A motion-like CSS animation library for Svelte 5, providing declarative animations with a simple and intuitive API. This all happens using the in and out directives provided by Svelte.

[!WARNING] This strictly an internal package for now and not intended for public use eventually I may get around the making this public.

pnpm add animated-svelte

Quick Start

pnpm add animated-svelte

[!WARNING] The rest of this documentation was written by AI and my not be completely accurate.

<script>
	import { animated } from 'animated-svelte';
</script>

<animated.div
	initial={{ opacity: 0, scale: 0 }}
	animate={{ opacity: 1, scale: 1 }}
	transition={{ duration: 300 }}
>
	Hello, animated-svelte!
</animated.div>

Components

animated.div and animated.span

Animated versions of standard HTML elements with motion capabilities.

Props

Prop	Type	Description
initial	Partial<AnimationConfig> | false	Initial animation state (before entering)
animate	Partial<AnimationConfig>	Target animation state
exit	Partial<AnimationConfig>	Exit animation state (when leaving)
transition	Partial<TransitionConfig>	Transition configuration
ref	HTMLElement | null	Reference to the DOM element

Animation Properties

The AnimationConfig type supports the following properties:

• opacity - number (0-1)
• scale - number
• rotate - number (degrees)
• x - number \| string (px or percentage)
• y - number \| string (px or percentage)
• width - number \| string (px or percentage)
• height - number \| string (px or percentage)
• filter - string (CSS filter value)

Transition Configuration

type TransitionConfig = {
	duration: number | `${number}s` | `${number}ms`; // Default: 0
	timingFunction: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out'; // Default: 'ease-out'
	delay: number | `${number}s` | `${number}ms`; // Default: 0
};

Examples

Basic Animation

<animated.div animate={{ rotate: 90 }} transition={{ duration: 0.5, timingFunction: 'ease-out' }}>
	Rotating element
</animated.div>

Enter/Exit Animations

<script>
	import { animated } from 'animated-svelte';

	let isVisible = $state(false);
</script>

<button onclick={() => (isVisible = !isVisible)}> Toggle </button>

{#if isVisible}
	<animated.div
		initial={{ opacity: 0, scale: 0 }}
		animate={{ opacity: 1, scale: 1 }}
		exit={{ opacity: 0, scale: 0 }}
		transition={{ duration: 0.2 }}
	>
		Fade in and scale up
	</animated.div>
{/if}

Position Animation

<animated.div initial={{ x: 0 }} animate={{ x: 100 }} transition={{ duration: 0.5 }}>
	Moving element
</animated.div>

Stagger Animation

{#each Array.from({ length: 5 }) as _, i (i)}
	<animated.div
		initial={{ opacity: 0, y: 20 }}
		animate={{ opacity: 1, y: 0 }}
		transition={{
			duration: 0.3,
			delay: i * 0.1
		}}
	>
		Item {i + 1}
	</animated.div>
{/each}

Resize Animation

<animated.div
	initial={{ width: 50, height: 50 }}
	animate={{ width: 100, height: 100 }}
	transition={{ duration: 0.5 }}
>
	Resizing element
</animated.div>

Combined Animations

<animated.div
	initial={{ rotate: 90, opacity: 0, scale: 0 }}
	animate={{ rotate: 0, opacity: 1, scale: 1 }}
	transition={{ duration: 0.5, timingFunction: 'ease-out' }}
>
	Multiple properties animated together
</animated.div>

Advanced Usage

Using the useAnimation Hook

For custom components or more control, you can use the useAnimation hook directly:

<script>
	import { useAnimation } from 'animated-svelte';

	let elementRef = $state(null);

	const { enter, exit } = useAnimation({
		ref: () => elementRef,
		initial: () => ({ opacity: 0 }),
		animate: () => ({ opacity: 1 }),
		exit: () => ({ opacity: 0 }),
		transition: () => ({ duration: 0.3 })
	});
</script>

<div bind:this={elementRef} in:enter out:exit>Custom animated element</div>