When it comes to raw animation speed FAT outperforms every single web animation library out there and also provides flexible animation capabilities like scenes, sequences, controlling and easing.
Installation Guide • API Reference • Custom Builds • Benchmark Ranking
Get Latest (Stable Release):
| Build | File | CDN |
| fat.min.js | Download | https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.min.js |
| fat.light.js | Download | https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.light.js |
| fat.custom.js | Custom Build |
All Features:
| Feature | fat.js / fat.min.js | fat.light.js |
|
Scenes (Groups) |
x | x |
|
Easing Collection |
x | - |
|
Controlling |
x | - |
|
Sequences |
x | - |
|
Transforms (2D/3D) |
x | - |
|
Colors |
x | - |
|
Canvas (2D) |
- | - |
|
SVG |
- | - |
| Render Engines | JS, CSS3, WAAPI | JS |
| File Size (gzip) | 5.3 kb | 2.1 kb |
It is also very simple to make a Custom Build
| Rank | Library Name | Library Version | Library Size (gzip) | Updates per second | Frames per second |
| 1 | FAT | 0.3.0 | 2.1 kb | 95371 | 50.3 |
| 2 | GSAP | 2.0.2 | 25.8 kb | 83866 | 41.1 |
| 3 | TweenJS | 1.0.2 | 8.3 kb | 70145 | 34.6 |
| 4 | HTML5 (WAAPI) | - | - | - not supported - | 32.7 |
| 5 | TinyAnimate | 0.4.0 | 1.5 kb | 56466 | 28.2 |
| 6 | MooTools | 1.6.0 | 31.2 kb | 26919 | 25.2 |
| 7 | CSS3 (Transition) | - | - | - not supported - | 22.3 |
| 8 | Velocity | 2.0.5 | 16.6 kb | 16820 | 6.3 |
| 9 | AnimeJS | 2.2.0 | 5.9 kb | 9877 | 2.8 |
| 10 | Anim.js | - | 1.9 kb | 6994 | 2.8 |
| 11 | Dojo | 1.14.2 | 53.0 kb | 10607 | 2.3 |
| 12 | Morpheus | 0.7.2 | 2.7 kb | 8543 | 2.1 |
| 13 | jQuery | 3.3.1 | 30.0 kb | 14413 | 1.3 |
| 14 | bajs | 1.0 | 1.2 kb | - | 0.8 |
| 15 | JustAnimate | 2.5.1 | 7.3 kb | 5087 | 0.6 |
| 16 | YUI | 3.18.1 | 24.4 kb | 2182 | 0.5 |
| 17 | Zepto | 1.2.0 | 11.0 kb | - not supported - | 0.3 |
Library Comparison:
- Benchmark "Bouncing Balls"
- Benchmark "Transform" (coming soon)
- Benchmark "Coloring" (coming soon)
<html>
<head>
<script src="fat.min.js"></script>
</head>
...Note: Use fat.min.js for production and fat.js for development.
Use latest stable release from CDN:
<script src="https://cdn.jsdelivr.net/gh/nextapps-de/fat/fat.min.js"></script>Use a specific version from CDN:
<script src="https://cdn.jsdelivr.net/gh/nextapps-de/fat@v0.1.0/fat.min.js"></script>Common JS
In your code include as follows:
var Fat = require("Fat");AMD
var Fat = require("./fat.min.js");Global methods / Scene methods:
- Fat.animate(selector[] | elements[], styles[{}], options{})
- Fat.transform(selector[] | elements[], styles[{}], options{})
- Fat.transition(selector[] | elements[], styles{}, options{})
- Fat.native(selector[] | elements[], styles{}, options{})
- Fat.update(selector[] | elements[], styles{}, options{})
- Fat.init()
- Fat.destroy()
Controller methods:
- Scene.pause(toggle)
- Scene.reverse(toggle)
- Scene.loop(int)
- Scene.seek(float)
- Scene.speed(float)
- Scene.start(toggle)
- Scene.reset()
- Scene.finish(boolean)
| Option | Type | Default | Description |
| duration | Number | 400 | Duration of the animation (ms). |
| ease | String | "linear" | Choose built-in easing. |
| delay | Number | 0 | Delay of the animation (ms). |
| callback | Function | null | Callback function to be called when the animation is finished. |
| step | Function(current) | null | Step function to be called on each tick. |
| init | Boolean | false | Forces getting computed styles. |
| force | Boolean | false | Forces style changes (like css "!important"). |
| engine | String | "js" | Choose one of 3 render engines: "js", "css", "native". |
Fat.animate(selector[] | elements[], styles[{}], options{})
Fat.animate("#mydiv", { left: "100px" },{ duration: 2000 });Pass in custom options for each property:
Fat.animate("#mydiv", {
left: {
from: 0,
to: "100%",
duration: 2000,
ease: "linear"
},
top: {
from: 0,
to: "100%",
duration: 2000,
ease: "quadIn",
delay: 2000
}
});Use relative values:
Fat.animate("#mydiv", {
left: "+=100px",
top: "*=2"
});Fat.animate("#mydiv", {
translateX: "100px",
translateY: "100%"
});same as:
Fat.transform("#mydiv", ...Fat.animate("#mydiv", {
color: "#f00",
backgroundColor: "rgba(0, 255, 0, 1)",
borderColor: "hsla(0, 100%, 100%, 1)"
});Built-in easing:
- linear
- easeIn, easeOut, easeInOut (same as: quadIn, quadOut, quadInOut)
- cubicIn, cubicOut, cubicInOut
- quartIn, quartOut, quartInOut
- quintIn, quintOut, quintInOut
- sineIn, sineOut, sineInOut
- expoIn, expoOut, expoInOut
- circIn, circOut, circInOut
- backIn, backOut, backInOut
- snap
Static (Pre-Cached) vs. Dynamic Easing
There are two ways to define easing functions. When your easing is a static curve (like easeIn, backInOut, elastic, etc.) you should define the easing via Fat.ease["myEasing"] = fn() and simply pass the name as string within the Fat.animate options. This will prefetch all the calculations, so you are free to use really heavy easing definitions without any performance drawbacks.
When you want to use dynamic easing, which depends on runtime calculations, you should pass the easing function directly to the Fat.animate options. In this case the easing calculation will not prefetch. This allows you to control easing programmatically and adding logic during runtime.
Define custom static easing function (1-parameter style):
Fat.ease["linear"] = function(x){
return x;
};x: current progress (0.0 - 1.0)
Define custom static easing function (4-parameter style):
Fat.ease["linear"] = function(t, b, c, d){
return b + (c - b) * (t / d);
};t: current time, b: from value, c: to value, d: duration
Apply the custom static easing:
Fat.animate("#mydiv", { left: "100px" },{ ease: "linear" });Use cubic bezier:
Fat.animate("#mydiv", { left: "100px" },{ ease: "cubic(0, 1, 0, 1)" });Alternatively use array notation for a bezier:
... ,{ ease: [0, 1, 0, 1] });Define custom dynamic easing function (1-parameter style):
Fat.animate("#mydiv", { left: "100px" },{ ease: function(x){
// doing some crazy calculations depends on runtime
return x;
}});Define custom dynamic easing function (4-parameter style):
Fat.animate("#mydiv", { left: "100px" },{ ease: function(t, b, c, d){
// doing some crazy calculations depends on runtime
return x;
}});Fat.animate("#mydiv", [
{ left: "100%" }, // start
{ top: "100%" }, // 2nd animation
{ left: 0 }, // 3rd animation
{ top: 0 } // end
],{
callback: function(){ alert("finished, call next loop") },
loop: -1 // infinite
});Create a new scene:
var scene = new Fat();Alternatively you can also use:
var scene = Fat.create();Add animations to a scene:
scene.animate(element, {left: "100%"});Update scene styles:
scene.update(element, {left: "0%"});Destroy scene:
scene.destroy();Pause a new scene:
scene.pause();alternatively:
scene.play(false);Play a new scene:
scene.play();alternatively:
scene.pause(false);Revert playback (toggle):
scene.reverse();alternatively set direction:
scene.reverse(false);Stop animation and jump back to the start:
scene.reset();Stop animation and jump to the end:
scene.finish();Finish and also execute callback:
scene.finish(true);Set playback speed:
scene.speed(0.5); // half
scene.speed(1); // normal
scene.speed(2); // doubleSeek a scene to a specific position:
scene.seek(0); // start
scene.seek(0.5); // half
scene.seek(1); // end| Engine | js | css | native |
| Renderer | Javascript (Default) | CSS Transition | Web Animation API |
| Support Control | x | - | - |
| Support SVG | x | - | - |
| Support Scenes | x | x | x |
| File Size (gzip) | 7.2 kb | 0.8 kb | 0.5 kb |
You need Node.js including Node Package Manager (NPM)
Install Dependencies:
npm installFull Build:
npm run buildLight Build:
npm run build-lightCustom Build:
npm run build-custom SUPPORT_EASE_IN_CUBIC=true SUPPORT_CONTROL=trueSupported flags (boolean):
- SUPPORT_DEBUG
- SUPPORT_COLOR
- SUPPORT_CONTROL
- SUPPORT_SEQUENCES
- SUPPORT_TRANSFORM
- SUPPORT_ANIMATE
- SUPPORT_TRANSITION
- SUPPORT_NATIVE
- SUPPORT_ENGINE (string: "all", "js", "css", "native")
- SUPPORT_EASING (includes all easing built-ins)
Alternatively you can also use this style:
node compile SUPPORT_CONTROL=trueThe custom build will be saved to fat.custom.js
Copyright 2019 Nextapps GmbH
Released under the Apache 2.0 License
