{"id":19076118,"url":"https://github.com/gapur/react-auto-animate","last_synced_at":"2026-05-14T22:05:13.266Z","repository":{"id":192405725,"uuid":"686638419","full_name":"Gapur/react-auto-animate","owner":"Gapur","description":"Animate your components using AutoAnimate with one line  🪄","archived":false,"fork":false,"pushed_at":"2023-09-27T19:57:13.000Z","size":1170,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-22T05:17:34.253Z","etag":null,"topics":["animate","animation","autoanimate","javascript","react","reactjs"],"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/Gapur.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}},"created_at":"2023-09-03T13:11:54.000Z","updated_at":"2023-09-27T19:30:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"6f25c3f7-6805-4948-b4af-bad12bf10067","html_url":"https://github.com/Gapur/react-auto-animate","commit_stats":null,"previous_names":["gapur/react-auto-animate"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Gapur/react-auto-animate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gapur%2Freact-auto-animate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gapur%2Freact-auto-animate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gapur%2Freact-auto-animate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gapur%2Freact-auto-animate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Gapur","download_url":"https://codeload.github.com/Gapur/react-auto-animate/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gapur%2Freact-auto-animate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33045149,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-13T13:14:54.681Z","status":"online","status_checked_at":"2026-05-14T02:00:06.663Z","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":["animate","animation","autoanimate","javascript","react","reactjs"],"created_at":"2024-11-09T01:57:10.738Z","updated_at":"2026-05-14T22:05:13.251Z","avatar_url":"https://github.com/Gapur.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg width=\"620px\"src=\"https://raw.githubusercontent.com/Gapur/react-auto-animate/main/src/assets/auto-animate.png\"\u003e\n\u003c/p\u003e\n\n# React AutoAnimate\n\nThe Future of Web Animation with AutoAnimate\n\nAnimate your components with one line\n\nAnimation plays a vital role in bringing your app to life and memorable, but unfortunately, it takes time, which is frustrating.\n\nWhat if I told you that you can easily animate any of your components with a single line of code? It’s right. You can do this with the [AutoAnimate](https://auto-animate.formkit.com/#installation) library.\n\n## What is AutoAnimate?\n[AutoAnimate](https://github.com/formkit/auto-animate) is an easy-to-use, zero-config animation utility that adds smooth transitions to your web app. You can use it with React, Solid, Vue, Svelte, Angular or any other JavaScript app.\n\nAs a software engineer, you need to work on various tasks within specific deadlines. For instance, when dealing with a list, you need to add or remove an element from it. Eventually, without animation the element appears or immediately disappears, it makes our component clunky.\n\nHow we can solve it? We can use some kind of animation library, but we need to install, configure and learn how to use it. On the other hand, we can add our own CSS animation. Unfortunately this takes more time. Time for us is money.\n\nThis is where AutoAnimate library comes to play. We can animate any our components with one line of code. This is true and fantastic.\n\nLet’s take a look at a couple of examples.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgapur%2Freact-auto-animate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgapur%2Freact-auto-animate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgapur%2Freact-auto-animate/lists"}