Penner's easing functions :
Availabe easings :
| in |
out |
in-out |
out-in |
'easeInQuad' |
'easeOutQuad' |
'easeInOutQuad' |
'easeOutInQuad' |
'easeInCubic' |
'easeOutCubic' |
'easeInOutCubic' |
'easeOutInCubic' |
'easeInQuart' |
'easeOutQuart' |
'easeInOutQuart' |
'easeOutInQuart' |
'easeInQuint' |
'easeOutQuint' |
'easeInOutQuint' |
'easeOutInQuint' |
'easeInSine' |
'easeOutSine' |
'easeInOutSine' |
'easeOutInSine' |
'easeInExpo' |
'easeOutExpo' |
'easeInOutExpo' |
'easeOutInExpo' |
'easeInCirc' |
'easeOutCirc' |
'easeInOutCirc' |
'easeOutInCirc' |
'easeInBack' |
'easeOutBack' |
'easeInOutBack' |
'easeOutInBack' |
'easeInBounce' |
'easeOutBounce' |
'easeInOutBounce' |
'easeOutInBounce' |
Example :
var demoContentEl = document.querySelector('.penner-equations-demo');
var fragment = document.createDocumentFragment();
var easingNames = [
'easeInQuad',
'easeInCubic',
'easeInQuart',
'easeInQuint',
'easeInSine',
'easeInExpo',
'easeInCirc',
'easeInBack',
'easeOutQuad',
'easeOutCubic',
'easeOutQuart',
'easeOutQuint',
'easeOutSine',
'easeOutExpo',
'easeOutCirc',
'easeOutBack',
'easeInBounce',
'easeInOutQuad',
'easeInOutCubic',
'easeInOutQuart',
'easeInOutQuint',
'easeInOutSine',
'easeInOutExpo',
'easeInOutCirc',
'easeInOutBack',
'easeInOutBounce',
'easeOutBounce',
'easeOutInQuad',
'easeOutInCubic',
'easeOutInQuart',
'easeOutInQuint',
'easeOutInSine',
'easeOutInExpo',
'easeOutInCirc',
'easeOutInBack',
'easeOutInBounce',
]
function createEasingDemo(easing) {
var demoEl = document.createElement('div');
demoEl.classList.add('el', 'square', 'stretched', 'easing-'+easing);
anime({
targets: demoEl,
translateY: [50, -50],
direction: 'alternate',
loop: true,
delay: 100,
endDelay: 100,
duration: 1000,
easing: easing
});
fragment.appendChild(demoEl);
}
easingNames.forEach(function(easeName) {
createEasingDemo(easeName);
});
demoContentEl.innerHTML = '';
demoContentEl.appendChild(fragment);
