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>
  

  

• 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>
  

  

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!