Vue animation with timeline and grouping

Last update: Mar 1, 2022

vue-anime

Vue animation with timeline and grouping support using http://animejs.com/

Usage

npm install vue-anime

In vue file, first import

import {VueAnime} from 'vue-anime'
import {VueAnimeGroup} from 'vue-anime'
import {VueAnimeTimeLine} from 'vue-anime'
export default {
  name: 'app',
  components: {
    VueAnime,
    VueAnimeGroup,
    VueAnimeTimeLine
  },
}
</script>

and then use in template

">
<vue-anime ref="demo1" :animate="{
    translateX: 200
}" class="circle" :playing="false">vue-anime>

Vue-anime support all feature provided by animejs.

There are three element available for use:

  1. vue-anime: a single animation element
  2. vue-anime-group: a group of elements that share the same animation properties
  3. vue-anime-timeline: multiple elements that run animation by orders

Props

animate

Type: Object

The animation to transitions or css properties with numeric values

CSS: opacity, backgroundColor, fontSize ... Transforms: translateX, rotate, scale ...

**Initial css properties should be written as inline-css **

">
<vue-anime :style="{transform: translateX(-100)}" :animate="{translateX: 0}" class="circle">vue-anime>

duration

Type: Number or Function

delay

Type: Number or Function

easing

Type: Number or Array

Types Examples Infos
String 'easeOutExpo' Built in function names
Array [.91,-0.54,.29,1.56] Custom Bézier curve coordinates ([x1, y1, x2, y2])
easeIn easeOut easeInOut
easeInQuad easeOutQuad easeInOutQuad
easeInCubic easeOutCubic easeInOutCubic
easeInQuart easeOutQuart easeInOutQuart
easeInQuint easeOutQuint easeInOutQuint
easeInSine easeOutSine easeInOutSine
easeInExpo easeOutExpo easeInOutExpo
easeInCirc easeOutCirc easeInOutCirc
easeInBack easeOutBack easeInOutBack
easeInElastic easeOutElastic easeInOutElastic

elasticity

Elasticity of Elastic easings can be configured with the elasticity parameters

direction

Type: String One of 'normal', 'reverse', 'alternate'

loop

Type: Boolean Default: false

autoplay

Type: Boolean Default: false

seek

Type: Number Animations or timelines current time.

object object-props

Type: Object

set animation target to object and specify property to change by object-props

{{objectAnimeData.prop1}} / {{objectAnimeData.prop2}} ">
<vue-anime ref="demo4"
	:object="objectAnimeData"
     easing="linear"
     :playing="false"
     :object-props="{
      	prop1: 50,
  			prop2: '100%',
  			round: 1
  	}">
     {{objectAnimeData.prop1}} / {{objectAnimeData.prop2}}
vue-anime>

offset (timeline only)

Defines starting time relative to the previous animations duration.

` ">
 <vue-anime-time-line ref="demo11">`
   <vue-anime v-for="index in [1,2,3]" :key="index" class="square" offset="+=600" :animate="{translateX:250}">vue-anime>
vue-anime-time-line>

Example

Group

Adding vue-anime to one group and share the same animation

">
  <vue-anime-group ref="demo2" :playing="false" :animate="{
      translateX: 200
  }">
      <vue-anime class="circle">vue-anime>
      <vue-anime class="circle">vue-anime>
      <vue-anime class="square">vue-anime>
  vue-anime-group>

Css Animation

Animate any css properties (not only translate)

">
  <vue-anime ref="demo3" :animate="{
        opacity: .5,
        left: '240px',
        backgroundColor: '#FFF',
        borderRadius: ['0em', '2em'],
  }" easing="easeInOutQuad" class="square" :playing="false">vue-anime>

Object Animation

Set object and property

{{objectAnimeData.prop1}} / {{objectAnimeData.prop2}} ">
  <vue-anime ref="demo4" :object="objectAnimeData" easing="linear" :playing="false" :object-props="{
    prop1: 50,
        prop2: '100%',
        round: 1
    }">
      {{objectAnimeData.prop1}} / {{objectAnimeData.prop2}}
  vue-anime>

