{"id":13517174,"url":"https://github.com/nextapps-de/fat","last_synced_at":"2025-04-09T15:01:59.519Z","repository":{"id":51872429,"uuid":"162320094","full_name":"nextapps-de/fat","owner":"nextapps-de","description":"Web's fastest and most lightweight animation tool.","archived":false,"fork":false,"pushed_at":"2021-05-09T09:23:39.000Z","size":472,"stargazers_count":276,"open_issues_count":5,"forks_count":23,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-04-26T01:43:19.940Z","etag":null,"topics":["animation","animation-library","html5","javascript","javascript-library","open-source","standalone","tween","web"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nextapps-de.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-18T17:00:09.000Z","updated_at":"2024-04-24T09:58:29.000Z","dependencies_parsed_at":"2022-08-31T14:11:03.835Z","dependency_job_id":null,"html_url":"https://github.com/nextapps-de/fat","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextapps-de%2Ffat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextapps-de%2Ffat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextapps-de%2Ffat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextapps-de%2Ffat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nextapps-de","download_url":"https://codeload.github.com/nextapps-de/fat/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248055272,"owners_count":21040153,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","animation-library","html5","javascript","javascript-library","open-source","standalone","tween","web"],"created_at":"2024-08-01T05:01:30.695Z","updated_at":"2025-04-09T15:01:59.485Z","avatar_url":"https://github.com/nextapps-de.png","language":"JavaScript","readme":"\u003cbr\u003e\n\u003cimg src=\"https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/docs/fat_logo_dark.svg\"\u003e\n\u003ch1\u003e\u003c/h1\u003e\n\u003ca target=\"_blank\" href=\"https://github.com/nextapps-de/fat/issues\"\u003e\u003cimg src=\"https://img.shields.io/github/issues/nextapps-de/fat.svg\"\u003e\u003c/a\u003e\n\u003ca target=\"_blank\" href=\"https://github.com/nextapps-de/fat/blob/master/LICENSE.md\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/xone.svg\"\u003e\u003c/a\u003e\n\n### Web's fastest and most lightweight animation tool.\n\nWhen it comes to raw animation speed \u003ca href=\"#compare\"\u003eFAT outperforms every single web animation library out there\u003c/a\u003e and also provides flexible animation capabilities like scenes, sequences, transforms, coloring, controlling and easing. \n\n\u003ca href=\"#installation\"\u003eInstallation Guide\u003c/a\u003e \u0026ensp;\u0026bull;\u0026ensp; \u003ca href=\"#api\"\u003eAPI Reference\u003c/a\u003e \u0026ensp;\u0026bull;\u0026ensp; \u003ca href=\"test/\"\u003eExamples\u003c/a\u003e \u0026ensp;\u0026bull;\u0026ensp; \u003ca href=\"#builds\"\u003eCustom Builds\u003c/a\u003e \u0026ensp;\u0026bull;\u0026ensp; \u003ca href=\"#compare\"\u003eBenchmark Ranking\u003c/a\u003e\n\nGet Latest (Stable Release):\n\n\u003ctable\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eBuild\u003c/td\u003e\n        \u003ctd\u003eFile\u003c/td\u003e\n        \u003ctd\u003eCDN\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003efat.min.js\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://github.com/nextapps-de/fat/raw/master/fat.min.js\" target=\"_blank\"\u003eDownload\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.min.js\" target=\"_blank\"\u003ehttps://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.min.js\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003efat.light.js\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://github.com/nextapps-de/fat/raw/master/fat.light.js\" target=\"_blank\"\u003eDownload\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.light.js\" target=\"_blank\"\u003ehttps://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.light.js\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003efat.compact.js\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://github.com/nextapps-de/fat/raw/master/fat.compact.js\" target=\"_blank\"\u003eDownload\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.compact.js\" target=\"_blank\"\u003ehttps://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.compact.js\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003efat.custom.js\u003c/td\u003e\n        \u003ctd\u003e\u003ca href=\"#builds\"\u003eCustom Build\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\nAll Features:\n\n\u003ctable\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eFeature\u003c/td\u003e\n        \u003ctd\u003efat.min.js\u003c/td\u003e\n        \u003ctd\u003efat.compact.js\u003c/td\u003e\n        \u003ctd\u003efat.light.js\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003ca href=\"#fat.animate\"\u003eAnimation\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003ex\u003c/td\u003e\n        \u003ctd\u003ex\u003c/td\u003e\n        \u003ctd\u003ex\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003ca href=\"#scenes\"\u003eScenes (Groups)\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003ex\u003c/td\u003e\n        \u003ctd\u003ex\u003c/td\u003e\n        \u003ctd\u003ex\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003ca href=\"#easing\"\u003eEasing Collection (Custom Bezier)\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003ex\u003c/td\u003e\n        \u003ctd\u003ex\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003ca href=\"#controls\"\u003eControl (Timeline)\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003ex\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003ca href=\"#sequences\"\u003eSequences\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003ex\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003ca href=\"#keyframes\"\u003eKeyframes\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003ex\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003ca href=\"#presets\"\u003ePresets (Effects)\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003ex\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003ca href=\"#transform\"\u003eTransforms (2D/3D)\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003ex\u003c/td\u003e\n        \u003ctd\u003ex\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003ca href=\"#filter\"\u003eFilter\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003ex\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003ca href=\"#colors\"\u003eColors\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003ex\u003c/td\u003e\n        \u003ctd\u003ex\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003ca href=\"#custom\"\u003eCustom Properties/Renderer\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003ex\u003c/td\u003e\n        \u003ctd\u003ex\u003c/td\u003e\n        \u003ctd\u003ex\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003ca href=\"#relative\"\u003eRelative Values\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003ex\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003ca href=\"#scroll\"\u003eScroll\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003ex\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003ca href=\"#paint\"\u003ePaint\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003ex\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003ca href=\"#strict\"\u003eConcurrency (Strict Mode)\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003ex\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\n            \u003ca href=\"#engine\"\u003eRender Engines\u003c/a\u003e\n        \u003c/td\u003e\n        \u003ctd\u003eJS, CSS3, WAAPI\u003c/td\u003e\n        \u003ctd\u003eJS\u003c/td\u003e\n        \u003ctd\u003eJS\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eFile Size (gzip)\u003c/td\u003e\n        \u003ctd\u003e7.0 kb\u003c/td\u003e\n        \u003ctd\u003e4.5 kb\u003c/td\u003e\n        \u003ctd\u003e1.9 kb\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003e The flags _\u003ca href=\"#debug\"\u003eDEBUG\u003c/a\u003e_ and _\u003ca href=\"#profile\"\u003ePROFILER\u003c/a\u003e_ are also available in _fat.js_ for non-production use.\n\n\u003e It is also very simple to make a \u003ca href=\"#builds\"\u003eCustom Build\u003c/a\u003e\n\n\u003ca name=\"compare\" id=\"compare\"\u003e\u003c/a\u003e\n## Benchmark Ranking \n\nLibrary Comparison: \u003ca href=\"https://nextapps-de.github.io/fat/\" target=\"_blank\"\u003eBenchmark \"Bouncing Balls\"\u003c/a\u003e\n\n__\"Animate\" (2000 Bouncing Balls)__\n\n\u003ctable\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd align=\"left\"\u003eRank\u003c/td\u003e\n        \u003ctd align=\"left\"\u003eLibrary Name\u003c/td\u003e\n        \u003ctd align=\"left\"\u003eLibrary Version\u003c/td\u003e\n        \u003ctd align=\"left\"\u003eLibrary Size\u003c/td\u003e\n        \u003ctd align=\"left\"\u003eMemory Heap \u003ca href=\"#notes\"\u003e*\u003c/a\u003e\u003c/td\u003e\n        \u003ctd align=\"left\"\u003eMemory Allocation \u003ca href=\"#notes\"\u003e**\u003c/a\u003e\u003c/td\u003e\n        \u003ctd align=\"left\"\u003eUpdates per second\u003c/td\u003e\n        \u003ctd align=\"left\"\u003eFrames per second\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e1\u003c/td\u003e\n        \u003ctd\u003eFAT\u003c/td\u003e\n        \u003ctd\u003e0.6.6\u003c/td\u003e\n        \u003ctd\u003e1.9 kb\u003c/td\u003e\n        \u003ctd\u003e0.85 Mb\u003c/td\u003e\n        \u003ctd\u003e0.15 Mb\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e103954\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e51.5\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e2\u003c/td\u003e\n        \u003ctd\u003eGSAP\u003c/td\u003e\n        \u003ctd\u003e2.0.2\u003c/td\u003e\n        \u003ctd\u003e25.8 kb\u003c/td\u003e\n        \u003ctd\u003e28.32 Mb\u003c/td\u003e\n        \u003ctd\u003e8.1 Mb\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e87249\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e43.1\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e3\u003c/td\u003e\n        \u003ctd\u003eTweenJS\u003c/td\u003e\n        \u003ctd\u003e1.0.2\u003c/td\u003e\n        \u003ctd\u003e8.3 kb\u003c/td\u003e\n        \u003ctd\u003e3.16 Mb\u003c/td\u003e\n        \u003ctd\u003e3.1 Mb\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e69647\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e34.4\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e4\u003c/td\u003e\n        \u003ctd\u003eHTML5 (WAAPI)\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003e0.91 Mb\u003c/td\u003e\n        \u003ctd\u003e0.75 Mb\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e32.2\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e5\u003c/td\u003e\n        \u003ctd\u003eTinyAnimate\u003c/td\u003e\n        \u003ctd\u003e0.4.0\u003c/td\u003e\n        \u003ctd\u003e1.5 kb\u003c/td\u003e\n        \u003ctd\u003e1.93 Mb\u003c/td\u003e\n        \u003ctd\u003e1.98 Mb\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e28801\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e29\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e6\u003c/td\u003e\n        \u003ctd\u003eMooTools\u003c/td\u003e\n        \u003ctd\u003e1.6.0\u003c/td\u003e\n        \u003ctd\u003e31.2 kb\u003c/td\u003e\n        \u003ctd\u003e3.14 Mb\u003c/td\u003e\n        \u003ctd\u003e3.42 Mb\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e26919\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e25.2\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e7\u003c/td\u003e\n        \u003ctd\u003eCSS3 (Transition)\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003e0 Mb\u003c/td\u003e\n        \u003ctd\u003e0 Mb\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e22.3\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e8\u003c/td\u003e\n        \u003ctd\u003eVelocity\u003c/td\u003e\n        \u003ctd\u003e2.0.5\u003c/td\u003e\n        \u003ctd\u003e16.6 kb\u003c/td\u003e\n        \u003ctd\u003e8.33 Mb\u003c/td\u003e\n        \u003ctd\u003e7.98 Mb\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e16820\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e6.3\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e9\u003c/td\u003e\n        \u003ctd\u003eAnimeJS\u003c/td\u003e\n        \u003ctd\u003e2.2.0\u003c/td\u003e\n        \u003ctd\u003e5.9 kb\u003c/td\u003e\n        \u003ctd\u003e7.14 Mb\u003c/td\u003e\n        \u003ctd\u003e8.2 Mb\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e9877\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e2.8\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e10\u003c/td\u003e\n        \u003ctd\u003eAnim.js\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003e1.9 kb\u003c/td\u003e\n        \u003ctd\u003e7.08 Mb\u003c/td\u003e\n        \u003ctd\u003e9.49 Mb\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e6994\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e2.8\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e11\u003c/td\u003e\n        \u003ctd\u003eDojo\u003c/td\u003e\n        \u003ctd\u003e1.14.2\u003c/td\u003e\n        \u003ctd\u003e53.0 kb\u003c/td\u003e\n        \u003ctd\u003e9.1 Mb\u003c/td\u003e\n        \u003ctd\u003e6.5 Mb\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e10607\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e2.3\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e12\u003c/td\u003e\n        \u003ctd\u003eMorpheus\u003c/td\u003e\n        \u003ctd\u003e0.7.2\u003c/td\u003e\n        \u003ctd\u003e2.7 kb\u003c/td\u003e\n        \u003ctd\u003e4 Mb\u003c/td\u003e\n        \u003ctd\u003e2.97 Mb\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e8543\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e2.1\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e \n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e13\u003c/td\u003e\n        \u003ctd\u003ejQuery\u003c/td\u003e\n        \u003ctd\u003e3.3.1\u003c/td\u003e\n        \u003ctd\u003e30.0 kb\u003c/td\u003e\n        \u003ctd\u003e25.14 Mb\u003c/td\u003e\n        \u003ctd\u003e25.16 Mb\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e7206\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e1.3\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e14\u003c/td\u003e\n        \u003ctd\u003ebajs\u003c/td\u003e\n        \u003ctd\u003e1.0\u003c/td\u003e\n        \u003ctd\u003e1.2 kb\u003c/td\u003e\n        \u003ctd\u003e1.25 Mb\u003c/td\u003e\n        \u003ctd\u003e0.91 Mb\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e-\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e0.8\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e15\u003c/td\u003e\n        \u003ctd\u003eJustAnimate\u003c/td\u003e\n        \u003ctd\u003e2.5.1\u003c/td\u003e\n        \u003ctd\u003e7.3 kb\u003c/td\u003e\n        \u003ctd\u003e109.5 Mb\u003c/td\u003e\n        \u003ctd\u003e61.18 Mb\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e5087\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e0.6\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e16\u003c/td\u003e\n        \u003ctd\u003eYUI\u003c/td\u003e\n        \u003ctd\u003e3.18.1\u003c/td\u003e\n        \u003ctd\u003e24.4 kb\u003c/td\u003e\n        \u003ctd\u003e159.59 Mb\u003c/td\u003e\n        \u003ctd\u003e88.35 Mb\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e2182\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e0.5\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e17\u003c/td\u003e\n        \u003ctd\u003eZepto\u003c/td\u003e\n        \u003ctd\u003e1.2.0\u003c/td\u003e\n        \u003ctd\u003e11.0 kb\u003c/td\u003e\n        \u003ctd\u003e40.14 Mb\u003c/td\u003e\n        \u003ctd\u003e18.49 Mb\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e0.3\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n__\"Transforms\" (2000 Bouncing Balls)__\n\n\u003ctable\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd align=\"left\"\u003eRank\u003c/td\u003e\n        \u003ctd align=\"left\"\u003eLibrary Name\u003c/td\u003e\n        \u003ctd align=\"left\"\u003eLibrary Version\u003c/td\u003e\n        \u003ctd align=\"left\"\u003eUpdates per second\u003c/td\u003e\n        \u003ctd align=\"left\"\u003eFrames per second\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e1\u003c/td\u003e\n        \u003ctd\u003eFAT\u003c/td\u003e\n        \u003ctd\u003e0.6.6\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e91960\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e46.1\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e2\u003c/td\u003e\n        \u003ctd\u003eTweenJS\u003c/td\u003e\n        \u003ctd\u003e1.0.2\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e67931\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e33\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e3\u003c/td\u003e\n        \u003ctd\u003eGSAP\u003c/td\u003e\n        \u003ctd\u003e2.0.2\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e50337\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e26\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e4\u003c/td\u003e\n        \u003ctd\u003eAnimeJS\u003c/td\u003e\n        \u003ctd\u003e2.2.0\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e41040\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e21.6\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e5\u003c/td\u003e\n        \u003ctd\u003eHTML5 (WAAPI)\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e16\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e6\u003c/td\u003e\n        \u003ctd\u003eCSS3 (Transition)\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e15.5\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e7\u003c/td\u003e\n        \u003ctd\u003eZepto\u003c/td\u003e\n        \u003ctd\u003e1.2.0\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e12.4\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e8\u003c/td\u003e\n        \u003ctd\u003eMorpheus\u003c/td\u003e\n        \u003ctd\u003e0.7.2\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e6665\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e3.3\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e \n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e9\u003c/td\u003e\n        \u003ctd\u003ebajs\u003c/td\u003e\n        \u003ctd\u003e1.0\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e-\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e1\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e10\u003c/td\u003e\n        \u003ctd\u003eJustAnimate\u003c/td\u003e\n        \u003ctd\u003e2.5.1\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e1218\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e0.3\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e11\u003c/td\u003e\n        \u003ctd\u003ejQuery\u003c/td\u003e\n        \u003ctd\u003e3.3.1\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e309\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e0.01\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n__\"Colors\" (2000 Flashing Balls)__\n\n\u003ctable\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd align=\"left\"\u003eRank\u003c/td\u003e\n        \u003ctd align=\"left\"\u003eLibrary Name\u003c/td\u003e\n        \u003ctd align=\"left\"\u003eLibrary Version\u003c/td\u003e\n        \u003ctd align=\"left\"\u003eUpdates per second\u003c/td\u003e\n        \u003ctd align=\"left\"\u003eFrames per second\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e1\u003c/td\u003e\n        \u003ctd\u003eFAT\u003c/td\u003e\n        \u003ctd\u003e0.6.6\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e113950\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e57\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e2\u003c/td\u003e\n        \u003ctd\u003eGSAP\u003c/td\u003e\n        \u003ctd\u003e2.0.2\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e89665\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e42.65\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e3\u003c/td\u003e\n        \u003ctd\u003eTweenJS\u003c/td\u003e\n        \u003ctd\u003e1.0.2\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e89499\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e42\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e4\u003c/td\u003e\n        \u003ctd\u003eVelocity\u003c/td\u003e\n        \u003ctd\u003e2.0.5\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e59617\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e31.25\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e5\u003c/td\u003e\n        \u003ctd\u003eHTML5 (WAAPI)\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e26.5\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e6\u003c/td\u003e\n        \u003ctd\u003eAnim.js\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e23\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e7\u003c/td\u003e\n        \u003ctd\u003eCSS3 (Transition)\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e20.6\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e8\u003c/td\u003e\n        \u003ctd\u003eYUI\u003c/td\u003e\n        \u003ctd\u003e3.18.1\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e84287\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e14.7\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e9\u003c/td\u003e\n        \u003ctd\u003eMooTools\u003c/td\u003e\n        \u003ctd\u003e1.6.0\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e8123\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e13.3\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e10\u003c/td\u003e\n        \u003ctd\u003eDojo\u003c/td\u003e\n        \u003ctd\u003e1.14.2\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e33004\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e11.1\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e11\u003c/td\u003e\n        \u003ctd\u003eAnimeJS\u003c/td\u003e\n        \u003ctd\u003e2.2.0\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e12483\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e6.3\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e12\u003c/td\u003e\n        \u003ctd\u003ejQuery\u003c/td\u003e\n        \u003ctd\u003e3.3.1\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e7002\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e4\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e13\u003c/td\u003e\n        \u003ctd\u003eMorpheus\u003c/td\u003e\n        \u003ctd\u003e0.7.2\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e3902\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e3.2\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e \n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e14\u003c/td\u003e\n        \u003ctd\u003eZepto\u003c/td\u003e\n        \u003ctd\u003e1.2.0\u003c/td\u003e\n        \u003ctd\u003e-\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e2\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e15\u003c/td\u003e\n        \u003ctd\u003eJustAnimate\u003c/td\u003e\n        \u003ctd\u003e2.5.1\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e4283\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e1\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e16\u003c/td\u003e\n        \u003ctd\u003ebajs\u003c/td\u003e\n        \u003ctd\u003e1.0\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e-\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003cb\u003e0.7\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003ca name=\"notes\" id=\"notes\"\u003e\u003c/a\u003e\n_Browser: Chrome (Desktop), Test Duration: 30 sec (median value)_\u003cbr\u003e\n_* Memory Heap: The size of memory the animations requires to execute_\u003cbr\u003e\n_** Memory Allocation: The amount of memory which was allocated during animation runtime_\n\nLibrary Comparison: \u003ca href=\"https://nextapps-de.github.io/fat/\" target=\"_blank\"\u003eBenchmark \"Bouncing Balls\"\u003c/a\u003e\n\n\u003ca name=\"installation\"\u003e\u003c/a\u003e\n## Installation\n\n##### HTML / Javascript\n\n```html\n\u003chtml\u003e\n\u003chead\u003e\n    \u003cscript src=\"fat.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n...\n```\n\u003e __Note:__ Use _fat.min.js_ for production and _fat.js_ for development.\n\nUse latest stable release from CDN:\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/nextapps-de/fat@master/fat.min.js\"\u003e\u003c/script\u003e\n```\n\nUse a specific version from CDN:\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/nextapps-de/fat@0.3.0/fat.min.js\"\u003e\u003c/script\u003e\n```\n\n__Common JS__\n\nIn your code include as follows:\n\n```javascript\nvar Fat = require(\"Fat\");\n```\n\n__AMD__\n\n```javascript\nvar Fat = require(\"./fat.min.js\");\n```\n\n\u003ca name=\"api\"\u003e\u003c/a\u003e\n## API Overview\n\n\u003e The namespace \"Fat\" is also the default scene (global scene).\n\nGlobal methods / Scene methods:\n- \u003ca href=\"#fat.animate\"\u003eFat.__animate__(selector | elements, styles | preset, options, callback)\u003c/a\u003e\n- \u003ca href=\"#transform\"\u003eFat.__transform__(selector | elements, styles, options, callback)\u003c/a\u003e\n- \u003ca href=\"#filter\"\u003eFat.__filter__(selector | elements, styles, options, callback)\u003c/a\u003e\n- \u003ca href=\"#fat.transition\"\u003eFat.__transition__(selector | elements, styles, options, callback)\u003c/a\u003e\n- \u003ca href=\"#fat.native\"\u003eFat.__native__(selector | elements, styles, options, callback)\u003c/a\u003e\n- \u003ca href=\"#fat.destroy\"\u003eFat.__destroy__()\u003c/a\u003e\n\nControl methods:\n- \u003ca href=\"#fat.set\"\u003eScene.__set__(selector | elements, styles, force?)\u003c/a\u003e\n- \u003ca href=\"#fat.set\"\u003eScene.__set__(selector | elements, style, value, force?)\u003c/a\u003e\n- \u003ca href=\"#scene.remove\"\u003eScene.__remove__(selector | elements, styles)\u003c/a\u003e\n- \u003ca href=\"#scene.pause\"\u003eScene.__pause__(boolean: toggle)\u003c/a\u003e\n- \u003ca href=\"#scene.reverse\"\u003eScene.__reverse__(boolean: toggle)\u003c/a\u003e\n- \u003ca href=\"#scene.start\"\u003eScene.__start__(boolean: toggle)\u003c/a\u003e\n- \u003ca href=\"#scene.finish\"\u003eScene.__finish__()\u003c/a\u003e\n- \u003ca href=\"#scene.reset\"\u003eScene.__reset__()\u003c/a\u003e\n- \u003ca href=\"#scene.loop\"\u003eScene.__loop__(int: count)\u003c/a\u003e\n- \u003ca href=\"#scene.shift\"\u003eScene.__shift__(int: ms)\u003c/a\u003e\n- \u003ca href=\"#scene.seek\"\u003eScene.__seek__(float: position)\u003c/a\u003e\n- \u003ca href=\"#scene.speed\"\u003eScene.__speed__(float: ratio)\u003c/a\u003e\n\n\u003ca name=\"options\"\u003e\u003c/a\u003e\n## Scene Options\n\n\u003ctable\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd align=\"left\"\u003eOption\u003c/td\u003e\n        \u003ctd align=\"left\"\u003eType\u003c/td\u003e\n        \u003ctd align=\"left\"\u003eDefault\u003c/td\u003e\n        \u003ctd align=\"left\"\u003eDescription\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd align=\"left\"\u003e\u003cb\u003estart\u003c/b\u003e\u003c/td\u003e\n        \u003ctd align=\"left\"\u003e\u003ci\u003eBoolean\u003c/i\u003e\u003c/td\u003e\n        \u003ctd align=\"left\"\u003etrue\u003c/td\u003e\n        \u003ctd align=\"left\"\u003eEnable/Disable autoplay when an animation call was performed\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd align=\"left\"\u003e\u003cb\u003efps\u003c/b\u003e\u003c/td\u003e\n        \u003ctd align=\"left\"\u003e\u003ci\u003eNumber\u003c/i\u003e\u003c/td\u003e\n        \u003ctd align=\"left\"\u003e60\u003c/td\u003e\n        \u003ctd align=\"left\"\u003eFrames per second\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003ca name=\"options\"\u003e\u003c/a\u003e\n## Animation Options\n\n\u003ctable\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd align=\"left\"\u003eOption\u003c/td\u003e\n        \u003ctd align=\"left\"\u003eType\u003c/td\u003e\n        \u003ctd align=\"left\"\u003eDefault\u003c/td\u003e\n        \u003ctd align=\"left\"\u003eDescription\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd align=\"left\"\u003e\u003cb\u003eduration\u003c/b\u003e\u003c/td\u003e\n        \u003ctd align=\"left\"\u003e\u003ci\u003eNumber\u003c/i\u003e\u003c/td\u003e\n        \u003ctd align=\"left\"\u003e400\u003c/td\u003e\n        \u003ctd align=\"left\"\u003eDuration of the animation (ms).\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd align=\"left\"\u003e\u003cb\u003eease\u003c/b\u003e\u003c/td\u003e\n        \u003ctd align=\"left\"\u003e\u003ci\u003eString | Function\u003c/i\u003e\u003c/td\u003e\n        \u003ctd align=\"left\"\u003e\"linear\"\u003c/td\u003e\n        \u003ctd align=\"left\"\u003eChoose a \u003ca href=\"#easing\"\u003epre-defined easing\u003c/a\u003e method or pass a \u003ca href=\"#easing\"\u003ecustom easing function\u003c/a\u003e.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd align=\"left\"\u003e\u003cb\u003edelay\u003c/b\u003e\u003c/td\u003e\n        \u003ctd align=\"left\"\u003e\u003ci\u003eNumber\u003c/i\u003e\u003c/td\u003e\n        \u003ctd align=\"left\"\u003e0\u003c/td\u003e\n        \u003ctd align=\"left\"\u003eDelay of the animation (ms).\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd align=\"left\"\u003e\u003cb\u003ecallback\u003c/b\u003e\u003c/td\u003e\n        \u003ctd align=\"left\"\u003e\u003ci\u003eFunction\u003c/i\u003e\u003c/td\u003e\n        \u003ctd align=\"left\"\u003enull\u003c/td\u003e\n        \u003ctd align=\"left\"\u003eFunction to be called when the animation is finished.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd align=\"left\"\u003e\u003cb\u003estep\u003c/b\u003e\u003c/td\u003e\n        \u003ctd align=\"left\"\u003e\u003ci\u003eFunction(progress, value)\u003c/i\u003e\u003c/td\u003e\n        \u003ctd align=\"left\"\u003enull\u003c/td\u003e\n        \u003ctd align=\"left\"\u003eFunction 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 \u003ca href=\"#custom\"\u003ecustom properties\u003c/a\u003e).\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd align=\"left\"\u003e\u003cb\u003eloop\u003c/b\u003e\u003c/td\u003e\n        \u003ctd align=\"left\"\u003e\u003ci\u003eNumber\u003c/i\u003e\u003c/td\u003e\n        \u003ctd align=\"left\"\u003e0\u003c/td\u003e\n        \u003ctd align=\"left\"\u003eLoop count of \u003ca href=\"#sequences\"\u003esequences\u003c/a\u003e or \u003ca href=\"#keyframes\"\u003ekeyframes\u003c/a\u003e. Set to \u003ci\u003e-1\u003c/i\u003e for infinite loops.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd align=\"left\"\u003e\u003cb\u003einit\u003c/b\u003e\u003c/td\u003e\n        \u003ctd align=\"left\"\u003e\u003ci\u003eBoolean\u003c/i\u003e\u003c/td\u003e\n        \u003ctd align=\"left\"\u003efalse\u003c/td\u003e\n        \u003ctd align=\"left\"\u003eForces 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).\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd align=\"left\"\u003e\u003cb\u003eforce\u003c/b\u003e\u003c/td\u003e\n        \u003ctd align=\"left\"\u003e\u003ci\u003eBoolean\u003c/i\u003e\u003c/td\u003e\n        \u003ctd align=\"left\"\u003efalse\u003c/td\u003e\n        \u003ctd align=\"left\"\u003eForces style changes (equal to css keyword \"!important\").\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd align=\"left\"\u003e\u003cb\u003estrict\u003c/b\u003e\u003c/td\u003e\n        \u003ctd align=\"left\"\u003e\u003ci\u003eBoolean\u003c/i\u003e\u003c/td\u003e\n        \u003ctd align=\"left\"\u003efalse\u003c/td\u003e\n        \u003ctd align=\"left\"\u003eDo not override and keep different animations acts on same object's style properties.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd align=\"left\"\u003e\u003cb\u003eengine\u003c/b\u003e\u003c/td\u003e\n        \u003ctd align=\"left\"\u003e\u003ci\u003eString\u003c/i\u003e\u003c/td\u003e\n        \u003ctd align=\"left\"\u003e\"js\"\u003c/td\u003e\n        \u003ctd align=\"left\"\u003eChoose one of 3 render engines: \"\u003ci\u003ejs\u003c/i\u003e\", \"\u003ci\u003ecss\u003c/i\u003e\", \"\u003ci\u003enative\u003c/i\u003e\".\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n## Basic Usage\n\u003ca name=\"fat.animate\"\u003e\u003c/a\u003e\n\u003e Fat.__animate__(selector[] | elements[], styles[]{}, options{}, callback)\n\n```js\nFat.animate(\"#mydiv\", { left: \"100px\" },{ /* options */ });\n```\n\n\u003e Pass in an element, an array of elements or a dom query selector.\n\n```js\nFat.animate(\"#mydiv\", { \n    left: \"100px\", \n    top: \"100px\"\n},{ \n    delay: 1000,\n    duration: 2000,\n    ease: \"easeInOut\",\n    callback: function(){ \n        // \"this\" refers to #mydiv\n        console.log(this.style.left);\n    }\n});\n```\n\n\u003e See all available \u003ca href=\"#options\"\u003eoptions\u003c/a\u003e above.\n\nPass in custom options for each style property:\n\n```js\nFat.animate(\"#mydiv\", { \n    left: {\n        from: 0,\n        to: 100,\n        unit: \"%\",\n        duration: 2000,\n        ease: \"linear\"\n    },\n    top: {\n        from: 0,\n        to: \"100%\",\n        duration: 2000,\n        ease: \"quadIn\",\n        delay: 2000\n    }\n});\n```\n\n\u003e Passing a unit parameter is slightly faster.\n\n\"From-To-Unit\" Shortcut `property: [from, to, unit]`:\n```js\nFat.animate(\"#mydiv\", {\n    left: [0, 100, \"%\"], // from 0%  to 100%\n    top: [0, \"100%\"],\n});\n```\n\nAlternatively pass the callback function as the last parameter:\n```js\nFat.animate(\"#mydiv\", { \n    left: \"100px\", \n    top: \"100px\" \n},{ \n    delay: 2000,\n    duration: 2000,\n    ease: \"easeInOut\"\n\n}, function(){\n    \n    // done\n});\n```\n\n```js\nFat.animate(\"#mydiv\", { top: \"100px\" }, function(){\n    // done\n});\n```\n\n```js\nFat.animate(\"#mydiv\", \"slideInTop\", function(){\n    // done\n});\n```\n\nDelay an animation until the target element comes into view (e.g. by scrolling):\n\n```js\nFat.animate(\"#mydiv\", { top: \"100px\" }, { delay: \"view\" });\n```\n\n\u003ca name=\"relative\"\u003e\u003c/a\u003e\n## Relative Values:\n\nCalculate values depending on the current state:\n```js\n// current left + 100px\nFat.animate(\"#mydiv\", { left: \"+=100px\" });\n```\n```js\n// double of current top\nFat.animate(\"#mydiv\", { top: \"*=2\" });\n```\n```js\n// current left - 100px\nFat.animate(\"#mydiv\", { left: \"-=100px\", });\n```\n```js\n// half of current top\nFat.animate(\"#mydiv\", { top: \"/=2\" });\n```\n\nToggle values depending on the current state:\n```js\n// toggle current left (100% or 0%)\nFat.animate(\"#mydiv\", { left: \"!=100%\" });\n```\n\n\u003ca name=\"transform\"\u003e\u003c/a\u003e\n## Transform\n\nSeparate notation provides the best performance:\n```js\nFat.animate(\"#mydiv\", { \n    translateX: \"100px\",\n    translateY: \"100px\"\n});\n```\n\nsame as:\n```js\nFat.transform(\"#mydiv\", { ... });\n```\n\nalternatively:\n```js\nFat.animate(\"#mydiv\", { \n    \"transform\": \"translate(100px, 100px)\"\n});\n```\n\nsame as:\n```js\nFat.transform(\"#mydiv\", \"translate(100px, 100px)\");\n```\n\n\u003ca name=\"colors\"\u003e\u003c/a\u003e\n## Colors\n\n```js\nFat.animate(\"#mydiv\", { \n    color: \"#f00\",\n    backgroundColor: \"rgba(0, 255, 0, 1)\",\n    borderColor: \"hsla(0, 100%, 100%, 1)\"\n});\n```\n\nSeparate notation provides the best performance:\n```js\nFat.animate(\"#mydiv\", { \n    colorR: 0,\n    colorG: 0,\n    colorB: 0,\n    colorA: 0,\n    backgroundColorA: \"100%\",\n    borderColorB: 255\n});\n```\n\n\u003ca name=\"filter\"\u003e\u003c/a\u003e\n## Filter\n\nSeparate notation provides the best performance:\n```js\nFat.animate(\"#mydiv\", { \n    brightness: 0.5,\n    contrast: 0.5,\n    hue: \"180deg\"\n});\n```\n\n\u003e You can use the shorthand `hue` as `hue-rotate`\n\nsame as:\n\n```js\nFat.filter(\"#mydiv\", { ... });\n```\n\nalternatively:\n\n```js\nFat.animate(\"#mydiv\", { \n    \"filter\": \"brightness(0.5) contrast(0.5) hue(180deg)\"\n});\n```\n\nsame as:\n```js\nFat.filter(\"#mydiv\", \"brightness(0.5) contrast(0.5) hue(180deg)\");\n```\n\n\n\u003ca name=\"easing\"\u003e\u003c/a\u003e\n## Easing\n\u003ca name=\"easing-builtin\"\u003e\u003c/a\u003e\nBuilt-in easing:\n\n- linear\n- easeIn, easeOut, easeInOut (refers to: quadIn, quadOut, quadInOut)\n- cubicIn, cubicOut, cubicInOut\n- quartIn, quartOut, quartInOut\n- quintIn, quintOut, quintInOut\n- sineIn, sineOut, sineInOut\n- expoIn, expoOut, expoInOut\n- circIn, circOut, circInOut\n- backIn, backOut, backInOut\n- snap\n\n__Static (Pre-Cached) vs. Dynamic Easing__\n\nThere 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.\n\nWhen 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.\n\nDefine custom static easing function (1-parameter style):\n\n```js\nFat.ease[\"linear\"] = function(x){\n    return x;\n};\n```\n\n\u003e __x__: current progress (0.0 - 1.0)\n\nDefine custom static easing function (4-parameter style):\n\n```js\nFat.ease[\"linear\"] = function(t, b, c, d){\n    return b + (c - b) * (t / d);\n};\n```\n\n\u003e __t__: current time, __b__: from value, __c__: to value, __d__: duration\n\nApply the custom static easing:\n\n```js\nFat.animate(\"#mydiv\", { left: \"100px\" },{ ease: \"linear\" });\n```\n\nUse cubic bezier:\n```js\nFat.animate(\"#mydiv\", { left: \"100px\" },{ ease: \"cubic(0, 1, 0, 1)\" });\n```\n\nShorthand array notation for a bezier is recommended:\n```js\n... ,{ ease: [0, 1, 0, 1] });\n```\n\nDefine custom __dynamic easing__ function (1-parameter style):\n```js\nFat.animate(\"#mydiv\", { left: \"100px\" },{ ease: function(x){\n    // doing some crazy calculations depends on runtime\n    return x;\n}});\n```\n\nDefine custom __dynamic easing__ function (4-parameter style):\n```js\nFat.animate(\"#mydiv\", { left: \"100px\" },{ ease: function(t, b, c, d){\n    // doing some crazy calculations depends on runtime\n    return x;\n}});\n```\n\n\u003ca name=\"custom\"\u003e\u003c/a\u003e\n## Custom Property / Renderer\n\u003e Fat.__animate__(custom_object[]{}, custom_property[]{}, options{})\n\n\u003e __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.\n\nJust add a property with the name \"custom\":\n```js\nFat.animate(\"#mydiv\", { \n    custom: \"50%\" \n},{  \n    ease: \"cubicInOut\", \n    step: function(progress, current){\n        this.style.left = current;\n    }\n});\n```\n\nHandle unit separately:\n```js\nFat.animate(\"#mydiv\", { \n    custom: 50 \n},{ \n    ease: \"cubicInOut\", \n    step: function(progress, current){\n        this.style.left = current + \"%\";\n    }\n});\n```\n\nPass in custom object/function as first parameter instead of an element:\n```js\nFat.animate({ \n    obj: document.getElementById(\"mydiv\") \n},{ \n    custom: 50\n },{\n    ease: \"cubicInOut\",\n    step: function(progress, current){\n        // \"this\" refers to the custom object\n        this.obj.style.left = current + \"%\";\n    }\n});\n```\n\nYou can also use \u003ca href=\"#sequences\"\u003esequences\u003c/a\u003e:\n```js\n... [custom: 50, custom: 0, custom: 100, custom: 0]\n```\n\nThis way it is possible to pass custom data, logic and renderer through each animation job, e.g.:\n```js\nvar handler = {\n    unit: \"%\",\n    obj: document.getElementById(\"mydiv\"),\n    set: function(property, value){ \n        this.obj.style[property] = value + this.unit;\n    }\n};\n\nFat.animate(handler, { custom: 50 },{\n    ease: \"cubicInOut\",\n    step: function(progress, current){\n        // \"this\" refers to handler\n        this.set(\"left\", current);\n    }\n});\n```\n\nYou can also use array of objects/handlers:\n```js\nFat.animate([handler1, handler2, handler3], ...\n```\n\nIf you don't need the from/to transition values at all, another scenario could be:\n```js\nfunction cubicInOut(x) {\n    return ((x *= 2) \u003c= 1 ? x*x*x : (x -= 2) *x*x + 2) / 2;\n}\n\nFat.animate({ ease: cubicInOut },{ custom: true },{\n    step: function(progress){\n        var current = this.ease(progress);\n        // console.log(current);\n    }\n});\n```\n\nalternatively:\n```js\nFat.animate({},{ custom: true },{ step: function(progress){\n    var current = cubicInOut(progress);\n    // console.log(current);\n}});\n```\n\nor:\n```js\nFat.animate({},{ custom: 1 },{\n    ease: cubicInOut, \n    step: function(progress, current){\n        // console.log(current);\n    }\n});\n```\n\n__Tween custom object properties:__\n```js\nfunction draw(){\n    this.obj.style[this.property] = this.value;\n}\n\nvar custom = {\n    value: 0,\n    property: \"left\",\n    obj: document.getElementById(\"#mydiv\")\n};\n\nFat.animate(custom, { value: \"50%\" },{\n    duration: 2000,\n    ease: \"cubicInOut\",\n    step: draw\n});\n```\n\n\u003ca name=\"sequences\"\u003e\u003c/a\u003e\n## Sequences\n\n```js\nFat.animate(\"#mydiv\", [\n    { left: \"100%\" },   // 1st animation, 2000ms\n    { top: \"100%\" },    // 2nd animation, 2000ms\n    { left: 0 },        // 3rd animation, 2000ms\n    { top: 0 }          // 4th animation, 2000ms\n],{\n    callback: function(){ alert(\"Next Loop\") },\n    delay: 2000,\n    loop: -1 // infinite\n});\n```\n\nUse custom options per style property:\n\n```js\nFat.animate(\"#mydiv\", [{   \n    left: { // 1st animation\n        from: 0,\n        to: 100,\n        unit: \"%\",\n        duration: 2000\n    }\n},{   \n    top: { // 2nd animation\n        to: \"100%\",\n        duration: 2000,\n        ease: \"easeInOut\",\n        delay: 0\n    }\n},  \n...\n```\n\n\u003ca name=\"keyframes\"\u003e\u003c/a\u003e\n## Keyframes\n\n```js\nFat.animate(\"#mydiv\", {\n    \"25%\":  { left: \"100%\" },   //  0 -\u003e  25%, 500ms\n    \"50%\":  { top: \"100%\" },    // 25 -\u003e  50%, 500ms\n    \"75%\":  { left: 0 },        // 50 -\u003e  75%, 500ms\n    \"100%\": { top: 0 }          // 75 -\u003e 100%, 500ms\n},{\n    callback: function(){ alert(\"Next Loop\") },\n    delay: 2000,\n    loop: -1 // infinite\n});\n```\n\nUse custom options per style property:\n\n```js\nFat.animate(\"#mydiv\", {\n    \"0%\": {   \n        left: {\n            to: \"100%\",\n            ease: \"easeIn\"\n        }\n    }, \n    \"100%\": {   \n        top: {\n            to: \"0%\",\n            ease: \"easeOut\"\n        }\n    }\n},   \n...\n```\n\n\u003c!--\nYou can also combine Sequences and Keyframes as well as custom options per style property:\n\n```js\nFat.animate(\"#mydiv\", [{\n    \"0%\": {   \n        left: 0,\n        top: 0\n    }, \n    \"100%\": {   \n        left: \"100%\",\n        top: \"100%\"\n    }\n},{\n    \"0%\": {   \n        left: { \n            to: 0, \n            ease: \"easeIn\"\n        },\n        top: { \n            to: 0, \n            ease: \"easeIn\"\n        }\n    }, \n    \"100%\": {   \n        left: { \n            to: \"100%\",\n            ease: \"easeOut\"\n        },\n        top: { \n            to: \"100%\", \n            ease: \"easeOut\"\n        }\n    }\n}],   \n...\n```\n--\u003e\n\n\u003ca name=\"presets\"\u003e\u003c/a\u003e\n## Presets (Effects)\n\n```js\nFat.animate(\"#mydiv\", \"fadeOut\");\n```\n\nCombine multiple presets (ordered):\n\n```js\nFat.animate(\"#mydiv\", \"fadeOut zoomOut rollOutRight\");\n```\n\nAlso usable with \u003ca href=\"#sequences\"\u003esequences\u003c/a\u003e:\n\n```js\nFat.animate(\"#mydiv\", [\"slideInTop\", \"zoomIn\"]);\n```\n\nDefine custom preset:\n```js\nFat.preset[\"fade-out-down\"] = { \n    opacity: 0, \n    translateY: \"100%\"\n};\n```\n\nUse custom preset:\n```js\nFat.animate(\"#mydiv\", \"fade-out-down\");\n```\n\n__Builtin Presets:__\n- fadeIn, fadeOut, fadeToggle\n- slideInLeft, slideOutLeft, slideToggleLeft\n- slideInRight, slideOutRight, slideToggleRight\n- slideInTop, slideOutTop, slideToggleTop\n- slideInBottom, slideOutBottom, slideToggleBottom\n- zoomIn, zoomOut, zoomToggle\n- rollOutRight (clockwise), rollInRight, rollToggleRight\n- rollOutLeft (opposite), rollInLeft, rollToggleLeft\n- blurIn, blurOut, blurToggle\n- scrollUp, scrollDown, scrollLeft, scrollRight\n\n\u003ca name=\"scenes\"\u003e\u003c/a\u003e\n## Scenes (Groups)\n\nGet the global scene (default):\n```js\nvar scene = Fat.animate(element, { left: \"100%\" });\n```\n\nCreate a new scene:\n```js\nvar scene = Fat.create();\n```\n\nAdd animations to a scene:\n```js\nscene.animate(element, { left: \"100%\" });\n```\n\nDestroy scene:\n\u003ca name=\"fat.destroy\"\u003e\u003c/a\u003e\n```js\nscene.destroy();\n```\n\n\u003c!--\nRe-initialize styles before next update:\n\u003ca name=\"fat.init\"\u003e\u003c/a\u003e\n```js\nscene.init();\n```\n--\u003e\n\n__Useful Example__\n\nConsidering the following example:\n```js\nvar scene_1 = Fat.animate(element_1, { left: \"100%\" });\nvar scene_2 = Fat.animate(element_2, { left: \"100%\" });\nvar scene_3 = Fat.animate(element_3, { left: \"100%\" });\n\n// this will also destroy scene_2 and scene_3:\n\nscene_1.destroy();\n```\n\nAll variables points to the same global scene on which is _\"Fat\"_ basically based on.\n\nThis is the correct workaround:\n```js\nvar scene_1 = Fat.create().animate(element_1, { left: \"100%\" });\nvar scene_2 = Fat.create().animate(element_2, { left: \"100%\" });\nvar scene_3 = Fat.create().animate(element_3, { left: \"100%\" });\n\n// this will just destroy scene_1:\n\nscene_1.destroy();\n```\n\n\u003e 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.\n\n\u003ca name=\"controls\"\u003e\u003c/a\u003e\n## Controls\n\n\u003e _Fat_ internally points to default global scene, so you can use all scene methods on _Fat_ accordingly.\n\nUpdate single style:\n\u003ca name=\"fat.set\"\u003e\u003c/a\u003e\n```js\nscene.set(\"#mydiv\", \"left\", \"0%\");\n```\n\nUpdate multiple styles:\n```js\nscene.set(\"#mydiv\", { top: 0, left: 0 });\n```\n\nRemove all animations from an object:\n\u003ca name=\"fat.remove\"\u003e\u003c/a\u003e\n```js\nscene.remove(\"#mydiv\");\n```\n\nRemove a specific animation from an object:\n```js\nscene.remove(\"#mydiv\", \"left\");\n```\n\nRemove a list of specific animations from an object:\n```js\nscene.remove(\"#mydiv\", [\"top\", \"left\"]);\n```\n\nPause a scene:\n\u003ca name=\"scene.pause\"\u003e\u003c/a\u003e\n```js\nscene.pause();\n```\n\nalternatively:\n\u003ca name=\"scene.start\"\u003e\u003c/a\u003e\n```js\nscene.start(false);\n```\n\nPlay a scene:\n```js\nscene.start();\n```\n\nalternatively:\n```js\nscene.pause(false);\n```\n\nRevert playback (toggle):\n\u003ca name=\"scene.reverse\"\u003e\u003c/a\u003e\n```js\nscene.reverse();\n```\n\nalternatively set direction:\n```js\nscene.reverse(false);\n```\n\nReset playback state and jump back to the start:\n\u003ca name=\"scene.reset\"\u003e\u003c/a\u003e\n```js\nscene.reset();\n```\n\nFinish and also execute callback:\n\n```js\nscene.finish();\n```\n\nSet playback speed:\n\u003ca name=\"scene.speed\"\u003e\u003c/a\u003e\n```js\nscene.speed(0.5); // half\nscene.speed(1);   // normal\nscene.speed(2);   // double\nscene.speed(-2);  // double (reversed direction)\n```\n\nSeek a scene to a specific position:\n\u003ca name=\"scene.seek\"\u003e\u003c/a\u003e\n```js\nscene.seek(0);   // start\nscene.seek(0.5); // middle\nscene.seek(1);   // end\n```\n\nShift a scene relative to the current position (by milliseconds):\n\u003ca name=\"scene.shift\"\u003e\u003c/a\u003e\n```js\nscene.shift(2000); // current + 2000 ms\nscene.shift(-500); // current - 500 ms\n```\n\n__Looping Sequences \u0026 Reversed Direction__\n\nWhen looping sequences and also have reversed animation direction (e.g. by setting speed \u003c 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.\n```js\nvar scene = Fat.animate(element, [{\n    left: { from: \"0%\", to: \"50%\" }\n},{\n    left: { from: \"50%\", to: \"0%\" }\n}],{\n    loop: -1\n});\n\nscene.reverse();\n```\n\nalternatively use from-to-unit shorthand:\n\n```js\nvar scene = Fat.animate(element, [{\n    left: [0, 50, \"%\"]\n},{\n    left: [50, 0, \"%\"]\n}],{\n    loop: -1\n});\n\nscene.reverse();\n```\n\nalternatively use relative toggle:\n\n```js\nvar scene = Fat.animate(element, [{\n    left: \"!=50%\"\n},{\n    left: \"!=0%\"\n}],{\n    loop: -1\n});\n\nscene.reverse();\n```\n\n\u003ca name=\"scroll\"\u003e\u003c/a\u003e\n## Scroll\n\n\u003c!--\n\u003e Use `document` to scroll the body of the page or pass a custom element or a selector.\n--\u003e\n\nScroll document/element to a specific position (vertically):\n```js\nFat.animate(element, { scrollTop: 500 });\n```\n\nScroll horizontally:\n```js\nFat.animate(element, { scrollLeft: 500 });\n```\n\nScroll in both directions `scroll: [x, y]`:\n```js\nFat.animate(element, { scroll: [500, 500] });\n```\n\nUse relative values:\n```js\nFat.animate(element, { scroll: \"+=50\" });\n```\n\n\u003c!--\nScroll to an element:\n```js\nFat.animate(document, { scroll: \"#mydiv\" });\n```\n\nScroll to an element and apply an offset:\n```js\nFat.animate(document, { scroll: \"#mydiv\", offset: 50 });\n```\n--\u003e\n\n\u003c!--\n__Control animations via scroll__:\n\n\u003e This features requires `SUPPORT_CONTROL=true`\n\n```js\nFat.animate(element, { top: 500 }, { scroll: \"#mydiv\" });\n```\n--\u003e\n\n\u003ca name=\"paint\"\u003e\u003c/a\u003e\n## Paint\n\nSchedule a task to perform during next animation frame:\n\n```js\nFat.paint(function(time){\n\n    console.log(\"Now: \" + time);\n});\n```\n\nSchedule a task with a delay and keep the paint id:\n\n```js\nvar id = Fat.paint(function(time){\n\n    console.log(\"Now: \" + time);\n    \n}, 2000);\n```\n\nRemove the above scheduled task from the queue:\n\n```js\nFat.cancel(id);\n```\n\nLoop a task with every animation frame:\n\n```js\nFat.paint(function(time){\n\n    console.log(\"Now: \" + time);\n    return true;\n});\n```\n\n\u003e Just return _true_ to keep the loop alive. Return _false_ or return nothing to break the loop.\n\n\u003ca name=\"init\"\u003e\u003c/a\u003e\n## Init (Options)\n\nConsidering the following example:\n```js\nFat.animate(element, { top: \"100%\" }, function(){\n    \n    this.style.top = 0; // this style change will be shadowed\n    \n    Fat.animate(this, { top: \"100%\" });\n});\n```\n\nThis 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.\n\n\u003e During the callback, external changes on the __same__ style property which is going to be animated will be shadowed by the animation loop inheritance.\n\nWhen the style change did not happened externally (e.g. by a different tool) use _set_ method to get best performance:\n```js\nFat.animate(element, { top: \"100%\" }, function(){\n    \n    Fat.set(this, \"top\", 0).animate(this, { top: \"100%\" });\n});\n```\n\nOtherwise, to solve this situation you have to add the _init_ option:\n```js\nFat.animate(element, { top: \"100%\" }, function(){\n    \n    this.style.top = 0; // external change somewhere happens\n    \n    Fat.animate(this, { top: \"100%\" }, { init: true });\n});\n```\n\nAgain, 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.\n\n\u003ca name=\"strict\"\u003e\u003c/a\u003e\n## Strict (Options)\n\nConsidering the following example:\n```js\nFat.animate(\"#mydiv\", { top: \"100%\" }, { duration: 2000 }, function(){\n    console.log(\"long\");\n});\n\n// next animation will override the above one:\n\nFat.animate(\"#mydiv\", { top: \"100%\" }, { duration: 400 }, function(){\n    console.log(\"short\");\n});\n```\n\nWhen 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\".\n\nTo force duped animations you have to add the _strict_ option:\n```js\n// this animation cannot be overridden:\n\nFat.animate(\"#mydiv\", { top: \"100%\" }, { duration: 2000, strict: true }, function(){\n    console.log(\"long\");\n});\n\nFat.animate(\"#mydiv\", { top: \"100%\" }, { duration: 400 }, function(){\n    console.log(\"short\");\n});\n```\n\nNow 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.\n\n\u003ca name=\"force\"\u003e\u003c/a\u003e\n## Force (Options)\n\nConsidering the following example:\n```css\n#mydiv{ top: 0px !important }\n```\n```js\nFat.animate(\"#mydiv\", { top: \"100%\" });\n```\n\nThe css style declaration from above has the keyword _!important_ and is preventing normal style changes.\n\nTo solve this you have to add the _force_ option:\n\n```js\nFat.animate(\"#mydiv\", { top: \"100%\" }, { force: true });\n```\n\n\u003ca name=\"engine\"\u003e\u003c/a\u003e\n## Render Engines\n\n\u003e These is an experimental feature. All engines are stand-alone, you can make a custom build just with your favorite pick.\n\n\u003ctable\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eEngine\u003c/td\u003e\n        \u003ctd\u003ejs\u003c/td\u003e\n        \u003ctd\u003ecss\u003c/td\u003e\n        \u003ctd\u003enative\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eRenderer\u003c/td\u003e\n        \u003ctd\u003eJavascript (Default)\u003c/td\u003e\n        \u003ctd\u003eCSS Transition\u003c/td\u003e\n        \u003ctd\u003eWeb Animation API\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\nUse CSS Transitions:\n\u003ca name=\"fat.transition\"\u003e\u003c/a\u003e\n\n```js\nFat.transition(\"#mydiv\", { \n    left: \"100px\",\n    top: \"100px\"\n},{ \n    delay: 1000,\n    duration: 2000,\n    ease: \"easeInOut\",\n    callback: function(){ \n        // done\n        console.log(this.style.left);\n    }\n});\n```\n\nUse Web Animation API:\n\u003ca name=\"fat.native\"\u003e\u003c/a\u003e\n\n```js\nFat.native(\"#mydiv\", { \n    left: \"100px\",\n    top: \"100px\"\n},{ \n    delay: 1000,\n    duration: 2000,\n    ease: \"easeInOut\",\n    callback: function(){ \n        // done\n        console.log(this.style.left);\n    }\n});\n```\n\n\u003ca name=\"debug\"\u003e\u003c/a\u003e\n## Debug\n\n\u003e Do not use DEBUG in production builds.\n\nIf you get issues, you can temporary set the _DEBUG_ flag to _true_ on top of _fat.js_:\n\n```js\nDEBUG = true;\n```\n\nThis enables console logging of several processes. Just open the browsers console to make this information visible.\n\n\u003ca name=\"profile\"\u003e\u003c/a\u003e\n## Profiler Stats\n\n\u003e Do not use PROFILER in production builds.\n\nTo collect some performance statistics of your scenes you need to temporary set the _PROFILER_ flag to _true_ on top of _fat.js_:\n\n```js\nPROFILER = true;\n```\n\nThis enables profiling of several processes.\n\nAn array of all profiles is available on:\n\n```js\nwindow.stats;\n```\n\nYou can also just open the browsers console and enter this line to get stats.\n\n\u003e The index of the array corresponds to the _scene.id_.\n\nGet stats from a specific scene:\n\n```js\nscene.stats;\n```\n\nThe returning stats payload is divided into several categories. Each of these category provides its own statistic values.\n\n__Profiler Stats Properties__\n\u003ctable\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eProperty\u003c/td\u003e\n        \u003ctd\u003eDescription\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003etime\u003c/td\u003e\n        \u003ctd\u003eThe sum of time (ms) the process takes (lower is better)\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003ecount\u003c/td\u003e\n        \u003ctd\u003eHow often the process was called\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eops\u003c/td\u003e\n        \u003ctd\u003eAverage operations per seconds (higher is better)\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003enano\u003c/td\u003e\n        \u003ctd\u003eAverage cost (ns) per operation/call (lower is better)\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003ca name=\"builds\"\u003e\u003c/a\u003e\n## Custom Builds\n\n\u003e You need Node.js including Node Package Manager (NPM)\n\nInstall Dependencies:\n```bash\nnpm install\n```\n\nFull Build:\n```bash\nnpm run build\n```\n\nLight Build:\n```bash\nnpm run build-light\n```\n\nCompact Build:\n```bash\nnpm run build-compact\n```\n\nCustom Build:\n```bash\nnpm run build-custom SUPPORT_EASE_IN_CUBIC=true SUPPORT_CONTROL=true\n```\n\n\u003e On custom builds each build flag will be set to _false_ by default.\n\nAlternatively (Custom Build):\n```bash\nnode compile support_control=true\n```\n\n\u003e The custom build will be saved to fat.custom.xxxxx.js (the \"xxxxx\" is a hash based on the used build flags).\n\n__Supported Build Flags__\n\n\u003ctable\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd align=\"left\"\u003eFlag\u003c/td\u003e\n        \u003ctd align=\"left\"\u003eValues\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003ca href=\"#colors\"\u003eSUPPORT_COLOR\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003etrue, false\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003ca href=\"#controls\"\u003eSUPPORT_CONTROL\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003etrue, false\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003ca href=\"#sequences\"\u003eSUPPORT_SEQUENCE\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003etrue, false\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003ca href=\"#transform\"\u003eSUPPORT_TRANSFORM\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003etrue, false\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003ca href=\"#filter\"\u003eSUPPORT_FILTER\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003etrue, false\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003ca href=\"#scroll\"\u003eSUPPORT_SCROLL\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003etrue, false\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003ca href=\"#paint\"\u003eSUPPORT_PAINT\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003etrue, false\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003ca href=\"#relative\"\u003eSUPPORT_RELATIVE\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003etrue, false\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003ca href=\"#strict\"\u003eSUPPORT_CONCURRENCY\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003etrue, false\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003ca href=\"#easing\"\u003eSUPPORT_EASING\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003etrue, false\u003c/td\u003e\n    \u003c/tr\u003e\n        \u003ctr\u003e\u003c/tr\u003e\n        \u003ctr\u003e\n        \u003ctd\u003e\u003ca href=\"#presets\"\u003eSUPPORT_PRESET\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003etrue, false\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003ca href=\"#engine\"\u003eSUPPORT_ENGINE\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003ci\u003estring:\u003c/i\u003e \"all\", \"js\", \"css\", \"native\" / \"waapi\"\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003ca href=\"#animate\"\u003eSUPPORT_ANIMATE\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003etrue, false (overrides SUPPORT_ENGINE)\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003ca href=\"#transition\"\u003eSUPPORT_TRANSITION\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003etrue, false (overrides SUPPORT_ENGINE)\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003ca href=\"#native\"\u003eSUPPORT_NATIVE\u003c/a\u003e\u003c/td\u003e\n        \u003ctd\u003etrue, false (overrides SUPPORT_ENGINE)\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003e\u003cbr\u003e\u003cb\u003eLanguage-Out Flags\u003c/b\u003e\u003c/td\u003e\n        \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eLANGUAGE_OUT\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\u003c/td\u003e\n        \u003ctd\u003eECMASCRIPT3\u003cbr\u003eECMASCRIPT5\u003cbr\u003eECMASCRIPT5_STRICT\u003cbr\u003eECMASCRIPT6\u003cbr\u003eECMASCRIPT6_STRICT\u003cbr\u003eECMASCRIPT_2015\u003cbr\u003eECMASCRIPT_2017\u003cbr\u003eSTABLE\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n---\n\nCopyright 2019 Nextapps GmbH\u003cbr\u003e\nReleased under the \u003ca href=\"http://www.apache.org/licenses/LICENSE-2.0.html\" target=\"_blank\"\u003eApache 2.0 License\u003c/a\u003e\u003cbr\u003e\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnextapps-de%2Ffat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnextapps-de%2Ffat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnextapps-de%2Ffat/lists"}