Svelte-Animate: Guide #

A lightweight, accessible Svelte component wrapper for Animate.css that makes adding animations to your Svelte applications simple and intuitive. Built with accessibility in mind and designed to work seamlessly with Svelte's latest features, including the ability to animate multiple effects in a sequence.

Features #

  • 🎯 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, or both)
  • ♿ 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 delay
    • - Animation speed control
    • - Repeat functionality
  • 🎭 Optional hide-after-animation and hide-between-animations features

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
animationsAnimationType[] or AnimationTypebounceThe animation effect to apply
trigger'hover' | 'click' | 'both' | undefinedhoverWhat triggers the animation
durationstring1sAnimation duration
hideBetweenbooleanfalseWhether to hide the element after animation
hideEndbooleanfalseWhether to hide the element after animation
delaynumber0Animation delay
repeat'1' | '2' | '3' | 'infinite'1Animation repeat
pauseDurationnumber0Animation pause duration
classstringAdditional CSS classes

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 Hover Animation
<Animate>
<button>Hover to bounce!</button>
</Animate>

// Click Animation with Delay and Speed
<Animate animations="rubberBand" trigger="click" delay="2s" speed="slow">

  <div>Click for a slow, delayed effect!</div>
</Animate>

// Repeating Animation Sequence with Custom Duration
<Animate animations={['pulse', 'tada']} trigger="both" duration="0.5s" repeat="3">
<span>I'll pulse and tada three times!</span>
</Animate>

// Entrance and Exit Animations with Hide Options
<Animate animations={['fadeInUp', 'fadeOutDown']} trigger="click" hideBetween={true} hideEnd={true} duration="1.5s">

  <div>I'll fade in, then out!</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;
}