Svelte-Animate: Guide #

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.

Feature Details #

  • 🎯 Easy to use wrapper for Animate.css
  • 🎨 75+ animation effects out of the box
  • 🔄 Ability to chain multiple animations in a sequence
  • 🔄 Multiple trigger options (hover, click, auto, or both)
  • ⚡ Zero dependencies (except Animate.css)
  • ♿ Accessibility features including:
    • - Keyboard support (Enter/Space for click triggers)
    • - Screen reader announcements
    • - Respects prefers-reduced-motion
    • - ARIA attributes and live regions
  • ⚙️ Extensive animation customization:
    • - Customizable duration
    • - Animation delays
    • - Per-animation configuration
    • - Repeat functionality
  • 🎭 Optional hide-after-animation and hide-between-animations features
  • 🔄 Optional replay button for ended animations
  • 🐛 Debug mode for development

Installation #

pnpm i -D svelte-animate

Usage #

Basic usage #

<script lang="ts">
  import { Animate } from 'svelte-animate';
</script>

<Animate>
<div>This will bounce on hover!</div>
</Animate>

Custom usage #

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

Props #

PropTypeDefaultDescription
childrenSnippetRequiredThe content to be animated
animationsAnimationConfig[] | AnimationType[] | AnimationTypebounceThe animation effects to apply
trigger'hover' | 'click' | 'both' | 'auto'hoverWhat triggers the animation
durationnumber1000Default animation duration (ms)
hideBetweenbooleanfalseWhether to hide element between animations
hideEndbooleanfalseWhether to hide element after animation sequence
delaynumber0Default delay before animations start (ms)
repeat'1' | '2' | '3' | 'infinite'1Number of times to repeat the animation
pauseDurationnumber0Default pause between animations (ms)
classstring''Additional CSS classes for the container
debugbooleanfalseEnable debug mode with visible status updates
showReplayButtonbooleanfalseShow replay button after animation ends

Animation Configuration #

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
}

Accessibility Features #

  • - Full keyboard navigation support
  • - Enter and Space keys trigger animations for click/both triggers
  • - Proper focus management
  • - Event prevention to avoid unexpected behavior

Screen Reader Support #

  • - Descriptive ARIA labels for animated elements
  • - Animation completion announcements using aria-live regions
  • - Clear state changes communication

Motion Preferences #

  • - Automatically detects and respects prefers-reduced-motion settings
  • - Gracefully degrades to no animation when reduced motion is preferred
  • - Maintains content visibility and functionality

Examples #

Basic Example #

<Animate>
  <button>Hover to bounce!</button>
</Animate>

Click Animation with Delay #

<Animate 
  animations="rubberBand" 
  trigger="click" 
  delay={2000} 
  duration={1000}
>
  <div>Click for a delayed effect!</div>
</Animate>

Complex Animation Sequence #

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

Debug Mode Example #

<Animate 
  animations="bounce" 
  trigger="click" 
  debug={true}
>
  <div>Watch the debug info in the corner!</div>
</Animate>

Animation Types #

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;
}