DEV Community

Cover image for Intro to Animate4vue: Your New Vue.js Animation Companion
ArtisticMK
ArtisticMK

Posted on

Intro to Animate4vue: Your New Vue.js Animation Companion

Hello everyone!

I’m excited to introduce you to Animate4vue, a new library that will make adding animations to your Vue.js projects easy and fun!

What is Animate4vue?

Animate4vue is a library designed to bring your Vue.js applications to life with beautiful animations. It offers over 100 high-performance UI animations made with GSAP, which means they are smooth and efficient. With GPU acceleration, your animations will look great on any device, from high-end to low-end.

Why Use Animate4vue?

  • Ready-to-Use Animations: You get more than 100 pre-made animations, so you don’t have to create them from scratch.
  • High Performance: Thanks to GSAP and GPU acceleration, your animations will run smoothly and look fantastic.
  • Easy Integration: Simply install it, and you’re ready to go!
  • TypeScript Support: If you use TypeScript, you’ll find it fully typed, which makes coding easier and safer.
  • Tree-Shaking: Only the animations you use will be included in your bundle, keeping things light.

How to Get Started

  1. Install Animate4vue:
    Open your terminal and run:

    npm install animate4vue
    

    or

    yarn add animate4vue
    
  2. Basic Usage:

There are two primary ways to integrate animations into your Vue components:

  • Using Vue's Transition Components:

     <template>
       <Transition @enter="puffIn" @leave="puffOut">
         <div v-if="show">Content Here</div>
       </Transition>
     </template>
    
     <script setup>
     import { puffIn, puffOut } from 'animate4vue';
     </script>
    

    Animate4vue demo

  • Using Function Calls:

      <script setup>
      import { zoomIn, zoomOut } from 'animate4vue';
    
      const animateIn = (el, done) => {
        zoomIn(el, done)
      }
    
      const animateOut = (el, done) => {
        zoomOut(el, done)
      }
    
      // The 'done' argument is used to signal Vue about the animation state and trigger appropriate actions.
      </script>
    
      <template>
        <Transition @enter="animateIn" @leave="animateOut">
          <div v-if="show">....</div>
        </Transition>
      </template>
    

    Animate4vue demo

Explore the Power of Animation in your Projects:

For a complete list of available animations, in-depth documentation, and usage examples, head over to the Animate4vue GitHub repository.

Let Animate4vue breathe life into your Vue.js projects and create a captivating user experience!

Top comments (0)