Animations

Scroll down to get to the animations

Fade animation

Settings: animation: fade; revert: true; duration: 300ms; threshold: 0.5;

Method: CSS

Move left animation

Settings: animation: move-left; distance: 50; unit: 'px'; revert: true; duration: 300ms; threshold: 0.5;

Method: CSS

Move Top animation

Settings: animation: move-top; distance: 50; unit: 'px'; revert: true; duration: 300ms; threshold: 0.5;

Method: CSS

In animation

Settings: animation: in; scaleBoundMin: 0.7; revert: true; duration: 300ms; threshold: 0.5;

Method: CSS

Out animation

Settings: animation: in; scaleBoundMax: 1.3; revert: true; duration: 300ms; threshold: 0.5;

Method: CSS

Turn right animation

Settings: animation: turn; direction: 'right'; deg: 89; revert: true; duration: 300ms; threshold: 0.5;

Method: CSS

Turn bottom animation

Settings: animation: turn; direction: 'bottom'; deg: 89; revert: true; duration: 300ms; threshold: 0.5;

Method: CSS

Reveal left animation

Settings: animation: reveal; direction: 'left'; revealLength: 70; revealUnit: '%'; revert: true; duration: 300ms; threshold: 0.5;

Method: CSS

Reveal top animation

Settings: animation: reveal; direction: 'top'; revealLength: 70; revealUnit: '%'; revert: true; duration: 300ms; threshold: 0.5;

Method: CSS

Blur animation

Settings: animation: blur; revert: true; duration: 300ms; threshold: 0.5;

Method: CSS

All together

Settings: animation: fade, move, in, turn, reveal, blur; Standard config as above.

Method: CSS

All together with fallback engine and JS animations

Settings: animation: fade, move, in, turn, reveal, blur; disableObserver: true; css: ''; deg: 89; duration: 300ms; Standard config as above.

Method: JS

Progressive Demo

All together with fallback engine, JS animations amd progressive play

Settings: threshold: 0.01, progressive: true, throttle: 20, animation: fade, move, in, turn, reveal, blur; disableObserver: true; css: ''; deg: 89; duration: 300ms; Standard config as above.

Method: JS

Tip: Set throttle and threshold to a lower value to smooth the progressive animations