Animation

// Spinning loader
WDiv(className: 'animate-spin w-8 h-8 border-4 border-blue-500 rounded-full')

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

WDiv(className: 'animate-spin w-6 h-6 border-2 border-t-transparent border-blue-500 rounded-full')

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 inline-flex h-full w-full rounded-full bg-sky-400 opacity-75'),
  WDiv(className: 'relative inline-flex 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 col-span-2'),
      WDiv(className: 'h-2 bg-slate-200 rounded col-span-1'),
    ]),
  ]),
])

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 colors of the animated element when switching to dark mode.

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

Arbitrary Values#

If the built-in animations don't quite fit, you can use arbitrary values to specify custom animation strings.

WDiv(className: 'animate-[wiggle_1s_ease-in-out_infinite]')

Customizing Theme#

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

WindThemeData(
  animations: {
    'wiggle': WindAnimationType.bounce, // Map to existing logic or custom type
  },
)

Related Documentation#

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