Svelte Animate is a lightweight, accessible Svelte component that wraps Animate.css, simplifying animation integration in Svelte applications. It offers advanced features like: Sequential animation effects, Configurable trigger modes (hover, click, auto), Accessibility-first design, Reduced motion support, Flexible repeat and timing controls. Designed for Svelte's latest features, it provides more sophisticated animation capabilities than standard Svelte transitions.
pnpm i -D svelte-animate
<script lang="ts">
import { Animate } from 'svelte-animate';
</script>
<Animate>
<div>This will bounce on hover!</div>
</Animate>
<Animate animation="fadeIn" trigger="click" duration="2s" delay="1s" speed="slow" repeat={2}>
<div>Click me for a customized animation experience!</div>
</Animate>
<Animate animations={['fadeIn', 'zoomOut']} trigger="click" duration="2s" delay="1s" speed="slow" repeat="2" hideBetween={true} hideEnd={true}>
<div>Click me for a customized animation sequence!</div>
</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;
}