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.

``bash
pnpm add animated-svelte
`

Quick Start

`sh
pnpm add animated-svelte
`

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

`svelte


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

`

Components

$3

Animated versions of standard HTML elements with motion capabilities.

#### Props

| Prop | Type | Description |
| ------------ | ----------------------------------- | ----------------------------------------- |
| initial | Partial \| false | Initial animation state (before entering) |
| animate | Partial | Target animation state |
| exit | Partial | Exit animation state (when leaving) |
| transition | Partial | 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

`typescript
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

$3

`svelte

Rotating element

`

$3

`svelte


(isVisible = !isVisible)}> Toggle

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

{/if}
`

$3

`svelte

Moving element

`

$3

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

{/each}
`

$3

`svelte
initial={{ width: 50, height: 50 }}
animate={{ width: 100, height: 100 }}
transition={{ duration: 0.5 }}
>
Resizing element

`

$3

`svelte
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

`

Advanced Usage

$3

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

`svelte



``