In this short list and collections blog post, we’ll be listing a collection of Vue animation libraries, components, plugins, and extensions which make it easy to add animations and effects to your projects and apps. As always, this list is updated regularly. Email over the URL, if you wish to be included.

Vue Animation Plugins, Libraries and Extensions

  • vue2-animate – A Vue.js 2.0 port of Animate.css. For use with Vue’s built-in transitions.
  • animated-vue – A Vue.js 2.x plugin to easily use Animate.css animations as transitions. As easy as <animated-tada>!
  • vue-lottie – A Vue.js 2.x plugin to render after effects animations based on bodymovin
  • Vueg – Make vue-router have a transition effect / 为 webApp 提供转场特效的开源 Vue 插件
  • v-animate-css – The easiest to implement Vue 2 directive for Animate.css
  • vue-mixin-tween – Mixin factory that adds tweened values to component context for animations
  • v-odometer – Smoothly transitions numbers with ease. Use this library to give your application a smooth animation, only applicable on numbers.
  • vue2-transitions ✨ Reusable Vue 2 transition components
  • vue-overdrive Super easy magic-move transitions for Vue apps 🎩
  • animated-number-vue Super easy way to animate numbers.
  • vue-typed-js Typed.js integration to easily create typing animations.
  • vue-parent-change-transition Enable a child components to animate when it changes the parent.
  • vue-smooth-reflow Transition an elements reflow in response to data changes.
  • VueTween Allows components to tween their properties.
  • vue-slide-up-down Like jQuery’s slideUp / slideDown, but for Vue!
  • vue-animejs Simple anime.js directives for Vue.
  • Eagle.js Eagle.js is a web-based slideshow framework for Vue.js.
  • vue-slide-up-down-component It is a simple interface but realizes very flexible and powerful slide animation, for Vue!
  • femtoTween A minimalistic (zero-dep, less than 1k) tweening library with first-class Vue support
  • vue-sequential-entrance Plugin for creating elegant sequential animation entrances with a list of elements of your page. Zero effort. Simple and lightweight
  • vue-animate-scroll Super lightweight way to add CSS animations to elements as they scroll into view.
  • vue-svg-transition Create 2-state, SVG-powered transitions
  • vue-page-transition Easy route / page transitions for Vue.js
  • Vuenime A flexible Vue wrapper for Animejs
  • vue-flipper – A component to flip children with a nice transition.
  • v-number Animated number transition library for Vue.js
  • vue-kinesis A set of components to create interactive animations
  • vue-digital-transform A vue component for better digital transform animation
  • vue-typical 🐡 Vue Animated typing in ~400 bytes of JavaScript.
  • vue3-lottie A component for importing and displaying Lottie animations in Vue 3
  • @morev/vue-transitions Transitions library for Vue 2 and 3 with no CSS needed
  • @formkit/auto-animate Add motion to your apps with a single line of code
  • vue-contextual-transition Easy-ish cross-browser transitioning between pages with shared elements and/or sequential order
  • blottie Lottie component for Vue 3

Tags: Vue, Vue2, Vue3, Vue.js, Vue Animation Effects, Vue Animations, Vue Animate, Vue Effects, Vue Plugins, Vue Libraries, Vue Extensions, Vue-lottie, Vueg, v-animate-css, vue-mixin-tween, v-odometer,vue2-transitions, vue-overdrive, animated-number-vue, vue-typed-js, vueTween, vue-slide-up-down, vue-animejs, eagle.js, femtotween, vue-sequential-entrance, vue-svg-transition, vue-page-transition, vue-flipper,v-number,vue-kinesis,vue-typical

License: MIT license