{"id":21891404,"url":"https://github.com/pitpik/animate","last_synced_at":"2026-04-09T21:07:11.580Z","repository":{"id":141376155,"uuid":"146444519","full_name":"PitPik/animate","owner":"PitPik","description":"JS library converting extended css syntax to JS animations","archived":false,"fork":false,"pushed_at":"2020-05-02T10:22:25.000Z","size":6,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-22T03:14:21.026Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/PitPik.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-08-28T12:31:08.000Z","updated_at":"2023-07-31T04:47:25.000Z","dependencies_parsed_at":null,"dependency_job_id":"99293a72-f4cb-4db7-a61a-34a583cfe7e0","html_url":"https://github.com/PitPik/animate","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/PitPik/animate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PitPik%2Fanimate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PitPik%2Fanimate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PitPik%2Fanimate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PitPik%2Fanimate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PitPik","download_url":"https://codeload.github.com/PitPik/animate/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PitPik%2Fanimate/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264149309,"owners_count":23564440,"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-11-28T12:35:42.067Z","updated_at":"2026-04-09T21:07:11.552Z","avatar_url":"https://github.com/PitPik.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# What is animate\n\nAnimate is a little library that enables high performance animations/transitions in JS using a slightly modified CSS syntax. \"slightly modified\" means that you can use the known syntax that you would use in a CSS file with a little modification that enables transitions from start to end like' \"height: 0px =\u003e 100px\".\n\nThe values for the style are extended by an arrow followed by the desired end value. The arrow can be a fat arrow \"=\u003e\" if the values should be rounded to an integer while rendering, or a regular arrow \"-\u003e\" if the values can be of type float.\n\nAnimation length, easing and various callbacks, together with the style settings, can be set when calling one of the animate methods \"queue\" or \"animate\".\n\n\n## Example\n\n\n```HTML\n\u003cdiv class=\"animate\"\u003eClick me!\u003c/div\u003e\n\n\u003cscript\u003e\n  const anim = new Animate({ speed: 1 });\n  const elm = document.querySelector('.animate');\n\n  elm.addEventListener('click', e =\u003e anim.animate(elm,\n    'position: absolute;' +\n    'left: 0px =\u003e 100px;' +\n    'top: 0px =\u003e 200px;' +\n    'opacity: .3 -\u003e 1;' +\n    'transform: rotate(0deg =\u003e 360deg)'\n  ));\n\u003c/script\u003e\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpitpik%2Fanimate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpitpik%2Fanimate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpitpik%2Fanimate/lists"}