{"id":13483938,"url":"https://github.com/googlearchive/flipjs","last_synced_at":"2025-03-27T15:30:42.889Z","repository":{"id":146872511,"uuid":"49600965","full_name":"googlearchive/flipjs","owner":"googlearchive","description":"A helper library for doing FLIP animations.","archived":true,"fork":false,"pushed_at":"2017-10-17T05:58:22.000Z","size":445,"stargazers_count":1414,"open_issues_count":14,"forks_count":90,"subscribers_count":43,"default_branch":"master","last_synced_at":"2024-07-31T02:20:14.058Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://aerotwist.com/blog/flip-your-animations","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/googlearchive.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2016-01-13T20:50:44.000Z","updated_at":"2024-07-29T02:51:15.000Z","dependencies_parsed_at":"2024-01-13T10:42:21.445Z","dependency_job_id":"ea213713-9438-4b86-881a-0b0f5bcc8d65","html_url":"https://github.com/googlearchive/flipjs","commit_stats":null,"previous_names":["googlechrome/flipjs"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googlearchive%2Fflipjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googlearchive%2Fflipjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googlearchive%2Fflipjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googlearchive%2Fflipjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/googlearchive","download_url":"https://codeload.github.com/googlearchive/flipjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245871692,"owners_count":20686248,"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":[],"created_at":"2024-07-31T17:01:17.091Z","updated_at":"2025-03-27T15:30:42.477Z","avatar_url":"https://github.com/googlearchive.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# FLIP.js\n\nA helper library for [FLIP animations](https://aerotwist.com/blog/flip-your-animations).\n\n[![FLIP Demos](https://cloud.githubusercontent.com/assets/617438/12309072/8be03324-ba40-11e5-8f6c-0e5c04f87336.png)](http://googlechrome.github.io/flipjs/)\n\nFLIP is an approach to animations that remaps animating expensive properties, like width, height, left and top to significantly cheaper changes using transforms. It does this by taking two snapshots, one of the element's **First** position (F), another of its **Last** position (L). It then uses a transform to **Invert** (I) the element's changes, such that the element appears to still be in the First position. Lastly it **Plays** (P) the animation forward by removing the transformations applied in the Invert step.\n\n## Usage\n\nYou can use the FLIP helper on its own, like this:\n\n```javascript\nlet flip = new FLIP({\n  element: target,\n  duration: 2000\n});\n\n// First position \u0026 opacity.\nflip.first();\n\n// Apply the 'end' class and snapshot the last position \u0026 opacity.\nflip.last('end');\n\n// Move and fade the element back to the original position.\nflip.invert();\n\n// Play it forwards.\nflip.play();\n```\n\n### Using GSAP.\n\nIf you've already got [GSAP](http://greensock.com/gsap) in place, you may wish for it to handle playback. In which case, you can declare that in the config object:\n\n```javascript\nlet flip = new FLIP({\n  element: target,\n  duration: 2000,\n  play: 'GSAP'\n});\n```\n\n### Specifying timing functions\n\nYou can either specify your own function, or, if you're using GSAP, you can use its easing functions:\n\n```javascript\n// Declare an easing function directly.\nlet flip = new FLIP({\n  element: target,\n  easing: function (t) {\n    return t * t;\n  }\n});\n\n// ... or declare an easing function from GSAP.\nlet flip = new FLIP({\n  element: target,\n  easing: Bounce.easeOut\n});\n```\n\n## Documentation \u0026 Demos\n\n  * [Demos](https://googlechrome.github.io/flipjs/) - There are more to make :)\n  * [API docs](https://googlechrome.github.io/flipjs/docs/FLIP.html).\n\n## New to FLIP?\n\nFor more background info take a look at [the FLIP intro](https://aerotwist.com/blog/flip-your-animations) post.\n\nLicense: Apache 2.0 - See [/LICENSE](/LICENSE).\n\nAuthor: paullewis.\n\nPlease note: this is not an official Google product.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgooglearchive%2Fflipjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgooglearchive%2Fflipjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgooglearchive%2Fflipjs/lists"}