Having benefitted so much from the open source community in my career; I thought it would be rude to carry on without open-sourcing something of my own!

So with that in mind, I have released Animate.js; a tiny JavaScript plugin that makes triggering element animations based on an event a breeze. Whether you want to fade in an element on page load or make an element bounce when it enters the viewport, animate.js has got you covered.

To get started, simply include the plugin, create a new instance and fire the initialise method:

<script src="/assets/js/dist/animate.js"></script>
<script>
    var animate = new Animate({
        target: '[data-animate]',
        animatedClass: 'js-animated',
        offset: [0.5,0.5],
        delay: 0,
        removeAnimations: true,
        scrolled: true,
        reverse: false,
        debug: false,
        onLoad: true,
        onScroll: true,
        onResize: false,
        callbackOnInit: function(){},
        callbackOnAnimate: function(element){
            console.log(element);
        }
    });
    animate.init();
</script>

Once the plugin is initialised, all that is required to animate an element is to add the target attribute/class ('data-animate' by default) as well as the animations you wish to add:

<div data-animate data-animation-classes="animated fadeIn"></div>

• Link to site: https://joshuajohnson.co.uk/Animate/
• Link to repo: https://github.com/jshjohnson/Animate