SVG Animation

Animate svg points

">
  <vue-anime ref="demo5" tag="polygon" easing="easeInOutExpo" :playing="false"
    points="64 69.32121174760113 8.574 99.95409624342311 62.81629226727815 67.27053849133411 64 3.9540962434231046 65.18370773272186 67.27053849133411 119.426 99.95409624342311 "
    fill="currentColor" :animate="{
      points: '64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96',
  }">
  vue-anime>

Specific property parameters

">
<vue-anime class="square" :animate="{
	translateX: {
		value: 250,
		duration: 800
	},
	rotate: {
		value: 360,
		duration: 1800,
		easing: 'easeInOutSine'
	},
	scale: {
		value: 2,
		duration: 1600,
		delay: 800,
		easing: 'easeInOutQuart'
	},
	delay: 250
}">
vue-anime>

DURATION FUNCTION

">
<vue-anime-group ref="demo7" :playing="false" direction="alternate" :loop="true" :animate="{
        translateX: 250,
      }" :duration="(el, i, l) => {
        return 1000 + (i * 1000)
      }">
      <vue-anime v-for="index in [1,2,3]" :key="index" class="square">vue-anime>
vue-anime-group>

key frames

">
<vue-anime ref="demo9" class="square" :playing="false" direction="alternate" :loop="true" :animate="{
        translateX: [
          { value: 250, duration: 1000, delay: 500, elasticity: 0 },
          { value: 0, duration: 1000, delay: 500, elasticity: 0 }
        ],
        translateY: [
          { value: -40, duration: 500, elasticity: 100 },
          { value: 40, duration: 500, delay: 1000, elasticity: 100 },
          { value: 0, duration: 500, delay: 1000, elasticity: 100 }
        ],
        scaleX: [
          { value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },
          { value: 1, duration: 900, elasticity: 300 },
          { value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },
          { value: 1, duration: 900, elasticity: 300 }
        ],
        scaleY: [
          { value: [1.75, 1], duration: 500 },
          { value: 2, duration: 50, delay: 1000, easing: 'easeOutExpo' },
          { value: 1, duration: 450 },
          { value: 1.75, duration: 50, delay: 1000, easing: 'easeOutExpo' },
          { value: 1, duration: 450 }
        ],
      }">
    vue-anime>

timeline basic

">
<vue-anime-time-line ref="demo10" :playing="false">
      <vue-anime v-for="index in [1,2,3]" :key="index" class="square" :animate="{translateX:250}">vue-anime>
    vue-anime-time-line>

TIMELINE with offsets

">
<vue-anime-time-line ref="demo11" @complete="demo11Complete">
        <vue-anime v-for="index in [1,2,3]" :key="index" class="square" offset="+=600" :animate="{translateX:250}">vue-anime>
      vue-anime-time-line>

Time-line property Inheritance

">
<vue-anime-time-line ref="demo12" :duration="500" easing="easeOutExpo" :loop="true" :delay="(el, i)=>i * 200" :timelines="[
        {
        translateX: 250,
      }, {
        opacity: .5,
        translateX: 250,
        scale: 2,
      }, {
        translateX: 0,
        scale: 1
      }
      ]">
        <vue-anime class="square">vue-anime>
        <vue-anime class="circle">vue-anime>
        <vue-anime class="triangle">vue-anime>
      vue-anime-time-line>

Animate process control

">
<vue-anime-group ref="demo13" :duration="500" :seek="seek" :delay="(el, i)=>i * 200" :playing="false" :animate="{
        translateX: 200
      }">
<vue-anime class="square">vue-anime>
<vue-anime class="circle">vue-anime>
<vue-anime class="triangle">vue-anime>
vue-anime-group>
<input class="progress" step=".001" type="range" min="0" max="100" @input="seekChange" value="0">

GitHub

https://github.com/liuhann/vue-anime
You might also like...

Vuejs Plugin for creating epic sequential animation entrances

Vuejs Plugin for creating epic sequential animation entrances

vue-sequential-entrance Vuejs Plugin for creating epic sequential animation entrances with a list of elements. Zero effort. Really lightweight Basic d

