Usage:

1.Connect Anime.js and anime-facade.

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="animejs-facade.min.js"></script>

2.Init your animation.

Example with anime-facade preset:

new AnimeFacade('.logo', {
    preset: {
        name: 'scale'
    }
});    

Example with customized anime-facade preset properties:

new AnimeFacade('.el', {
    preset: {
        name: 'fadeIn',
        params: {
            opacity: [0.5, 1],
        }
    },
    duration: 2500,
    delay: function (el, i, l) {
        return i * 500
    },
    easing: "easeOutBounce"
});  

Example with custom Anime.js properties without using anime-facade presets:

new AnimeFacade('.box', {
    custom: {
        params: {
            translateX: [0, '100px'],
            duration: 2500,
            delay: 2000,
            easing: "easeInOutQuad"
        }
    }
});

Available presets

fadeIn,
fadeOut,
fadeInUp,
fadeInDown,
fadeInLeft,
fadeInRight,
scale,
squeeze,
slideInUp,
slideInRight,
slideRightScale,
slideUpStretch,
num,
draw,
textIn,
textRotate,
textType,
textInLeft,
textInRight,
textInUp,
textInDown  

Presets demos in progress...