https://github.com/dmitriyakkerman/animejs-facade

Simple facade above Anime.js animation engine
https://github.com/dmitriyakkerman/animejs-facade

animation animejs

Last synced: about 1 month ago
JSON representation

Simple facade above Anime.js animation engine

• Host: GitHub
• URL: https://github.com/dmitriyakkerman/animejs-facade
• Owner: dmitriyakkerman
• Created: 2020-07-19T06:02:00.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2021-12-01T09:51:02.000Z (over 3 years ago)
• Last Synced: 2025-02-15T06:16:52.768Z (3 months ago)
• Topics: animation, animejs
• Language: JavaScript
• Homepage:
• Size: 233 KB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
**Usage:**

1.Connect [Anime.js](https://animejs.com/) and anime-facade.

```js

```

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...*