A simple Vue directive that animates elements as they scroll into view.
npm install vue-animate-onscroll

A simple Vue 3 directive that animates elements as they scroll into view.
``sh`
npm install vue-animate-onscroll
typescript
import { createApp } from 'vue'
import VueAnimateOnScroll from 'vue-animate-onscroll'const app = createApp(App)
app.use(VueAnimateOnScroll)
app.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.Import
animate.css however you like. For example, in your index.html:
`html
`Pass the desired class as a string literal (in single quotes) in your Vue template:
`html
Animate me once upon scroll
`$3
To trigger the animation with an offset at the top and the bottom, add a data-animate-onscroll-offset attribute:
`html
Animate me with 100px offset
`$3
By default the animation triggers once. To repeat it every time the element scrolls into view, use the repeat modifier:
`html
Animate me forever
`$3
For in and out animations on scroll, use in and out keys:
`html
Flip in and out
`$3
Animate only on a specific scroll direction:
`html
Animate once on scroll down
Animate once on scroll up
`With repeat:
`html
Animate every scroll down
`$3
Use two different animations for each scroll direction:
`html
Different animations per direction
`
Note: providing both up and down implicitly enables repeating.Development
`sh
npm install
npm run dev # starts demo page
npm run test # runs tests
npm run build # builds library
``
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.