Svelte-Animate

Doc/demo

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
• 🎨 95+ animation effects out of the box
• 🔄 Ability to chain multiple animations in a sequence
• 🔄 Multiple trigger options (hover, click, auto, or both)
• ♿ Comprehensive 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

npm install -D svelte-animate
# or
pnpm install -D svelte-animate
# or
yarn add -D svelte-animate

Usage

1. Import the component:

import {Animate} from 'svelte-animate';

2. Basic usage:

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

3. Advanced usage:

<Animate animations="fadeIn" trigger="click" duration={2000} delay={1000} repeat="2">
  <div>Click me for a customized animation experience!</div>
</Animate>

<Animate
  animations={[
    { action: 'fadeIn', duration: 1000, delay: 500 },
    { action: 'zoomOut', duration: 2000, pause: 1000 }
  ]}
  trigger="click"
  hideBetween={true}
  hideEnd={true}
  showReplayButton={true}
>
  <div>Click me for a customized animation sequence!</div>
</Animate>

Props

AnimationConfig Interface

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
}

Examples

Basic Hover Animation

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

Browser Support

Supports all modern browsers that support:

• Animate.css
• Svelte
• CSS animations
• Media queries (for reduced motion detection)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request. When contributing, please:

1. Ensure your code follows the existing style
2. Add/update tests as needed
3. Update documentation to reflect any changes
4. Follow the existing commit message format

License

MIT

Credits

This component is powered by Animate.css.