Animation

// Spinning loader
WIcon(Icons.refresh, className: 'animate-spin text-blue-500')

// Pulsing skeleton
WDiv(className: 'animate-pulse w-full h-4 bg-gray-200 rounded')

Basic Usage#

Use the animate-{type} classes to add pre-defined animations to any widget. These are great for loading indicators, notification badges, or grabbing a user's attention.

WIcon(
  Icons.refresh,
  className: 'animate-spin text-blue-600',
)

Quick Reference#

Variants#

Spin#

Use animate-spin for things like loading indicators. It provides a smooth, linear rotation. Let's look at a basic spinner:

WIcon(Icons.refresh, className: 'animate-spin text-blue-500')

Ping#

The animate-ping utility makes an element scale and fade out, resembling a radar ping or notification alert. This is perfect for status indicators.

WDiv(className: 'relative flex h-3 w-3', children: [
  WDiv(className: 'animate-ping absolute h-full w-full rounded-full bg-sky-400 opacity-75'),
  WDiv(className: 'relative rounded-full h-3 w-3 bg-sky-500'),
])

Pulse#

Use animate-pulse to create a skeleton loading effect. It gently fades the opacity of the element, making it ideal for content that is still loading.

WDiv(className: 'animate-pulse flex space-x-4', children: [
  WDiv(className: 'rounded-full bg-slate-200 h-10 w-10'),
  WDiv(className: 'flex-1 space-y-6 py-1', children: [
    WDiv(className: 'h-2 bg-slate-200 rounded'),
    WDiv(className: 'grid grid-cols-3 gap-4', children: [
      WDiv(className: 'h-2 bg-slate-200 rounded'),
      WDiv(className: 'h-2 bg-slate-200 rounded'),
    ]),
  ]),
])

Bounce#

The animate-bounce utility is perfect for scroll indicators or call-to-action buttons that need a bit of personality.

WIcon(Icons.keyboard_arrow_down, className: 'animate-bounce text-slate-400')

Responsive Design#

You can enable or disable animations at specific breakpoints. For example, you might want to only animate an element on larger screens to keep the mobile experience "quiet".

WDiv(className: 'animate-none md:animate-spin')

Dark Mode#

Animations work seamlessly with dark mode. You'll typically just change the colours of the animated element when switching to dark mode.

WDiv(className: 'animate-pulse bg-gray-200 dark:bg-gray-700')

Arbitrary Values#

Animations have no arbitrary form: animate-[...] is not parsed. Use one of the built-in types, or register your own name in the theme (see below).

Customizing Theme#

Want to add your own animations to the system? You can extend the animations map in your WindThemeData.

WindThemeData(
  animations: {
    'animate-wiggle': WindAnimationType.bounce, // keys include the animate- prefix; only the five built-in types exist
  },
)

Related Documentation#

• Transitions - Smooth property changes
• Hover States - Interactive triggers