Vuejs Animation Resources

Vue Animate CSS v-animate-css The easiest to implement Vue directive for Animate.css If you like this project, please give it a star, and consider fol

vue-kinesis Easy to use Vue.js components for creating interactive animations Demo Kinesis Demo Vue3 - Installation npm install --save [email protected]

🤹 Vue Composables putting your components in motion

Vue 3 Lottie vue3-lottie was created to help developers add Lottie animations to their Vue 3 applications. In my search for a simple way to add Lottie

A like button with delightful star animation powered by Vue.js

🤹 @vueuse/motion Vue Composables putting your components in motion 🏎 Smooth animations based on Popmotion 🎮 Declarative API 🚀 Plug & play with 10+

vue-countTo a vue component that will count to a target number at a specified duration

Vue Stripe Menu Creating a navigation menu with animations like on Stripe Only for Vue 3 (changelog) Demo Website Vue 2 - Branch How to install Instal

vue-svg-transition Create 2-state, SVG-powered animated icons Codesandbox Demo inspired by Icon Transition Generator Quick start npm install --save vu

Example： 使用方法 安装插件 npm i vueg --save 引入插件 import vueg from 'vueg' Vue.use(vueg, new Router(), Options) // 传入实例化后的router, Options为可选的插件配置 插件指令 插件注册了名为

Super simple Vue preloader component Just check src/components/Preloader.vue. Si

vue-typed-js A Vue.js integration for Typed.js. Typed.js is a library that types. Enter in any string, and watch it type at the speed you've set, back

vue-typed-js A Vue.js integration for Typed.js. Typed.js is a library that types. Enter in any string, and watch it type at the speed you've set, back

Vue Konva Vue Konva is a JavaScript library for drawing complex canvas graphics using Vue. It provides declarative and reactive bindings to the Konva

Anime.js (/ˈæn.ə.meɪ/) is a lightweight JavaScript animation library with a simple, yet powerful API.

Vue Collapse Transition This custom VueJS transition component wraps the built-in transition. It collapses elements horizontally or vertically. Works

Lottie Animation View for Vue (React, Angular) Generated by create-vue-component Wapper of bodymovin.js bodymovin is Adobe After Effects plugin for ex

vue-marquee-text-component [CSS GPU Animation] Marquee Text for vuejs Demo Demo here Install Vue 3 (master) | Vue 2 (v1) npm install vue-marquee-text-

Tinymotion is a Vue.js animation library, that seamlessly works with Tailwind CSS.

Eagle.js - A slideshow framework for hackers Slideshow system built on top of the Vue.js Supports animations, themes, interactive widgets (for web dem

在使用vue3中,用于页面展示的缩放操作 vue3-sketch-ruler 简体中文 | English 💪 Vue 3 Composition API 🔥 Written in TypeScript Vue 3 + Vite + ts 打包sketchRuler 由于项目升级成vite， 发

Shared Vue component across routes with animations Live Demo English | 简体中文 Why? It's quite common you might have a same component used in different r

v-shared-element Declarative shared-element transitions between pages for Vue.js. Uses illusory under the hood. v3.1.0 released! Vue 3 is now supporte

vue2-transitions Demo Codesandbox ✨ Reusable component transitions Why ❓ Brings only the code that you need. Many alternative solutions import the who

vue2-transitions Demo Codesandbox ✨ Reusable component transitions Why ❓ Brings only the code that you need. Many alternative solutions import the who

vue-animate-scroll A small Vue component that provides an easy way to animate elements as they scroll into view. Setup npm i --save vue-animate-scroll

vue-flip-toolkit A Vue.js port of the wonderful react-flip-toolkit, developed by @aholachek (to whom all credit is due here) Quick Start yarn add vue-

vue-roller Fluid and smooth rolling animation for Vue.js Demo Try out here with your own text! Getting Started npm npm i vue-roller Vue import Roller

flipbook-vue flipbook-vue is a Vue component that displays images in 3D page flip effect. Demo page is here. Installation Install as a module: npm i -

一个小巧玲珑的 vue 组件切换动画库, 支持 20 几种动画切换方式

A visual element animation configuration editor based on timeline, compatible with vue2.x and vue3

vue2-animate for Vue.js 2 and 3 Cross-browser CSS3 animation library A Vue.js port of Animate.css. For use with Vue's built-in transitions. | DEMO Cre

animated-number-vue A simple vue animated number for Vue2, using anime. Live demo here Usage $ npm install animated-number-vue # OR $ yarn add animate

animated-number-vue A simple vue animated number for Vue2, using anime. Live demo here Usage $ npm install animated-number-vue # OR $ yarn add animate

Vue Animate CSS v-animate-css The easiest to implement Vue directive for Animate.css If you like this project, please give it a star, and consider fol

Play shuffle animation for given string 🎬

Page level transition plugin for vue-router

A collection on gsap, animejs and other animation library implemented in vue 3

English | 简体中文 Vue Typical Vue Animated typing in ~400 bytes 🐡 of JavaScript. Preview → Live Demo ✨ https://vue-typical.vercel.app 📦 Installation In

vue-slide-up-down Like jQuery's slideUp / slideDown, but for Vue! Demo: https://codepen.io/danieldiekmeier/pen/YapGWq Installation npm i vue-slide-up-

vue-slide-up-down Like jQuery's slideUp / slideDown, but for Vue! Demo: https://codepen.io/danieldiekmeier/pen/YapGWq Installation npm i vue-slide-up-

V-Number Animated number transition library for Vue.js Simple lightweight library for smooth vertical number transitions LIVE DEMO: animated likes cou

Vue AOS Implementing animation on scroll based on Vue 3 How to use Install it from NPM npm i @dcasia/vue-aos --save Import and register it in your Vue

GitHub Animated Corners Inspired by Tom Preston-Werner's and Tim Holman's works, I decided to create a few more variants of animated corners with octo

The component to animate your text letter by letter. You can bind different classes to each letter using css selectors.

Deprecation notice Due to an unfortunate naming decision, this package has moved to vue-smooth-reflow. vue-smooth-reflow has more features, better han

Vuenime A flexible Vue wrapper for Animejs npm install vuenime # or yarn add vuenime Storybook | CodeSandbox Usage In a component: template div

v-show-slide A Vue.js directive for animating an element from height: auto to height: 0px and vice-versa. 👻 3kb (1kb gzipped) 📦 No dependencies 🌚 T

vue-flat-surface-shader A Vue component for flat surface shader DEMO: Github Pages How to use npm install --save vue-flat-surface-shader Main.js impor

lottie-vuejs lottie-vuejs is currently in development! Use in production environment at your own risk lottie-vuejs is a simple VueJS wrapper for lotti

Vue Wavify A single Vue component to create and adjust an animated wave using svg & javascript. Installation Yarn yarn add vue-wavify npm npm install

vue-flipper A component to flip elements with a nice transition. ⚡ It is really small, JavaScript + CSS (min + gzip) is smaller than 1KB 🎨 CSS uses S

Odometer About Vue-Odometer Smoothly transitions numbers with ease. Use this library to give you application a smooth animation, only applicable on nu

Odometer About Vue-Odometer Smoothly transitions numbers with ease. Use this library to give you application a smooth animation, only applicable on nu