Skip to main content

Animation Utilities

NuvoUI provides a powerful animation system with pre-built animations and customizable mixins. These utilities help you add dynamic motion to your interfaces without writing complex keyframes.

important

Animation utility classes (.animate-pulse, .animate-spin, etc.) are generated when you compile NuvoUI with the animations feature flag enabled. Make sure your compiled CSS includes these classes, or use the SCSS mixins directly in your stylesheets.

Configuration​

The animation system is controlled by feature flags and can be customized through SCSS variables:

Basic Usage​

Add animations to any element using utility classes:

Available Animations​

Pulse Animation​

Creates a pulsing opacity effect, perfect for loading states and attention-grabbing elements.

Spin Animation​

Rotates an element continuously, ideal for loading spinners.

Ping Animation​

Creates a pinging effect with scale and fade, useful for notifications.

Fade Animations​

Multiple fade variants for smooth entrance and exit animations.

Animation Behavior

Fade and shake animations run once when the element is first rendered. They won't repeat when scrolling. To see them again:

  • Refresh the page
  • Trigger them with JavaScript by adding/removing the class
  • Use the infinite iteration in the mixin for continuous animation

Shake Animation​

Creates a shaking effect, useful for error states or attention.

Bounce Animation​

Creates a bouncing effect (via mixin only).

SCSS Mixins​

For more control, use the animation mixins directly in your SCSS:

Pulse Mixin​

Spin Mixin​

Ping Mixin​

Fade Mixin​

Shake Mixin​

Bounce Mixin​

Hover Ready Utility​

The .hover-ready class adds smooth transitions to elements for hover effects:

This applies:

  • transition-property: all
  • transition-duration: 0.2s
  • transition-timing-function: ease-in-out

Responsive Variants​

All animation utilities support responsive breakpoints:

Working with Animations​

Making Animations Repeat​

By default, fade and shake animations run once. To make them repeat or control their behavior:

Triggering Animations with JavaScript​

Advanced Features​

Dynamic Keyframe Generation​

NuvoUI's animation system intelligently generates keyframes only when needed, preventing duplication and keeping your CSS lean. Each unique animation configuration generates its own keyframe set.

Combining Animations​

You can combine animations with other utilities for complex effects:

Common Patterns​

Loading States​

Error Feedback​

Success Messages​

Performance Considerations​

  1. Use hover-ready for smooth transitions instead of complex hover animations
  2. Prefer CSS animations over JavaScript for better performance
  3. Use will-change sparingly - NuvoUI animations handle this automatically
  4. Disable animations for reduced motion preferences:

API Reference​

ClassMixinDescription
.animate-pulseanimate-pulse()Pulsing opacity animation
.animate-spinanimate-spin()Continuous rotation
.animate-pinganimate-ping()Scale and fade ping effect
.animate-fade-inanimate-fade(type: in)Fade in animation
.animate-fade-outanimate-fade(type: out)Fade out animation
.animate-fade-in-upanimate-fade(type: in-up)Fade in from bottom
.animate-fade-in-downanimate-fade(type: in-down)Fade in from top
.animate-shakeanimate-shake()Shaking animation
.hover-readyhover-ready()Smooth transition preparation
-animate-bounce()Bouncing animation (mixin only)

All animation classes support responsive variants with @breakpoint syntax.