npmpackage.info

Gathering detailed insights and metrics for vue-animate-onscroll

Other packages similar to vue-animate-onscroll

vue3-animate-onscroll

1.0.6

A simple Vue directive that animates elements as they scroll into view.

vue-onscroll-animate

1.0.0

The best directive ever!

Gathering detailed insights and metrics for vue-animate-onscroll

vue-animate-onscroll - 1.0.8 | npmpackage.info

vue-animate-onscroll

A simple component that animates elements as they scroll into view.

1.0.8

115

JavaScript

5.99 kB

2.6

Installations

npm install vue-animate-onscroll

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

12.4.0

NPM Version

6.9.0 Score

61.4

Supply Chain

80.3

Quality

75.6

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

3

Total

21

Closed

0

Merged

18

Issues

Open

2

Total

5

Closed

3

Releases

Unable to fetch releases

Languages

JavaScript

JavaScript (100%)

Developer

josephharveyangeles

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

115 Stars

58 Commits

19 Forks

3 Watchers

4 Branches

2 Contributors

Updated on Jun 13, 2025

Maintainers

View All 2 Contributors

Package Meta Information

Latest Version

1.0.8

Package Id

vue-animate-onscroll@1.0.8

Unpacked Size

5.99 kB

Size

2.30 kB

File Count

NPM Version

6.9.0

Node Version

12.4.0

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dev Dependencies

jest rimraf rollup rollup-plugin-terser

vue-animate-onscroll

A simple Vue directive that animates elements as they scroll into view.

Installation

1npm install vue-animate-onscroll
2# or
3yarn add vue-animate-onscroll

Setup

Import to your Vue application

1import Vue from 'vue'
2import VueAnimateOnScroll from 'vue-animate-onscroll'
3
4Vue.use(VueAnimateOnScroll)

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.

License

vue-animate-onscroll by Joseph Harvey Angeles is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
Based on a work at https://github.com/josephharveyangeles/vue-animate-onscroll.

No vulnerabilities found.

10

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

License

Determines if the project has defined a license.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.6

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More