{"id":15387581,"url":"https://github.com/nicolasdelfino/tracks","last_synced_at":"2026-02-27T04:05:09.621Z","repository":{"id":48024614,"uuid":"167263457","full_name":"nicolasdelfino/tracks","owner":"nicolasdelfino","description":"A minimalistic library for animating elements as they mount / unmount.","archived":false,"fork":false,"pushed_at":"2023-01-03T16:07:04.000Z","size":400,"stargazers_count":4,"open_issues_count":10,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-15T20:16:17.170Z","etag":null,"topics":["animation-library","inject-css","mutation-observer"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nicolasdelfino.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-01-23T22:23:29.000Z","updated_at":"2023-11-19T09:34:47.000Z","dependencies_parsed_at":"2023-02-01T07:31:35.031Z","dependency_job_id":null,"html_url":"https://github.com/nicolasdelfino/tracks","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"purl":"pkg:github/nicolasdelfino/tracks","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicolasdelfino%2Ftracks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicolasdelfino%2Ftracks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicolasdelfino%2Ftracks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicolasdelfino%2Ftracks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nicolasdelfino","download_url":"https://codeload.github.com/nicolasdelfino/tracks/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicolasdelfino%2Ftracks/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29884515,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-26T23:51:21.483Z","status":"online","status_checked_at":"2026-02-27T02:00:06.759Z","response_time":57,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-library","inject-css","mutation-observer"],"created_at":"2024-10-01T14:54:10.871Z","updated_at":"2026-02-27T04:05:09.606Z","avatar_url":"https://github.com/nicolasdelfino.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"/logo.png\" width=\"300\"\u003e\n\u003c/p\u003e\n\n# tracks.js\n\n### Description:\n\nTracks animates DOM elements from one state to another by temporarily injecting styles (Tracks.fromTo), its real strength is its capability to listen to the creation and deletion of DOM elements by using the MutationObserver API (Tracks.on).\n\n##### 2.61kb gzipped \n\n### CodeSandbox demo\nhttps://codesandbox.io/s/2j323l98j\n\n### Methods\n\n##### Tracks.on (selector / mount fn -\u003e el / unmount fn -\u003e el)\nCan be used in two ways, if you don't need to latch on the unmount hook just return the fromTo animation:\n```js\nTracks.on(\n  selector,\n  async el =\u003e {\n    await Tracks.fromTo(el, stateA, stateB, 0.5);\n    console.log('Tracks - add animation complete!');\n  },\n  el =\u003e Tracks.fromTo(el, stateB, stateA, 0.5), // \u003c- return animation to Tracks\n);\n````\n\nIf you do care, return an object that contains an animation property and an onComplete method:\n```js\nTracks.on(\n  selector,\n  async el =\u003e {\n    await Tracks.fromTo(el, stateA, stateB, 0.5);\n    console.log('Tracks - add animation complete');\n  },\n  el =\u003e ({\n    animation: Tracks.fromTo(el, stateB, stateA, 0.5),\n    onComplete: () =\u003e {\n      console.log('Tracks - external - on complete done');\n    },\n  }),\n);\n````\n\n##### Tracks.fromTo\nAnimates an element from one state to another\n\n```js\n// states\nconst stateA = { width: 0, height: 0, opacity: 0 };\nconst stateB = { width: 100, height: 100, opacity: 1 };\n\nTracks.fromTo(selector, stateB, stateA, 0.5)\n````\n\n##### Tracks.reverse\nReverse the latest animation made with Tracks (flips states).\n\n##### Tracks.getList\nOutputs elements that have been animated with Tracks.\n\n### Config (optional)\nA config may be provided to output internal Tracks logs or to set the default ease (default is linear)\n\n```js\nwindow.TracksConfig = {\n  logs: true / false,\n  ease: 'easeOutQuint',\n};\n````\n### Supported easing values \nlinear\neaseInSine\neaseOutSine\neaseInOutSine\neaseInQuad\neaseOutQuad\neaseInOutQuad\neaseInCubic\neaseOutCubic\neaseInOutCubic\neaseInQuart\neaseOutQuart\neaseInOutQuart\neaseInQuint\neaseOutQuint\neaseInOutQuint\neaseInExpo\neaseOutExpo\neaseInOutExpo\neaseInCirc\neaseOutCirc\neaseInOutCirc\neaseInBack\neaseOutBack\neaseInOutBack\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicolasdelfino%2Ftracks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnicolasdelfino%2Ftracks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicolasdelfino%2Ftracks/lists"}