{"id":13700236,"url":"https://github.com/szynszyliszys/repaintless","last_synced_at":"2025-05-16T13:07:35.496Z","repository":{"id":50146926,"uuid":"52024543","full_name":"szynszyliszys/repaintless","owner":"szynszyliszys","description":"Library for fast CSS Animations","archived":false,"fork":false,"pushed_at":"2021-01-24T23:52:56.000Z","size":114,"stargazers_count":962,"open_issues_count":4,"forks_count":45,"subscribers_count":25,"default_branch":"master","last_synced_at":"2025-05-09T11:01:54.365Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://szynszyliszys.github.io/repaintless/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/szynszyliszys.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.MD","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-02-18T17:17:15.000Z","updated_at":"2025-03-25T12:10:59.000Z","dependencies_parsed_at":"2022-08-31T00:01:25.798Z","dependency_job_id":null,"html_url":"https://github.com/szynszyliszys/repaintless","commit_stats":null,"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/szynszyliszys%2Frepaintless","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/szynszyliszys%2Frepaintless/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/szynszyliszys%2Frepaintless/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/szynszyliszys%2Frepaintless/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/szynszyliszys","download_url":"https://codeload.github.com/szynszyliszys/repaintless/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253540626,"owners_count":21924522,"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-08-02T20:00:51.555Z","updated_at":"2025-05-16T13:07:35.467Z","avatar_url":"https://github.com/szynszyliszys.png","language":"CSS","funding_links":[],"categories":["CSS","📦 Legacy \u0026 Inactive Projects","Frameworks / Resources"],"sub_categories":["R"],"readme":"# Repaintless.css - making animations fast\n\n[![CDNJS](https://img.shields.io/cdnjs/v/Repaintless.css.svg)](https://cdnjs.com/libraries/Repaintless.css)\n\nRepaintless.css in a lightweight animation library that consists only of animations that don't cause reflows and repaints of a website when used correctly. The idea for a library came after seeing the talk by [Paul Lewis](https://twitter.com/aerotwist) on animations and FLIP technique. Basic idea is to remove transition from element, not to apply it while animating. It saves user a tiny lag before animation starts and feels super smooth. To understand the concept better you can read [a blog post on that](https://aerotwist.com/blog/flip-your-animations/) or at least this quote from the post:\n\n\u003e The reason you can afford to do this relatively expensive precalculation is because there is a window of 100ms after someone interacts with your site where you’re able to do work without them noticing. If you’re inside that window users will feel like the site responded instantly! It’s only when things are moving that you need to maintain 60fps.\n\n## Demo\n\n[There is a demo page for the library.](http://szynszyliszys.github.io/repaintless/)\n\n## Download\n\nDownload repaintless.css file from repaintless-css directory and include in website's head section:\n\n```html\n\u003chead\u003e\n  \u003clink href=\"path-to-css-directory/repaintless.css\" rel=\"stylesheet\"\u003e\u003c/link\u003e\n\u003c/head\u003e\n```\n\nYou can also get it by npm:\n\n```sh\n$ npm install repaintless\n```\n\nOr by Bower:\n\n```sh\n$ bower install repaintless\n```\n\n\n## How to use\n\nAll you need to do is add class \"element-animated\" and the second class with chosen animation name, eg.:\n\n```html\n\u003cdiv class=\"element-animated tremble\"\u003e I tremble! \u003c/div\u003e\n```\n\nDefault timing of an animation is one second. You can have an animation that has 0.5s by adding class \"short\" or 2s animation by adding class \"long\". Also, you can make it infinite by adding \"infinite\" class. See how these work:\n\n```html\n\u003cdiv class=\"element-animated slide-from-top short\"\u003e I am quick! \u003c/div\u003e\n\n\u003cdiv class=\"element-animated slide-from-top long\"\u003e I am slooow... \u003c/div\u003e\n\n\u003cdiv class=\"element-animated slide-from-top infinite\"\u003e I will do that forever to drive you crazy! \u003c/div\u003e\n```\n\n## Customization\n\nFor now there is no gulp task for that. To get few out of all animations you need to edit [repaintless.scss](https://github.com/szynszyliszys/repaintless/blob/master/app/scss/repaintless.scss) file and leave there @import declarations for wanted animations only. After that use gulp build task to create css file.\n\nYou can also easily change the offset value for animated elements. Each animation has its own scss  variable in the same file, right at the top. Names always follow the key $animation-name-offset: value;\n\n## List of animations\n\nAll possible animations are listed here. Some of them are looped by default and it is always mentioned next to the name. Hopefully the list of animations will get longer and longer.\n\n- slide-from-top\n- slide-from-bottom\n- slide-from-left\n- slide-from-right\n- slide-from-right-bottom\n- slide-from-right-top\n- slide-from-left-bottom\n- slide-from-left-top\n- slide-top-bottom (looped)\n- slide-left-right (looped)\n- tremble (looped)\n- fade-in\n- fade-out\n- pulsate (looped)\n- rotate\n- rotate-slide-from-right\n- rotate-slide-from-left\n- rotate-slide-from-top\n- rotate-slide-from-bottom\n- appear-from-right\n- appear-from-left\n- appear-from-top\n- appear-from-bottom\n\n## Changelog\n\nCheck what was changed in the newest version in the [Changelog](https://github.com/szynszyliszys/repaintless/blob/master/CHANGELOG.md).\n\n## License\n\nThe library is licensed under [The MIT License (MIT)](http://choosealicense.com/licenses/mit/).\n\nGo to [Lunar Logic website](http://www.lunarlogic.io/) to learn more [about us](http://www.lunarlogic.io/company) and [our work](http://www.lunarlogic.io/portfolio).\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fszynszyliszys%2Frepaintless","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fszynszyliszys%2Frepaintless","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fszynszyliszys%2Frepaintless/lists"}