fast-ease
v0.0.2
Published
Fast and minimalistic javascript animation library
Downloads
85
Maintainers
caracal7Readme
fast-ease.js
Fast and minimalistic javascript animation library.
Why?
Most animation libraries are overloaded with different functions and contain a lot of overhead, although in real life you often only need the ability to interpolate between two values, but at very high speed.
Designed to be a lower level layer for more complex animation engines, this library do one thing and do it well.
API
Animate single value
const animationID = FastEase.animate(
updateCallback, // interpolatedValue => {};
easingFunction, // FastEase.easings.inOutElastic;
animationDuration, // 3000
initialValue, // -100
finalValue, // 100
onDoneCallback // animationID => {}
);Animate multiple values in a single loop
const animationID = FastEase.animateBatch(
updateCallback, // (...interpolated) => {};
easingFunction, // FastEase.easings.inOutElastic;
animationDuration, // 3000
[
[initialValue1, finalValue1], // [-100, 100]
[initialValue2, finalValue2] // [1, 10]
// ...
],
onDoneCallback // animationID => {}
);Stop single or batch animation
FastEase.stop(animationID);Easing functions
- inBack
- inBounce
- inCirc
- inCube
- inElastic
- inExpo
- inOutBack
- inOutBounce
- inOutCirc
- inOutCube
- inOutElastic
- inOutExpo
- inOutQuad
- inOutQuart
- inOutQuint
- inOutSine
- inQuad
- inQuart
- inQuint
- inSine
- linear
- outBack
- outBounce
- outCirc
- outCube
- outElastic
- outExpo
- outQuad
- outQuart
- outQuint
- outSine
Browser (IIFE)
<!DOCTYPE html>
<html>
<head>
<script src="fast-ease.min.js"></script>
<style>
body {
background: #444;
}
#testSingle, #testBatch, #testStop {
position: absolute;
width: 160px;
height: 30px;
top: 180px;
left: calc(50% - 80px);
font-size: 10px;
color: black;
background: linear-gradient(#00FF8A, #00E050);
padding: 0 7px;
border: 1px solid black;
border-radius: 5px;
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.1), inset -1px -1px 0 rgba(0, 0, 0, 0.1);
cursor: pointer;
}
#testBatch {
top: 210px;
background: linear-gradient(#00baff, #0082e0);
}
#testStop {
top: 240px;
background: linear-gradient(#ff8200, #e08d00);
}
</style>
</head>
<body>
<button id="testSingle">Animate single value</button>
<button id="testBatch">Batch animate "top" and "left"</button>
<button id="testStop">Stop all animations</button>
<script>
var ID1;
var ID2;
function Stop() {
// Stop all animations
FastEase.stop(ID1);
FastEase.stop(ID2);
}
function testSingle(event) {
var rect = event.target.getBoundingClientRect();
// Stop the previous animation on this element, if any
FastEase.stop(ID1);
// Remember the animation ID and we can stop it at any time with it
ID1 = FastEase.animate(
// Callback. Called when the value changes
top => event.target.style.top = top + 'px',
// Easing function. You can use any of the 'FastEase.easings' or create your own.
FastEase.easings.inOutElastic,
// Duration in milliseconds
1500,
// Initial value
rect.top,
// Final value
~~(Math.random() * 300) + 1,
// Callback on animation finished
id => console.log('Animation finished', id)
);
}
function testBatch(event) {
var rect = event.target.getBoundingClientRect();
// Stop the previous animation on this element, if any
FastEase.stop(ID1);
// Remember the animation ID and we can stop it at any time with it
ID2 = FastEase.animateBatch(
// Callback for first and second parameter in single batch. Called when the value changes
(top, left) => {
event.target.style.top = top + 'px';
event.target.style.left = left + 'px';
},
// Easing function. You can use any of the 'FastEase.easings' or create your own.
FastEase.easings.outBounce,
// Duration in milliseconds
1500,
// Parameters batch
[
[rect.top, ~~(Math.random() * 300) + 1], // first parameter (initial and final value)
[rect.left, ~~(Math.random() * 300) + 1] // second parameter (initial and final value)
// ... next parameters
],
// Callback on animation finished
id => console.log('Animation finished', id)
);
};
document.getElementById('testStop').onclick = Stop;
document.getElementById('testSingle').onclick = testSingle;
document.getElementById('testBatch').onclick = testBatch;
</script>
</body>
</html>
Node.js
Installation
npm i fast-easeLicense
(The MIT License)
Copyright (c) 2024 Dmitrii Vasilev