Jul 24, 2022

Vuejs Plugin for creating epic sequential animation entrances

Vuejs Plugin for creating epic sequential animation entrances

vue-sequential-entrance Vuejs Plugin for creating epic sequential animation entrances with a list of elements. Zero effort. Really lightweight Basic d

Jul 24, 2022

[CSS GPU Animation] Marquee Text for vuejs

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-

Aug 10, 2022

flipper animation simulator

 flipper animation simulator

Flipper Animation Simulator flipper animation simulator Demo · New Issue · New Feature English · 中文 Dependency @bell-rabbit/flipper-animation-generato

Jan 20, 2022

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

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

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

Aug 15, 2022

Play shuffle animation for given string 🎬

Play shuffle animation for given string 🎬

Sep 3, 2020

A Vue.js directive for animating an element from height: auto; to height: 0px; and vice-versa.

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

Mar 29, 2022

Custom Vue transition to collapse elements horizontally or vertically. Works with both fixed and 'auto' width or height.

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

Aug 3, 2022

Shared element transitions between routers for React, Vue, Angular and Web applications

Shared element transitions between routers for React, Vue, Angular and Web applications. Idea from Hero Animations of Flutter, and other mobile applications.

Aug 10, 2022
Comments
  • 1. Reason for update events?

    Hi liuhann,

    Thanks for your package, we use it for a website. I notice a lot of update events are being fired per animation, why are these necessary? We have quite some animations in our project and these events seem to impact performance. The code runs fine without them too.

    The events are emitted here: https://github.com/liuhann/vue-anime/blob/e24fb6a96cdf804a03dec3e63d03f9b17cd8bab8/src/anime-mixin.js#L42 https://github.com/liuhann/vue-anime/blob/e24fb6a96cdf804a03dec3e63d03f9b17cd8bab8/src/vue-anime-timeline.js#L65

    Thanks!

    Regards, Gerwin

    Reviewed by gerwinov at 2018-10-01 11:51
  • 2. Remove console.log

    Hi liuhann,

    Thanks for your package, we use it for a website. Could you please remove this console.log statement?

    https://github.com/liuhann/vue-anime/blob/e24fb6a96cdf804a03dec3e63d03f9b17cd8bab8/src/anime-mixin.js#L82

    Regards, Gerwin

    Reviewed by gerwinov at 2018-09-28 14:56
Typed.js integration for vue.js. Create a typing animation.

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

Aug 5, 2022
A vue component for better digital transform animation
A vue component for better digital transform animation

vue-digital-transform 中文文档 Make your changes of digtals more funny. vue-digital-transform Install npm install vue-digital-transform Example <template>

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

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

Jul 27, 2022
This is a lightweight Vue 3 component made with TypeScript to quickly create an animation that shows an automatic count of any quantity in any duration, counting up or down.
This is a lightweight Vue 3 component made with TypeScript to quickly create an animation that shows an automatic count of any quantity in any duration, counting up or down.

This is a lightweight Vue 3 component made with TypeScript to quickly create an animation that shows an automatic count of any quantity in any duration, counting up or down.

Aug 17, 2022
A Vue component to Marquee. Just used CSS3 animation.

vue-text-marquee Online Demo Install npm i vue-text-marquee Global Usage import Vue from 'vue'; import VTextMarquee from 'vue-text-marquee'; Vue.use(V

Jan 19, 2022
Typed.js integration for vue.js. Create a typing animation.

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

Jul 25, 2022
A like button with delightful star animation powered by Vue.js
A like button with delightful star animation powered by Vue.js

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

Aug 2, 2022
Animation - Exercício vue.js botões animados

animacoes-exercicios Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run b

Jan 4, 2022
vue-simple-animater is used to solve view changes in an area through animation interaction

VueSimpleAnimater vue-simple-animater is used to solve view changes in an area through animation interaction. Page 1 is written through native convers

Aug 3, 2022
Animation kits for vue components transition
Animation kits for vue components transition

Animation kits for vue components transition

Oct 28, 2021