Svelte Animate is a lightweight Svelte component that brings Animate.css into your app with extra power and accessibility. It goes beyond standard Svelte transitions with sequential effects, flexible triggers, motion preferences, and fine-grained timing control—all while staying simple to use.
pnpm i -D svelte-animate
<script lang="ts">
import { Animate } from 'svelte-animate';
import { P } from 'flowbite-svelte';
</script>
<Animate>
<P>This will bounce on hover!</P>
</Animate>
<script lang="ts">
import { Animate } from 'svelte-animate';
import { P } from 'flowbite-svelte';
</script>
<Animate
animations={['fadeInLeft', 'fadeOutRight']}
trigger="click"
duration={1000}
delay={1000}
repeat="2"
>
<P class="border border-gray-200 p-2"
>Click me! I will fade in from left and fade out right and repeat twice</P
>
</Animate>
<Animate animations={['zoomInDown', 'zoomOut']} duration={2000} repeat="1" hideEnd={true}>
<P class="border border-gray-200 p-2">Hover me! I will zoom in down and zoom out.</P>
</Animate>
| Prop | Type | Default | Description |
|---|---|---|---|
| children | Snippet | Required | The content to be animated |
| animations | AnimationConfig[] | AnimationType[] | AnimationType | bounce | The animation effects to apply |
| trigger | 'hover' | 'click' | 'both' | 'auto' | hover | What triggers the animation |
| duration | number | 1000 | Default animation duration (ms) |
| hideBetween | boolean | false | Whether to hide element between animations |
| hideEnd | boolean | false | Whether to hide element after animation sequence |
| delay | number | 0 | Default delay before animations start (ms) |
| repeat | '1' | '2' | '3' | 'infinite' | 1 | Number of times to repeat the animation |
| pauseDuration | number | 0 | Default pause between animations (ms) |
| class | string | '' | Additional CSS classes for the container |
| debug | boolean | false | Enable debug mode with visible status updates |
| showReplayButton | boolean | false | Show replay button after animation ends |
When using the animations prop with detailed configuration:
interface AnimationConfig {
action: AnimationType; // The animation effect to apply
duration?: number; // Duration for this specific animation
delay?: number; // Delay before this animation starts
pause?: number; // Pause after this animation
}<Animate>
<button>Hover to bounce!</button>
</Animate><Animate
animations="rubberBand"
trigger="click"
delay={2000}
duration={1000}
>
<div>Click for a delayed effect!</div>
</Animate><Animate
animations={[
{ action: 'fadeIn', duration: 1000 },
{ action: 'pulse', duration: 500, pause: 1000 },
{ action: 'fadeOut', duration: 1000 }
]}
trigger="both"
repeat="3"
showReplayButton={true}
>
<span>Complex animation sequence!</span>
</Animate><Animate
animations="bounce"
trigger="click"
debug={true}
>
<div>Watch the debug info in the corner!</div>
</Animate>import type { HTMLButtonAttributes } from 'svelte/elements';
import type { Snippet } from 'svelte';
export type AnimationType =
| 'bounce'
| 'flash'
| 'pulse'
| 'rubberBand'
| 'shakeX'
| 'shakeY'
| 'headShake'
| 'swing'
| 'tada'
| 'wobble'
| 'jello'
| 'heartBeat'
| 'backInDown'
| 'backInLeft'
| 'backInRight'
| 'backInUp'
| 'backOutDown'
| 'backOutLeft'
| 'backOutRight'
| 'backOutUp'
| 'bounceIn'
| 'bounceInDown'
| 'bounceInLeft'
| 'bounceInRight'
| 'bounceInUp'
| 'bounceOut'
| 'bounceOutDown'
| 'bounceOutLeft'
| 'bounceOutRight'
| 'bounceOutUp'
| 'fadeIn'
| 'fadeInDown'
| 'fadeInDownBig'
| 'fadeInLeft'
| 'fadeInLeftBig'
| 'fadeInRight'
| 'fadeInRightBig'
| 'fadeInUp'
| 'fadeInUpBig'
| 'fadeInTopLeft'
| 'fadeInTopRight'
| 'fadeInBottomLeft'
| 'fadeInBottomRight'
| 'fadeOut'
| 'fadeOutDown'
| 'fadeOutDownBig'
| 'fadeOutLeft'
| 'fadeOutLeftBig'
| 'fadeOutRight'
| 'fadeOutRightBig'
| 'fadeOutUp'
| 'fadeOutUpBig'
| 'fadeOutTopLeft'
| 'fadeOutTopRight'
| 'fadeOutBottomRight'
| 'fadeOutBottomLeft'
| 'flip'
| 'flipInX'
| 'flipInY'
| 'flipOutX'
| 'flipOutY'
| 'lightSpeedInRight'
| 'lightSpeedInLeft'
| 'lightSpeedOutRight'
| 'lightSpeedOutLeft'
| 'rotateIn'
| 'rotateInDownLeft'
| 'rotateInDownRight'
| 'rotateInUpLeft'
| 'rotateInUpRight'
| 'rotateOut'
| 'rotateOutDownLeft'
| 'rotateOutDownRight'
| 'rotateOutUpLeft'
| 'rotateOutUpRight'
| 'hinge'
| 'jackInTheBox'
| 'rollIn'
| 'rollOut'
| 'zoomIn'
| 'zoomInDown'
| 'zoomInLeft'
| 'zoomInRight'
| 'zoomInUp'
| 'zoomOut'
| 'zoomOutDown'
| 'zoomOutLeft'
| 'zoomOutRight'
| 'zoomOutUp'
| 'slideInDown'
| 'slideInLeft'
| 'slideInRight'
| 'slideInUp'
| 'slideOutDown'
| 'slideOutLeft'
| 'slideOutRight'
| 'slideOutUp';
export type AutoTriggerType = 'hover' | 'click' | 'both' | 'auto' | undefined;
export type RepeatType = '1' | '2' | '3' | 'infinite';
export interface EnhancedAnimationProps extends HTMLButtonAttributes {
animations?: AnimationType[] | AnimationType;
trigger?: AutoTriggerType;
duration?: string;
children: Snippet;
hideBetween?: boolean;
hideEnd?: boolean;
delay?: number;
repeat?: RepeatType;
pauseDuration?: number;
class?: string;
}
export interface AnimationConfig {
action: AnimationType;
duration?: number;
delay?: number;
pause?: number;
}
export interface AnimationProps extends HTMLButtonAttributes {
animations?: AnimationConfig[] | AnimationType[] | AnimationType;
trigger?: AutoTriggerType;
duration?: number;
children: Snippet;
hideEnd?: boolean;
delay?: number; // default delay for all animations
repeat?: RepeatType;
pauseDuration?: number; // default pause for all animations
class?: string;
debug?: boolean;
showReplayButton?: boolean;
hideFor?: number;
}
export interface AnimatorProps extends HTMLButtonAttributes {
animations?: AnimationConfig[] | AnimationType[] | AnimationType;
duration?: number;
children: Snippet;
hideEnd?: boolean;
delay?: number; // default delay for all animations
pauseDuration?: number; // default pause for all animations
class?: string;
debug?: boolean;
hideFor?: number;
action?: boolean;
}