Animation on scroll - just discovered AOS library

Just to share if anyone looking for implementing this animation.

A client requested an animation to display boxes on scroll.

Just discovered AOS library and implemented a fadeIn fadOut animation in few minutes. Didn't go further but it looks great!

github:

https://github.com/michalsnik/aos

setup

npm install aos --save

app.sass

@import "~aos/dist/aos.css"

They are quite a few animations available out of the box (check documentation) but you can still implement your own animation. Below an example with fade animation:

[aos="fade"]
  opacity: 0
  transition-property: opacity

[aos="fade"].aos-animate
  opacity: 1

bootstrap.js

window.AOS = require('AOS');
AOS.init();

in any blade or vue file:

<div data-aos="fade" data-aos-duration="1000">
    <h1>hello world</h1>
</div>

What do you use @JeffreyWay for Laracasts?

Let me know if this was useful!