Animations

CSS Animations

Using with class names. (like animate.css)

new Noty({
    text: 'NOTY - a dependency-free notification library!',
    animation: {
        open: 'animated bounceInRight', // Animate.css class names
        close: 'animated bounceOutRight' // Animate.css class names
    }
}).show();

Example css animation;

.noty_effects_open {
  opacity: 0;
  transform: translate(50%);
  animation: noty_anim_in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.noty_effects_close {
  animation: noty_anim_out 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes noty_anim_in {
  100% {
    transform: translate(0);
    opacity: 1;
  }
}

@keyframes noty_anim_out {
  100% {
    transform: translate(50%);
    opacity: 0;
  }
}

JavaScript animations are deprecated! But you can use 3rd party animation libraries.

Other cool ways

Animating with bounce.js

Get bounce.js, first. Then;

new Noty({
    ...
    text: 'NOTY - animating with Bounce.js!',
    ...
    animation: {
        open: function (promise) {
            var n = this;
            new Bounce()
                .translate({
                    from     : {x: 450, y: 0}, to: {x: 0, y: 0},
                    easing   : "bounce",
                    duration : 1000,
                    bounces  : 4,
                    stiffness: 3
                })
                .scale({
                    from     : {x: 1.2, y: 1}, to: {x: 1, y: 1},
                    easing   : "bounce",
                    duration : 1000,
                    delay    : 100,
                    bounces  : 4,
                    stiffness: 1
                })
                .scale({
                    from     : {x: 1, y: 1.2}, to: {x: 1, y: 1},
                    easing   : "bounce",
                    duration : 1000,
                    delay    : 100,
                    bounces  : 6,
                    stiffness: 1
                })
                .applyTo(n.barDom, {
                    onComplete: function () {
                        promise(function(resolve) {
                            resolve();
                        })
                    }
                });
        },
        close: function (promise) {
            var n = this;
            new Bounce()
                .translate({
                    from     : {x: 0, y: 0}, to: {x: 450, y: 0},
                    easing   : "bounce",
                    duration : 500,
                    bounces  : 4,
                    stiffness: 1
                })
                .applyTo(n.barDom, {
                    onComplete: function () {
                        promise(function(resolve) {
                            resolve();
                        })
                    }
                });
        }
    }
}).show();

Important: You need to resolve promises for this type of usage.

Animating with mo.js

Get mo.js, first. Then;

new Noty({
    ...
    text: 'NOTY - animating with Mo.js!',
    ...
    animation: {
        open: function (promise) {
            var n = this;
            var Timeline = new mojs.Timeline();
            var body = new mojs.Html({
                el        : n.barDom,
                x         : {500: 0, delay: 0, duration: 500, easing: 'elastic.out'},
                isForce3d : true,
                onComplete: function () {
                    promise(function(resolve) {
                        resolve();
                    })
                }
            });

            var parent = new mojs.Shape({
                parent: n.barDom,
                width      : 200,
                height     : n.barDom.getBoundingClientRect().height,
                radius     : 0,
                x          : {[150]: -150},
                duration   : 1.2 * 500,
                isShowStart: true
            });

            n.barDom.style['overflow'] = 'visible';
            parent.el.style['overflow'] = 'hidden';

            var burst = new mojs.Burst({
                parent  : parent.el,
                count   : 10,
                top     : n.barDom.getBoundingClientRect().height + 75,
                degree  : 90,
                radius  : 75,
                angle   : {[-90]: 40},
                children: {
                    fill     : '#EBD761',
                    delay    : 'stagger(500, -50)',
                    radius   : 'rand(8, 25)',
                    direction: -1,
                    isSwirl  : true
                }
            });

            var fadeBurst = new mojs.Burst({
                parent  : parent.el,
                count   : 2,
                degree  : 0,
                angle   : 75,
                radius  : {0: 100},
                top     : '90%',
                children: {
                    fill     : '#EBD761',
                    pathScale: [.65, 1],
                    radius   : 'rand(12, 15)',
                    direction: [-1, 1],
                    delay    : .8 * 500,
                    isSwirl  : true
                }
            });

            Timeline.add(body, burst, fadeBurst, parent);
            Timeline.play();
        },
        close: function (promise) {
            var n = this;
            new mojs.Html({
                el        : n.barDom,
                x         : {0: 500, delay: 10, duration: 500, easing: 'cubic.out'},
                skewY     : {0: 10, delay: 10, duration: 500, easing: 'cubic.out'},
                isForce3d : true,
                onComplete: function () {
                    promise(function(resolve) {
                        resolve();
                    })
                }
            }).play();
        }
    }
}).show();

Important: You need to resolve promises for this type of usage.

Animating with velocity

Get velocity, first. Then;

new Noty({
    ...
    text: 'NOTY - animating with velocity!',
    ...
    animation: {
        open: function (promise) {
            var n = this;
            Velocity(n.barDom, {
                left: 450,
                scaleY: 2
            }, {
                duration: 0
            });
            Velocity(n.barDom, {
                left: 0,
                scaleY: 1
            }, {
                easing: [ 8, 8 ],
                complete: function() {
                    promise(function(resolve) {
                        resolve();
                    })
                }
            });
        },
        close: function (promise) {
            var n = this;
            Velocity(n.barDom, {
                left: '+=-50'
            }, {
                easing: [ 8, 8, 2],
                duration: 350
            });
            Velocity(n.barDom, {
                left: 450,
                scaleY: .2,
                height: 0,
                margin: 0
            }, {
                easing: [ 8, 8 ],
                complete: function () {
                    promise(function(resolve) {
                        resolve();
                    })
                }
            });
        }
    }
}).show();

Important: You need to resolve promises for this type of usage.