8. Custom animations

How to replace default animations

There are 3 animations that can be replaced, all those callback functions bellow should return an animejs object.

const lightbox = new Lightbox({
    uid: 'lightbox-1',
    animations: {
        close: (node) => {
            // ...
        },
        open: (node) => {
            // ...
        },
        showElement: (node, direction) => {
            // ...
        },
    }
});

Example

import anime from 'animejs';

const lightbox = new Lightbox({
    uid: 'lightbox-1',
    animations: {
        close: (node) => anime({
            targets: node,
            opacity: 0,
            duration: 300,
            delay: 100,
            easing: 'easeOutSine',
        }),
    }
});