🎬 Anime.js Integration

Powerful animation library integration using lifecycle hooks

Example 1: Fade & Slide Animation

Use Case: Smooth enter/exit animations for conditional elements.

Library: Anime.js

✨ Animated Box 
// Using Anime.js for smooth animations
methods: {
  animateBoxIn(el) {
    anime({
      targets: el,
      opacity: [0, 1],
      translateY: [-50, 0],
      scale: [0.8, 1],
      duration: 600,
      easing: 'easeOutElastic(1, .6)'
    });
  },
  animateBoxOut(el) {
    anime({
      targets: el,
      opacity: 0,
      translateY: 50,
      scale: 0.8,
      duration: 400,
      easing: 'easeInQuad'
    });
  }
}

Example 2: Staggered Grid Animation

Use Case: Animate multiple elements with stagger effect for v-for lists.

// Staggered animation for grid items
methods: {
  animateParticleIn(el) {
    // Get index from parent
    const siblings = Array.from(el.parentElement.children);
    const index = siblings.indexOf(el);

    anime({
      targets: el,
      scale: [0, 1],
      opacity: [0, 1],
      duration: 600,
      delay: index * 50, // Stagger effect
      easing: 'easeOutBack'
    });
  }
}

Example 3: Morphing Shape Animation

Use Case: Complex property animations on mount/update.

// Morphing animations on update
methods: {
  animateShapeIn(el) {
    anime({
      targets: el,
      rotate: [0, 360],
      scale: [0, 1],
      borderRadius: ['0%', '20px'],
      duration: 1000,
      easing: 'easeOutElastic(1, .5)'
    });
  },
  animateShapeMorph(el) {
    const shapes = ['20px', '50%', '10px 50px'];
    const randomShape = shapes[Math.floor(Math.random() * shapes.length)];

    anime({
      targets: el,
      borderRadius: randomShape,
      rotate: '+=180',
      duration: 800,
      easing: 'easeInOutQuad'
    });
  }
}

📦 Installation

Include Anime.js via CDN or npm:

<!-- Via CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

// Via npm
npm install animejs
← Back to Examples