Vue.js Animate.css

Introduction

Adding animations to your Vue.js applications can significantly enhance the user experience by providing visual feedback, guiding attention, and creating a more dynamic interface. While Vue offers its own transition system, sometimes you might want to leverage existing CSS animation libraries to save time and effort.

Animate.css is one of the most popular CSS animation libraries that provides a collection of ready-to-use animations. It's lightweight, easy to integrate, and works wonderfully with Vue.js applications. In this tutorial, we'll learn how to combine Vue.js with Animate.css to create beautiful animations with minimal effort.

Prerequisites

Before we start, make sure you have:

Basic knowledge of Vue.js
A Vue.js project set up (Vue 2 or Vue 3)
Familiarity with CSS classes

Setting Up Animate.css in Your Vue Project

Step 1: Install Animate.css

You can add Animate.css to your project using npm:

bash
npm install animate.css

Step 2: Import Animate.css in your project

In your main.js file or in a component where you want to use the animations:

javascript
import 'animate.css';

Alternatively, you can include it in your App.vue file:

html
<style>
@import 'animate.css';
</style>

Basic Usage with Vue

Using Animate.css Classes Directly

The simplest way to use Animate.css is by applying its classes directly to your elements:

html
<template>
  <div>
    <h1 class="animate__animated animate__bounce">Bouncing Title</h1>
    <p class="animate__animated animate__fadeIn">This text will fade in</p>
  </div>
</template>

<script>
export default {
  name: 'AnimationDemo'
}
</script>

Note that all Animate.css animations require the animate__animated base class, followed by the specific animation class prefixed with animate__.

Toggling Animations with Vue

You can use Vue's reactivity to toggle animations:

html
<template>
  <div>
    <button @click="showAnimation = !showAnimation">Toggle Animation</button>
    <h1 :class="{'animate__animated': true, 'animate__bounce': showAnimation}">
      Click the button to see me bounce!
    </h1>
  </div>
</template>

<script>
export default {
  name: 'ToggleAnimation',
  data() {
    return {
      showAnimation: false
    }
  }
}
</script>

Integrating with Vue's Transition Component

Vue's <transition> component works perfectly with Animate.css. Let's see how to use it:

Basic Transition Example

html
<template>
  <div>
    <button @click="show = !show">Toggle Element</button>
    
    <transition
      enter-active-class="animate__animated animate__fadeIn"
      leave-active-class="animate__animated animate__fadeOut"
    >
      <p v-if="show">Hello World!</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true
    }
  }
}
</script>

In this example, when the element appears, it will fade in. When it disappears, it will fade out.

Customizing Animation Duration

Animate.css animations have a default duration of 1 second. You can customize this using CSS:

html
<template>
  <div>
    <h1 class="animate__animated animate__bounce animate__slow">
      Slow Bounce Animation (2 seconds)
    </h1>
    <h1 class="animate__animated animate__bounce animate__fast">
      Fast Bounce Animation (0.8 seconds)
    </h1>
    <h1 class="animate__animated animate__bounce custom-duration">
      Custom Duration Animation
    </h1>
  </div>
</template>

<style>
.custom-duration {
  --animate-duration: 3s;
}
</style>

Animate.css provides utility classes like animate__slow (2 seconds) and animate__fast (0.8 seconds). For custom durations, use the --animate-duration CSS variable.

Animation Delays

You can also add delays to your animations:

html
<template>
  <div>
    <h1 class="animate__animated animate__bounce animate__delay-2s">
      Bounce after 2 seconds
    </h1>
    <h1 class="animate__animated animate__bounce custom-delay">
      Bounce with custom delay
    </h1>
  </div>
</template>

<style>
.custom-delay {
  --animate-delay: 3.5s;
}
</style>

Repeating Animations

To repeat animations:

html
<template>
  <div>
    <h1 class="animate__animated animate__bounce animate__repeat-2">
      Bounce twice
    </h1>
    <h1 class="animate__animated animate__bounce animate__infinite">
      Bounce infinitely
    </h1>
  </div>
</template>

Real-World Examples

1. Notification System

Here's how you can create a simple notification system using Animate.css:

html
<template>
  <div class="notifications-container">
    <transition-group
      enter-active-class="animate__animated animate__slideInRight"
      leave-active-class="animate__animated animate__slideOutRight"
    >
      <div 
        v-for="(notification, index) in notifications" 
        :key="index"
        class="notification"
      >
        {{ notification.message }}
        <button @click="removeNotification(index)">✕</button>
      </div>
    </transition-group>
    
    <button @click="addNotification">Add Notification</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      notifications: []
    }
  },
  methods: {
    addNotification() {
      this.notifications.push({
        message: `Notification ${this.notifications.length + 1}`
      });
      
      // Auto-remove after 3 seconds
      setTimeout(() => {
        this.notifications.shift();
      }, 3000);
    },
    removeNotification(index) {
      this.notifications.splice(index, 1);
    }
  }
}
</script>

