Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nextapps-de/fat
Web's fastest and most lightweight animation tool.
https://github.com/nextapps-de/fat
animation animation-library html5 javascript javascript-library open-source standalone tween web
Last synced: about 2 months ago
JSON representation
Web's fastest and most lightweight animation tool.
- Host: GitHub
- URL: https://github.com/nextapps-de/fat
- Owner: nextapps-de
- License: apache-2.0
- Created: 2018-12-18T17:00:09.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-05-09T09:23:39.000Z (over 3 years ago)
- Last Synced: 2024-04-26T01:43:19.940Z (5 months ago)
- Topics: animation, animation-library, html5, javascript, javascript-library, open-source, standalone, tween, web
- Language: JavaScript
- Homepage:
- Size: 461 KB
- Stars: 276
- Watchers: 10
- Forks: 23
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
### Web's fastest and most lightweight animation tool.
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, transforms, coloring, controlling and easing.
Installation Guide • API Reference • Examples • 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.compact.js
Download
https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.compact.js
fat.custom.js
Custom Build
All Features:
Feature
fat.min.js
fat.compact.js
fat.light.js
Animation
x
x
x
Scenes (Groups)
x
x
x
Easing Collection (Custom Bezier)
x
x
-
Control (Timeline)
x
-
-
Sequences
x
-
-
Keyframes
x
-
-
Presets (Effects)
x
-
-
Transforms (2D/3D)
x
x
-
Filter
x
-
-
Colors
x
x
-
Custom Properties/Renderer
x
x
x
Relative Values
x
-
-
Scroll
x
-
-
Paint
x
-
-
Concurrency (Strict Mode)
x
-
-
Render Engines
JS, CSS3, WAAPI
JS
JS
File Size (gzip)
7.0 kb
4.5 kb
1.9 kb
> The flags _DEBUG_ and _PROFILER_ are also available in _fat.js_ for non-production use.
> It is also very simple to make a Custom Build
Library Comparison: Benchmark "Bouncing Balls"
__"Animate" (2000 Bouncing Balls)__
Rank
Library Name
Library Version
Library Size
Memory Heap *
Memory Allocation **
Updates per second
Frames per second
1
FAT
0.6.6
1.9 kb
0.85 Mb
0.15 Mb
103954
51.5
2
GSAP
2.0.2
25.8 kb
28.32 Mb
8.1 Mb
87249
43.1
3
TweenJS
1.0.2
8.3 kb
3.16 Mb
3.1 Mb
69647
34.4
4
HTML5 (WAAPI)
-
-
0.91 Mb
0.75 Mb
-
32.2
5
TinyAnimate
0.4.0
1.5 kb
1.93 Mb
1.98 Mb
28801
29
6
MooTools
1.6.0
31.2 kb
3.14 Mb
3.42 Mb
26919
25.2
7
CSS3 (Transition)
-
-
0 Mb
0 Mb
-
22.3
8
Velocity
2.0.5
16.6 kb
8.33 Mb
7.98 Mb
16820
6.3
9
AnimeJS
2.2.0
5.9 kb
7.14 Mb
8.2 Mb
9877
2.8
10
Anim.js
-
1.9 kb
7.08 Mb
9.49 Mb
6994
2.8
11
Dojo
1.14.2
53.0 kb
9.1 Mb
6.5 Mb
10607
2.3
12
Morpheus
0.7.2
2.7 kb
4 Mb
2.97 Mb
8543
2.1
13
jQuery
3.3.1
30.0 kb
25.14 Mb
25.16 Mb
7206
1.3
14
bajs
1.0
1.2 kb
1.25 Mb
0.91 Mb
-
0.8
15
JustAnimate
2.5.1
7.3 kb
109.5 Mb
61.18 Mb
5087
0.6
16
YUI
3.18.1
24.4 kb
159.59 Mb
88.35 Mb
2182
0.5
17
Zepto
1.2.0
11.0 kb
40.14 Mb
18.49 Mb
-
0.3
__"Transforms" (2000 Bouncing Balls)__
Rank
Library Name
Library Version
Updates per second
Frames per second
1
FAT
0.6.6
91960
46.1
2
TweenJS
1.0.2
67931
33
3
GSAP
2.0.2
50337
26
4
AnimeJS
2.2.0
41040
21.6
5
HTML5 (WAAPI)
-
-
16
6
CSS3 (Transition)
-
-
15.5
7
Zepto
1.2.0
-
12.4
8
Morpheus
0.7.2
6665
3.3
9
bajs
1.0
-
1
10
JustAnimate
2.5.1
1218
0.3
11
jQuery
3.3.1
309
0.01
__"Colors" (2000 Flashing Balls)__
Rank
Library Name
Library Version
Updates per second
Frames per second
1
FAT
0.6.6
113950
57
2
GSAP
2.0.2
89665
42.65
3
TweenJS
1.0.2
89499
42
4
Velocity
2.0.5
59617
31.25
5
HTML5 (WAAPI)
-
-
26.5
6
Anim.js
-
-
23
7
CSS3 (Transition)
-
-
20.6
8
YUI
3.18.1
84287
14.7
9
MooTools
1.6.0
8123
13.3
10
Dojo
1.14.2
33004
11.1
11
AnimeJS
2.2.0
12483
6.3
12
jQuery
3.3.1
7002
4
13
Morpheus
0.7.2
3902
3.2
14
Zepto
1.2.0
-
2
15
JustAnimate
2.5.1
4283
1
16
bajs
1.0
-
0.7
_Browser: Chrome (Desktop), Test Duration: 30 sec (median value)_
_* Memory Heap: The size of memory the animations requires to execute_
_** Memory Allocation: The amount of memory which was allocated during animation runtime_
Library Comparison: Benchmark "Bouncing Balls"
##### HTML / Javascript
```html
...
```
> __Note:__ Use _fat.min.js_ for production and _fat.js_ for development.
Use latest stable release from CDN:
```html
```
Use a specific version from CDN:
```html
```
__Common JS__
In your code include as follows:
```javascript
var Fat = require("Fat");
```
__AMD__
```javascript
var Fat = require("./fat.min.js");
```
> The namespace "Fat" is also the default scene (global scene).
Global methods / Scene methods:
- Fat.__animate__(selector | elements, styles | preset, options, callback)
- Fat.__transform__(selector | elements, styles, options, callback)
- Fat.__filter__(selector | elements, styles, options, callback)
- Fat.__transition__(selector | elements, styles, options, callback)
- Fat.__native__(selector | elements, styles, options, callback)
- Fat.__destroy__()
Control methods:
- Scene.__set__(selector | elements, styles, force?)
- Scene.__set__(selector | elements, style, value, force?)
- Scene.__remove__(selector | elements, styles)
- Scene.__pause__(boolean: toggle)
- Scene.__reverse__(boolean: toggle)
- Scene.__start__(boolean: toggle)
- Scene.__finish__()
- Scene.__reset__()
- Scene.__loop__(int: count)
- Scene.__shift__(int: ms)
- Scene.__seek__(float: position)
- Scene.__speed__(float: ratio)
Option
Type
Default
Description
start
Boolean
true
Enable/Disable autoplay when an animation call was performed
fps
Number
60
Frames per second
Option
Type
Default
Description
duration
Number
400
Duration of the animation (ms).
ease
String | Function
"linear"
Choose a pre-defined easing method or pass a custom easing function.
delay
Number
0
Delay of the animation (ms).
callback
Function
null
Function to be called when the animation is finished.
step
Function(progress, value)
null
Function to be called on each tick (progress: the current state of progress between 0 and 1, value: the current value including the unit, helpful when using custom properties).
loop
Number
0
Loop count of sequences or keyframes. Set to -1 for infinite loops.
init
Boolean
false
Forces getting computed styles when starting next animation loop. Just important when styles changes within the animation callback right before starting a new animation on the same style property (animation loop).
force
Boolean
false
Forces style changes (equal to css keyword "!important").
strict
Boolean
false
Do not override and keep different animations acts on same object's style properties.
engine
String
"js"
Choose one of 3 render engines: "js", "css", "native".
## Basic Usage
> Fat.__animate__(selector[] | elements[], styles[]{}, options{}, callback)
```js
Fat.animate("#mydiv", { left: "100px" },{ /* options */ });
```
> Pass in an element, an array of elements or a dom query selector.
```js
Fat.animate("#mydiv", {
left: "100px",
top: "100px"
},{
delay: 1000,
duration: 2000,
ease: "easeInOut",
callback: function(){
// "this" refers to #mydiv
console.log(this.style.left);
}
});
```
> See all available options above.
Pass in custom options for each style property:
```js
Fat.animate("#mydiv", {
left: {
from: 0,
to: 100,
unit: "%",
duration: 2000,
ease: "linear"
},
top: {
from: 0,
to: "100%",
duration: 2000,
ease: "quadIn",
delay: 2000
}
});
```
> Passing a unit parameter is slightly faster.
"From-To-Unit" Shortcut `property: [from, to, unit]`:
```js
Fat.animate("#mydiv", {
left: [0, 100, "%"], // from 0% to 100%
top: [0, "100%"],
});
```
Alternatively pass the callback function as the last parameter:
```js
Fat.animate("#mydiv", {
left: "100px",
top: "100px"
},{
delay: 2000,
duration: 2000,
ease: "easeInOut"
}, function(){
// done
});
```
```js
Fat.animate("#mydiv", { top: "100px" }, function(){
// done
});
```
```js
Fat.animate("#mydiv", "slideInTop", function(){
// done
});
```
Delay an animation until the target element comes into view (e.g. by scrolling):
```js
Fat.animate("#mydiv", { top: "100px" }, { delay: "view" });
```
Calculate values depending on the current state:
```js
// current left + 100px
Fat.animate("#mydiv", { left: "+=100px" });
```
```js
// double of current top
Fat.animate("#mydiv", { top: "*=2" });
```
```js
// current left - 100px
Fat.animate("#mydiv", { left: "-=100px", });
```
```js
// half of current top
Fat.animate("#mydiv", { top: "/=2" });
```
Toggle values depending on the current state:
```js
// toggle current left (100% or 0%)
Fat.animate("#mydiv", { left: "!=100%" });
```
Separate notation provides the best performance:
```js
Fat.animate("#mydiv", {
translateX: "100px",
translateY: "100px"
});
```
same as:
```js
Fat.transform("#mydiv", { ... });
```
alternatively:
```js
Fat.animate("#mydiv", {
"transform": "translate(100px, 100px)"
});
```
same as:
```js
Fat.transform("#mydiv", "translate(100px, 100px)");
```
```js
Fat.animate("#mydiv", {
color: "#f00",
backgroundColor: "rgba(0, 255, 0, 1)",
borderColor: "hsla(0, 100%, 100%, 1)"
});
```
Separate notation provides the best performance:
```js
Fat.animate("#mydiv", {
colorR: 0,
colorG: 0,
colorB: 0,
colorA: 0,
backgroundColorA: "100%",
borderColorB: 255
});
```
Separate notation provides the best performance:
```js
Fat.animate("#mydiv", {
brightness: 0.5,
contrast: 0.5,
hue: "180deg"
});
```
> You can use the shorthand `hue` as `hue-rotate`
same as:
```js
Fat.filter("#mydiv", { ... });
```
alternatively:
```js
Fat.animate("#mydiv", {
"filter": "brightness(0.5) contrast(0.5) hue(180deg)"
});
```
same as:
```js
Fat.filter("#mydiv", "brightness(0.5) contrast(0.5) hue(180deg)");
```
- linear
- easeIn, easeOut, easeInOut (refers to: 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):
```js
Fat.ease["linear"] = function(x){
return x;
};
```
> __x__: current progress (0.0 - 1.0)
Define custom static easing function (4-parameter style):
```js
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:
```js
Fat.animate("#mydiv", { left: "100px" },{ ease: "linear" });
```
Use cubic bezier:
```js
Fat.animate("#mydiv", { left: "100px" },{ ease: "cubic(0, 1, 0, 1)" });
```
Shorthand array notation for a bezier is recommended:
```js
... ,{ ease: [0, 1, 0, 1] });
```
Define custom __dynamic easing__ function (1-parameter style):
```js
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):
```js
Fat.animate("#mydiv", { left: "100px" },{ ease: function(t, b, c, d){
// doing some crazy calculations depends on runtime
return x;
}});
```
## Custom Property / Renderer
> Fat.__animate__(custom_object[]{}, custom_property[]{}, options{})
> __Note:__ You can't use more than one custom property per animation on a HTML element. Instead when animating custom object properties there are no limits.
Just add a property with the name "custom":
```js
Fat.animate("#mydiv", {
custom: "50%"
},{
ease: "cubicInOut",
step: function(progress, current){
this.style.left = current;
}
});
```
Handle unit separately:
```js
Fat.animate("#mydiv", {
custom: 50
},{
ease: "cubicInOut",
step: function(progress, current){
this.style.left = current + "%";
}
});
```
Pass in custom object/function as first parameter instead of an element:
```js
Fat.animate({
obj: document.getElementById("mydiv")
},{
custom: 50
},{
ease: "cubicInOut",
step: function(progress, current){
// "this" refers to the custom object
this.obj.style.left = current + "%";
}
});
```
You can also use sequences:
```js
... [custom: 50, custom: 0, custom: 100, custom: 0]
```
This way it is possible to pass custom data, logic and renderer through each animation job, e.g.:
```js
var handler = {
unit: "%",
obj: document.getElementById("mydiv"),
set: function(property, value){
this.obj.style[property] = value + this.unit;
}
};
Fat.animate(handler, { custom: 50 },{
ease: "cubicInOut",
step: function(progress, current){
// "this" refers to handler
this.set("left", current);
}
});
```
You can also use array of objects/handlers:
```js
Fat.animate([handler1, handler2, handler3], ...
```
If you don't need the from/to transition values at all, another scenario could be:
```js
function cubicInOut(x) {
return ((x *= 2) <= 1 ? x*x*x : (x -= 2) *x*x + 2) / 2;
}
Fat.animate({ ease: cubicInOut },{ custom: true },{
step: function(progress){
var current = this.ease(progress);
// console.log(current);
}
});
```
alternatively:
```js
Fat.animate({},{ custom: true },{ step: function(progress){
var current = cubicInOut(progress);
// console.log(current);
}});
```
or:
```js
Fat.animate({},{ custom: 1 },{
ease: cubicInOut,
step: function(progress, current){
// console.log(current);
}
});
```
__Tween custom object properties:__
```js
function draw(){
this.obj.style[this.property] = this.value;
}
var custom = {
value: 0,
property: "left",
obj: document.getElementById("#mydiv")
};
Fat.animate(custom, { value: "50%" },{
duration: 2000,
ease: "cubicInOut",
step: draw
});
```
```js
Fat.animate("#mydiv", [
{ left: "100%" }, // 1st animation, 2000ms
{ top: "100%" }, // 2nd animation, 2000ms
{ left: 0 }, // 3rd animation, 2000ms
{ top: 0 } // 4th animation, 2000ms
],{
callback: function(){ alert("Next Loop") },
delay: 2000,
loop: -1 // infinite
});
```
Use custom options per style property:
```js
Fat.animate("#mydiv", [{
left: { // 1st animation
from: 0,
to: 100,
unit: "%",
duration: 2000
}
},{
top: { // 2nd animation
to: "100%",
duration: 2000,
ease: "easeInOut",
delay: 0
}
},
...
```
```js
Fat.animate("#mydiv", {
"25%": { left: "100%" }, // 0 -> 25%, 500ms
"50%": { top: "100%" }, // 25 -> 50%, 500ms
"75%": { left: 0 }, // 50 -> 75%, 500ms
"100%": { top: 0 } // 75 -> 100%, 500ms
},{
callback: function(){ alert("Next Loop") },
delay: 2000,
loop: -1 // infinite
});
```
Use custom options per style property:
```js
Fat.animate("#mydiv", {
"0%": {
left: {
to: "100%",
ease: "easeIn"
}
},
"100%": {
top: {
to: "0%",
ease: "easeOut"
}
}
},
...
```
```js
Fat.animate("#mydiv", "fadeOut");
```
Combine multiple presets (ordered):
```js
Fat.animate("#mydiv", "fadeOut zoomOut rollOutRight");
```
Also usable with sequences:
```js
Fat.animate("#mydiv", ["slideInTop", "zoomIn"]);
```
Define custom preset:
```js
Fat.preset["fade-out-down"] = {
opacity: 0,
translateY: "100%"
};
```
Use custom preset:
```js
Fat.animate("#mydiv", "fade-out-down");
```
__Builtin Presets:__
- fadeIn, fadeOut, fadeToggle
- slideInLeft, slideOutLeft, slideToggleLeft
- slideInRight, slideOutRight, slideToggleRight
- slideInTop, slideOutTop, slideToggleTop
- slideInBottom, slideOutBottom, slideToggleBottom
- zoomIn, zoomOut, zoomToggle
- rollOutRight (clockwise), rollInRight, rollToggleRight
- rollOutLeft (opposite), rollInLeft, rollToggleLeft
- blurIn, blurOut, blurToggle
- scrollUp, scrollDown, scrollLeft, scrollRight
Get the global scene (default):
```js
var scene = Fat.animate(element, { left: "100%" });
```
Create a new scene:
```js
var scene = Fat.create();
```
Add animations to a scene:
```js
scene.animate(element, { left: "100%" });
```
Destroy scene:
```js
scene.destroy();
```
__Useful Example__
Considering the following example:
```js
var scene_1 = Fat.animate(element_1, { left: "100%" });
var scene_2 = Fat.animate(element_2, { left: "100%" });
var scene_3 = Fat.animate(element_3, { left: "100%" });
// this will also destroy scene_2 and scene_3:
scene_1.destroy();
```
All variables points to the same global scene on which is _"Fat"_ basically based on.
This is the correct workaround:
```js
var scene_1 = Fat.create().animate(element_1, { left: "100%" });
var scene_2 = Fat.create().animate(element_2, { left: "100%" });
var scene_3 = Fat.create().animate(element_3, { left: "100%" });
// this will just destroy scene_1:
scene_1.destroy();
```
> Do not massively create new scenes and also do not create them by default. A large amount of parallel scenes results in a performance drawback.
> _Fat_ internally points to default global scene, so you can use all scene methods on _Fat_ accordingly.
Update single style:
```js
scene.set("#mydiv", "left", "0%");
```
Update multiple styles:
```js
scene.set("#mydiv", { top: 0, left: 0 });
```
Remove all animations from an object:
```js
scene.remove("#mydiv");
```
Remove a specific animation from an object:
```js
scene.remove("#mydiv", "left");
```
Remove a list of specific animations from an object:
```js
scene.remove("#mydiv", ["top", "left"]);
```
Pause a scene:
```js
scene.pause();
```
alternatively:
```js
scene.start(false);
```
Play a scene:
```js
scene.start();
```
alternatively:
```js
scene.pause(false);
```
Revert playback (toggle):
```js
scene.reverse();
```
alternatively set direction:
```js
scene.reverse(false);
```
Reset playback state and jump back to the start:
```js
scene.reset();
```
Finish and also execute callback:
```js
scene.finish();
```
Set playback speed:
```js
scene.speed(0.5); // half
scene.speed(1); // normal
scene.speed(2); // double
scene.speed(-2); // double (reversed direction)
```
Seek a scene to a specific position:
```js
scene.seek(0); // start
scene.seek(0.5); // middle
scene.seek(1); // end
```
Shift a scene relative to the current position (by milliseconds):
```js
scene.shift(2000); // current + 2000 ms
scene.shift(-500); // current - 500 ms
```
__Looping Sequences & Reversed Direction__
When looping sequences and also have reversed animation direction (e.g. by setting speed < 0) you have to pass a from-to declaration pair for each style, otherwise the from-value gets lost when looping back from reversed direction.
```js
var scene = Fat.animate(element, [{
left: { from: "0%", to: "50%" }
},{
left: { from: "50%", to: "0%" }
}],{
loop: -1
});
scene.reverse();
```
alternatively use from-to-unit shorthand:
```js
var scene = Fat.animate(element, [{
left: [0, 50, "%"]
},{
left: [50, 0, "%"]
}],{
loop: -1
});
scene.reverse();
```
alternatively use relative toggle:
```js
var scene = Fat.animate(element, [{
left: "!=50%"
},{
left: "!=0%"
}],{
loop: -1
});
scene.reverse();
```
Scroll document/element to a specific position (vertically):
```js
Fat.animate(element, { scrollTop: 500 });
```
Scroll horizontally:
```js
Fat.animate(element, { scrollLeft: 500 });
```
Scroll in both directions `scroll: [x, y]`:
```js
Fat.animate(element, { scroll: [500, 500] });
```
Use relative values:
```js
Fat.animate(element, { scroll: "+=50" });
```
Schedule a task to perform during next animation frame:
```js
Fat.paint(function(time){
console.log("Now: " + time);
});
```
Schedule a task with a delay and keep the paint id:
```js
var id = Fat.paint(function(time){
console.log("Now: " + time);
}, 2000);
```
Remove the above scheduled task from the queue:
```js
Fat.cancel(id);
```
Loop a task with every animation frame:
```js
Fat.paint(function(time){
console.log("Now: " + time);
return true;
});
```
> Just return _true_ to keep the loop alive. Return _false_ or return nothing to break the loop.
Considering the following example:
```js
Fat.animate(element, { top: "100%" }, function(){
this.style.top = 0; // this style change will be shadowed
Fat.animate(this, { top: "100%" });
});
```
This is called animation loop, the callback creates a new animation on the __same__ objects style property. Technically the callback executes during the last frame of the first animation. So there is still running an animation on this property and will be inherited by the next animation loop.
> During the callback, external changes on the __same__ style property which is going to be animated will be shadowed by the animation loop inheritance.
When the style change did not happened externally (e.g. by a different tool) use _set_ method to get best performance:
```js
Fat.animate(element, { top: "100%" }, function(){
Fat.set(this, "top", 0).animate(this, { top: "100%" });
});
```
Otherwise, to solve this situation you have to add the _init_ option:
```js
Fat.animate(element, { top: "100%" }, function(){
this.style.top = 0; // external change somewhere happens
Fat.animate(this, { top: "100%" }, { init: true });
});
```
Again, this issue only occurs when using animation loops mixed with manual style changes on the __same__ style property during the callback right before the new animation loop is called.
Considering the following example:
```js
Fat.animate("#mydiv", { top: "100%" }, { duration: 2000 }, function(){
console.log("long");
});
// next animation will override the above one:
Fat.animate("#mydiv", { top: "100%" }, { duration: 400 }, function(){
console.log("short");
});
```
When you perform different animations on the same object style properties to run in parallel there is a concurrency issue. By default a dupe animation inherits the old one, so the old animation is not existing anymore. Accordingly to the example from above the console just logs "short".
To force duped animations you have to add the _strict_ option:
```js
// this animation cannot be overridden:
Fat.animate("#mydiv", { top: "100%" }, { duration: 2000, strict: true }, function(){
console.log("long");
});
Fat.animate("#mydiv", { top: "100%" }, { duration: 400 }, function(){
console.log("short");
});
```
Now the console logs "short" after 400ms and "long" after 2000ms. Although same properties cannot have two different values, so always the most early started animation gets prioritized actually.
Considering the following example:
```css
#mydiv{ top: 0px !important }
```
```js
Fat.animate("#mydiv", { top: "100%" });
```
The css style declaration from above has the keyword _!important_ and is preventing normal style changes.
To solve this you have to add the _force_ option:
```js
Fat.animate("#mydiv", { top: "100%" }, { force: true });
```
> These is an experimental feature. All engines are stand-alone, you can make a custom build just with your favorite pick.
Engine
js
css
native
Renderer
Javascript (Default)
CSS Transition
Web Animation API
```js
Fat.transition("#mydiv", {
left: "100px",
top: "100px"
},{
delay: 1000,
duration: 2000,
ease: "easeInOut",
callback: function(){
// done
console.log(this.style.left);
}
});
```
```js
Fat.native("#mydiv", {
left: "100px",
top: "100px"
},{
delay: 1000,
duration: 2000,
ease: "easeInOut",
callback: function(){
// done
console.log(this.style.left);
}
});
```
> Do not use DEBUG in production builds.
If you get issues, you can temporary set the _DEBUG_ flag to _true_ on top of _fat.js_:
```js
DEBUG = true;
```
This enables console logging of several processes. Just open the browsers console to make this information visible.
> Do not use PROFILER in production builds.
To collect some performance statistics of your scenes you need to temporary set the _PROFILER_ flag to _true_ on top of _fat.js_:
```js
PROFILER = true;
```
This enables profiling of several processes.
An array of all profiles is available on:
```js
window.stats;
```
You can also just open the browsers console and enter this line to get stats.
> The index of the array corresponds to the _scene.id_.
Get stats from a specific scene:
```js
scene.stats;
```
The returning stats payload is divided into several categories. Each of these category provides its own statistic values.
__Profiler Stats Properties__
Property
Description
time
The sum of time (ms) the process takes (lower is better)
count
How often the process was called
ops
Average operations per seconds (higher is better)
nano
Average cost (ns) per operation/call (lower is better)
> You need Node.js including Node Package Manager (NPM)
Install Dependencies:
```bash
npm install
```
Full Build:
```bash
npm run build
```
Light Build:
```bash
npm run build-light
```
Compact Build:
```bash
npm run build-compact
```
Custom Build:
```bash
npm run build-custom SUPPORT_EASE_IN_CUBIC=true SUPPORT_CONTROL=true
```
> On custom builds each build flag will be set to _false_ by default.
Alternatively (Custom Build):
```bash
node compile support_control=true
```
> The custom build will be saved to fat.custom.xxxxx.js (the "xxxxx" is a hash based on the used build flags).
__Supported Build Flags__
Flag
Values
SUPPORT_COLOR
true, false
SUPPORT_CONTROL
true, false
SUPPORT_SEQUENCE
true, false
SUPPORT_TRANSFORM
true, false
SUPPORT_FILTER
true, false
SUPPORT_SCROLL
true, false
SUPPORT_PAINT
true, false
SUPPORT_RELATIVE
true, false
SUPPORT_CONCURRENCY
true, false
SUPPORT_EASING
true, false
SUPPORT_PRESET
true, false
SUPPORT_ENGINE
string: "all", "js", "css", "native" / "waapi"
SUPPORT_ANIMATE
true, false (overrides SUPPORT_ENGINE)
SUPPORT_TRANSITION
true, false (overrides SUPPORT_ENGINE)
SUPPORT_NATIVE
true, false (overrides SUPPORT_ENGINE)
Language-Out Flags
LANGUAGE_OUT
ECMASCRIPT3
ECMASCRIPT5
ECMASCRIPT5_STRICT
ECMASCRIPT6
ECMASCRIPT6_STRICT
ECMASCRIPT_2015
ECMASCRIPT_2017
STABLE
---
Copyright 2019 Nextapps GmbH
Released under the Apache 2.0 License