Motion Animations

useAnimations Composable

Reusable animation presets powered by VueUse Motion. All animations are SSR-compatible and respect user motion preferences.

Interactive Demo

Click the button to replay all animations

Usage Examples

1. Import the Composable

const { fadeUp, fadeIn, scaleIn, slideInLeft, slideInRight, slideUp, popIn } = useAnimations()

2. Apply to Elements

<div v-motion="fadeUp">
  Hero content
</div>

<div v-motion="scaleIn">
  Call to action button
</div>

<div v-motion="slideInLeft">
  Image or media
</div>

3. Stagger Grid Items

<div class="grid grid-cols-3 gap-4">
  <div
    v-for="(item, index) in items"
    :key="item.id"
    v-motion="{
      initial: { opacity: 0, y: 40 },
      visibleOnce: {
        opacity: 1,
        y: 0,
        transition: {
          duration: 800,
          delay: index * 80
        }
      }
    }">
    {{ item.title }}
  </div>
</div>

Animation Reference

Animation	Use Case	Duration	Properties
fadeUp	Hero sections, main content	800ms	opacity, y
fadeIn	Content sections, paragraphs	700ms	opacity
scaleIn	CTAs, cards, highlights	600ms	opacity, scale
slideInLeft	Images, media (left side)	700ms	opacity, x
slideInRight	Images, media (right side)	700ms	opacity, x
slideUp	Alternative hero animation	900ms	opacity, y
popIn	Interactive elements	500ms	opacity, scale, y
staggerChildren	Grid items, lists	varies	inline config with delay: index * 80

Best Practices

Use fadeUp for hero sections

Creates a professional entrance for main content

Apply scaleIn to CTAs and important elements

Draws attention with subtle bounce effect

Use staggerChildren for grid layouts

Creates elegant cascading entrance for multiple items

Respect user motion preferences

All animations automatically respect prefers-reduced-motion

SSR-safe by default

No client-side only imports needed, works seamlessly with SSR

Avoid animating too many elements

Keep animations purposeful to maintain performance

Technical Details

Performance

All animations use hardware-accelerated CSS transforms (translateX, translateY, scale) for smooth 60fps animations on all devices.

Easing Functions

Custom cubic-bezier curves for smooth, professional motion
Bouncy easing for attention-grabbing elements (scaleIn, popIn)
Smooth ease-out for natural feeling transitions

Accessibility

Automatically respects user's prefers-reduced-motion setting, disabling animations for users who prefer minimal motion.

SSR Compatibility

The motion plugin provides a no-op directive during SSR, preventing hydration mismatches while maintaining full functionality on the client.