<style>
.notifications-container {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 300px;
}

.notification {
  background-color: #f8f9fa;
  border-left: 4px solid #28a745;
  padding: 10px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
</style>

Create an eye-catching modal with Animate.css:

html
<template>
  <div>
    <button @click="showModal = true">Open Modal</button>
    
    <div v-if="showModal" class="modal-backdrop" @click="showModal = false">
      <transition
        enter-active-class="animate__animated animate__zoomIn"
        leave-active-class="animate__animated animate__zoomOut"
      >
        <div v-if="showModal" class="modal-content" @click.stop>
          <h2 class="animate__animated animate__fadeInDown">Welcome!</h2>
          <p class="animate__animated animate__fadeIn animate__delay-1s">
            This is a modal with cool animations.
          </p>
          <button 
            @click="showModal = false"
            class="animate__animated animate__bounceIn animate__delay-2s"
          >
            Close
          </button>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false
    }
  }
}
</script>

<style>
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  width: 400px;
  max-width: 90%;
  text-align: center;
}
</style>

3. Page Transitions with Vue Router

You can use Animate.css with Vue Router for page transitions:

html
<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
      <router-link to="/contact">Contact</router-link>
    </nav>
    
    <transition 
      enter-active-class="animate__animated animate__fadeIn" 
      leave-active-class="animate__animated animate__fadeOut"
      mode="out-in"
    >
      <router-view/>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
nav {
  margin-bottom: 20px;
}
nav a {
  margin-right: 10px;
}
</style>

Creating a Custom Animation Component

To reuse animations throughout your application, you can create a dedicated animation component:

html
<template>
  <transition
    :enter-active-class="enterClass"
    :leave-active-class="leaveClass"
    :duration="duration"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <slot></slot>
  </transition>
</template>

<script>
export default {
  name: 'AnimateCSS',
  props: {
    enter: {
      type: String,
      default: 'fadeIn'
    },
    leave: {
      type: String,
      default: 'fadeOut'
    },
    duration: {
      type: [Number, Object],
      default: null
    }
  },
  computed: {
    enterClass() {
      return `animate__animated animate__${this.enter}`;
    },
    leaveClass() {
      return `animate__animated animate__${this.leave}`;
    }
  }
}
</script>

Then use it in your components:

html
<template>
  <div>
    <button @click="show = !show">Toggle</button>
    
    <AnimateCSS enter="bounceIn" leave="bounceOut">
      <p v-if="show">This content will bounce in and out!</p>
    </AnimateCSS>
  </div>
</template>

<script>
import AnimateCSS from './AnimateCSS.vue';

export default {
  components: {
    AnimateCSS
  },
  data() {
    return {
      show: true
    }
  }
}
</script>

Performance Considerations

While animations can enhance user experience, they can also impact performance if overused. Here are some tips:

Limit animations on mobile devices - Consider using simpler animations or fewer animations on mobile to avoid potential performance issues
Use the will-change CSS property for complex animations to hint the browser about upcoming changes
Avoid animating expensive CSS properties like box-shadow or filter when possible
Test on lower-end devices to ensure animations remain smooth

Summary

Animate.css offers a fantastic way to add beautiful animations to your Vue.js applications with minimal effort. In this tutorial, we've covered:

Setting up Animate.css in a Vue project
Basic usage with Vue components
Integrating with Vue's transition system
Customizing animation duration, delay, and repetition
Real-world examples for notifications, modals, and page transitions
Creating a reusable animation component
Performance considerations

By combining Vue's reactivity and component system with Animate.css's pre-built animations, you can create engaging user interfaces that provide visual feedback and enhance the overall user experience.

Additional Resources

Exercises

Create a carousel component that uses different Animate.css animations for transitioning between slides.
Build a form that validates input and displays error messages with shake animations.
Design a page with elements that animate when they scroll into view.
Create a loading indicator using Animate.css's infinite animations.
Build a game that uses animations for interactions like winning, losing, or making a move.

Happy animating with Vue.js and Animate.css!

If you spot any mistakes on this website, please let me know at [email protected]. I’d greatly appreciate your feedback! :)

Introduction​

Prerequisites​

Setting Up Animate.css in Your Vue Project​

Step 1: Install Animate.css​

Step 2: Import Animate.css in your project​

Basic Usage with Vue​

Using Animate.css Classes Directly​

Toggling Animations with Vue​

Integrating with Vue's Transition Component​

Basic Transition Example​

Customizing Animation Duration​

Animation Delays​

Repeating Animations​

Real-World Examples​

1. Notification System​

2. Animated Modal​

3. Page Transitions with Vue Router​

Creating a Custom Animation Component​

Performance Considerations​

Summary​

Additional Resources​

Exercises​