Gathering detailed insights and metrics for vue3-animate-onscroll
Gathering detailed insights and metrics for vue3-animate-onscroll
Installations
npm install vue3-animate-onscrollDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
16.4.1
NPM Version
7.18.1
Releases
Unable to fetch releases
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
Maintainers
1
Package Meta Information
Latest Version
1.0.6
Package Id
vue3-animate-onscroll@1.0.6
Unpacked Size
9.12 kB
Size
3.58 kB
File Count
8
NPM Version
7.18.1
Node Version
16.4.1
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
3
vue3-animate-onscroll
A simple Vue3 directive that animates elements as they scroll into view.
Installation
1npm install vue3-animate-onscroll 2# or 3yarn add vue3-animate-onscroll
Setup
Import to your Vue application
1import { createApp } from 'vue'; 2import VueAnimateOnScroll from 'vue3-animate-onscroll'; 3 4const app = createApp(App); 5app.use(VueAnimateOnScroll); 6app.mount('#app');
Usage
For demo purposes, let's use animate.css, a css animation library but using your own custom CSS animations would work the same way as well.
Import animate.css anyway you like. For demo purposes, in your index.html
1<head> 2 <!-- some other stuff --> 3 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css"> 4</head>
Pass the desired class as a string literal (in single quotes) in your Vue template:
1<div v-animate-onscroll="'animated flip'">Animate me once upon scroll</div>
Repeat Modifier
Note that by default the animation will only trigger once: the first time the element scrolled into view. If you want to repeat the animation everytime it was scrolled into view, use the repeat modifier:
1<div v-animate-onscroll.repeat="'animated flip'">Animate me upon scroll forever</div>
Scroll Direction
It's also possible to animate only on a specific scroll direction by passing in an object as the value. In the following example, the animation will only trigger the first time you scroll down on the element.
1<div v-animate-onscroll="{down: 'animated flip'}">Animate me once upon scroll down</div>
On upward scroll:
1<div v-animate-onscroll="{up: 'animated rotateOut'}">Animate me once upon scroll up</div>
If you want to repeat the animation everytime you scroll down to the element add the repeat modifier:
1<div v-animate-onscroll.repeat="{down: 'animated flip'}">Animate me everytime you scroll down on me</div>
Multiple animations
Or use two different animations for each scroll direction:
1<div v-animate-onscroll="{down: 'animated flip', up: 'animated rotateOut' }">Animate me upon scroll forever</div>
Note that by providing both up and down directions, the repeat modifier is implicitly in effect.
Demo
Live demo here.
Source
vue-animate-onscroll project changed to vue3
No vulnerabilities found.
No security vulnerabilities found.