Anime.js Integration — ichigo.js Examples

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($ctx) {
    anime({
      targets: $ctx.element,
      opacity: [0, 1],
      translateY: [-50, 0],
      scale: [0.8, 1],
      duration: 600,
      easing: 'easeOutElastic(1, .6)'
    });
  },
  animateBoxOut($ctx) {
    anime({
      targets: $ctx.element,
      opacity: 0,
      translateY: 50,
      scale: 0.8,
      duration: 400,
      easing: 'easeInQuad'
    });
  }
}

Example 2 · Staggered Grid Animation

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

// Staggered animation for grid items
methods: {
  animateParticleIn($ctx) {
    const el = $ctx.element;
    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($ctx) {
    anime({
      targets: $ctx.element,
      rotate: [0, 360],
      scale: [0, 1],
      borderRadius: ['0%', '20px'],
      duration: 1000,
      easing: 'easeOutElastic(1, .5)'
    });
  },
  animateShapeMorph($ctx) {
    const shapes = ['20px', '50%', '10px 50px'];
    const randomShape = shapes[Math.floor(Math.random() * shapes.length)];

    anime({
      targets: $ctx.element,
      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