0.0.20 • Published 4 years ago
reveal-animations v0.0.20
vue-accordion
Vue directive for reveal animations based on Intersection Observer.
Installation
npm i vue-reveal-animationsor
yarn add npm i vue-reveal-animationsThen you can install your plugin globally with
...
import revealAnimations from 'vue-reveal-animations'
Vue.directive('reveal-animations', revealAnimations)
...or locally
...
import revealAnimations from 'vue-reveal-animations'
export default {
...
directives: {
revealAnimations
},
...
}
...Usage
Use as directive with object props as bind.
<div v-reveal-animations="options">
...
</div>Options
| Parameter | Required | Type | Default | Description |
|---|---|---|---|---|
| type | String | 'fade-in' | Animation type. Available animations: 'fade-in', 'slide-in', 'custom'. If type is 'custom' you have to set initialState and finalState as an object of css properties. | |
| offset | Number | 0.5 | Intersection observer offset | |
| target | DOM Node || CSS Selector | current element | Target of animation | |
| duration | Number | 1.2 | Duration of animation | |
| ease | String | 'expo.out' | Type of ease. Based on GSAP Eases documentation > https://greensock.com/docs/v3/Eases |