Cacher is the code snippet organizer for pro developers

export default function animate(el, animation, replay = false) {
    if(replay) {
        let element = document.querySelector(el);
        element.classList.remove("animated", animation);
        // force reflow
        void element.offsetWidth;
        // re-add the animated cl
        element.classList.add("animated", animation);
    } else {
        let element = document.querySelector(el);
        element.classList.add("animated", animation);
    }
}

import ScrollOut from "scroll-out";
import animate from '../modules/animate';

// * define animations
let animations = [
    {
        element: '.hero--home .col--main',
        class: 'slideInLeft',
        replay: true,
    }
]; 

// * automatically sets data-scroll
animations.map(i => {
    // console.log(i.element);
    document.querySelector(i.element).setAttribute('data-scroll', '');
});
 
// * run ScrollOut function
ScrollOut({  
    onShown: function(el) {
        animations.map(i => {
            animate(i.element, i.class, i.replay); 
        });
    }
});