How can I implement animate on page scroll?

Question

When a user scrolls through a webpage, how can I trigger animate css?

Is it a matter of when v-show="element" appears, trigger x?

Using Vue 2 + animate css

Answer 1

I found answer from Ikbel useful

How to display and transition when scroll position reaches element position in the screen?

you can achive this with custom directive which adds binding inViewport for window scroll event to elements that you want to animate.

I added data-transition to html element that I want to animate

<div v-vpshow data-transition="flipInX"><div>

and changed binding like this

el.$onScroll = function() {
    if (binding.def.inViewport(el)) {
        el.classList.add('animated')
        el.classList.add(el.getAttribute('data-transition'))
        el.classList.remove('before-enter')
        binding.def.unbind(el, binding)
    }
}