A motion-like CSS animation library for Svelte.
npm install animated-svelteA 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
`sh`
pnpm add animated-svelte
> [!WARNING]
> The rest of this documentation was written by AI and my not be completely accurate.
`svelte
animate={{ opacity: 1, scale: 1 }}
transition={{ duration: 300 }}
>
Hello, animated-svelte!
`
Animated versions of standard HTML elements with motion capabilities.
#### Props
| Prop | Type | Description |
| ------------ | ----------------------------------- | ----------------------------------------- |
| initial | Partial | 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
- - numberrotate
- - 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${number}s
type TransitionConfig = {
duration: number | | ${number}ms; // Default: 0${number}s
timingFunction: 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out'; // Default: 'ease-out'
delay: number | | ${number}ms; // Default: 0`
};
`svelte`
Rotating element
`svelte
{#if isVisible}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0 }}
transition={{ duration: 0.2 }}
>
Fade in and scale up
{/if}
`
`svelte`
Moving element
`svelte`
{#each Array.from({ length: 5 }) as _, i (i)}
animate={{ opacity: 1, y: 0 }}
transition={{
duration: 0.3,
delay: i * 0.1
}}
>
Item {i + 1}
{/each}
`svelte`
animate={{ width: 100, height: 100 }}
transition={{ duration: 0.5 }}
>
Resizing element
`svelte`
animate={{ rotate: 0, opacity: 1, scale: 1 }}
transition={{ duration: 0.5, timingFunction: 'ease-out' }}
>
Multiple properties animated together
For custom components or more control, you can use the useAnimation hook directly:
`svelte