vue-sequential-entrance

Vuejs Plugin for creating epic sequential animation entrances with a list of elements.
Zero effort.
Really lightweight


Basic demo - codesandbox

Installation

In order to use into your vue project
``
npm install vue-sequential-entrance
`

How to use ( Global Usage )

Add to your main.js file
`javascript
import SequentialEntrance from 'vue-sequential-entrance'
import 'vue-sequential-entrance/vue-sequential-entrance.css'
Vue.use(SequentialEntrance);
`

And now, in your component file, wrap a list of elements with sequential-entrance tag
`html

`

Sequential Entrance comes with four 'flavors': animation entrance from Top, from right, from left and from bottom. By default, it uses from right, but you can select what you want this way:
`html
[...]

[...]

[...]

[...]
`




Customize with the following Props

$3


By default, the sequence animation have an interval of 250 milliseconds. If you need a faster or slower entrance animation, you can specify the time in milliseconds.
`html
[...]
`

$3

If you prefer don't use the built in animations (fromTop,fromRight,fromLeft,fromBottom) and use your custom css animation, you can easily using 'animation' props. Simply, put the class name of your animation and that's it.
`html
[...]
`

Even you can use css animation libraries like animate.css ( https://daneden.github.io/animate.css/ ). Import the entire css library or only the ones that you are going to use and type the class name in animation prop.

`html
[...]
`

$3


By default, sequential-entrance render a 'span' tag wrapping its children, but you can customize the wrapper tag through 'tag' prop
`html
[...]
``