{"id":13393959,"url":"https://github.com/aholachek/mobile-first-animation","last_synced_at":"2025-05-16T00:07:18.978Z","repository":{"id":40005153,"uuid":"213082174","full_name":"aholachek/mobile-first-animation","owner":"aholachek","description":"Gesture-driven animation on the mobile web (React Conf 2019)","archived":false,"fork":false,"pushed_at":"2020-04-20T12:33:23.000Z","size":24130,"stargazers_count":2073,"open_issues_count":0,"forks_count":95,"subscribers_count":29,"default_branch":"master","last_synced_at":"2025-04-08T13:01:55.228Z","etag":null,"topics":["animation","gestures","mobile-first","mobile-web","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/aholachek.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-10-05T22:57:57.000Z","updated_at":"2025-04-01T18:44:45.000Z","dependencies_parsed_at":"2022-06-26T06:02:16.286Z","dependency_job_id":null,"html_url":"https://github.com/aholachek/mobile-first-animation","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aholachek%2Fmobile-first-animation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aholachek%2Fmobile-first-animation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aholachek%2Fmobile-first-animation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aholachek%2Fmobile-first-animation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aholachek","download_url":"https://codeload.github.com/aholachek/mobile-first-animation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254442854,"owners_count":22071878,"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":["animation","gestures","mobile-first","mobile-web","reactjs"],"created_at":"2024-07-30T17:01:03.791Z","updated_at":"2025-05-16T00:07:13.942Z","avatar_url":"https://github.com/aholachek.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Mobile First Animation in React\n\n\u003ca href=\"https://codesandbox.io/s/github/aholachek/mobile-first-animation\"\u003e\n\u003cimg src=\"./demos/tabs.gif\" alt=\"swipeable tabs\" height=\"350px\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://codesandbox.io/s/github/aholachek/mobile-first-animation\"\u003e\n\u003cimg src=\"./demos/music-drawer-android.gif\" alt=\"an animated drawer inspired by the Apple Music app\" height=\"350px\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://codesandbox.io/s/github/aholachek/mobile-first-animation\"\u003e\n\u003cimg src=\"./demos/image-grid-android.gif\" alt=\"animated grid of images\" height=\"350px\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://codesandbox.io/s/github/aholachek/mobile-first-animation\"\u003e\n\u003cimg src=\"./demos/email-list-android.gif\" alt=\"dismissable email list\" height=\"350px\"\u003e\n\u003c/a\u003e\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n[View this repo as a live demo in CodeSandbox.](https://codesandbox.io/s/github/aholachek/mobile-first-animation)\n\n## React Conf 2019 Talk\n\nThis repo contains the source code of the demos for [this talk about mobile animation](https://www.youtube.com/watch?v=JDDxR1a15Yo\u0026feature=youtu.be\u0026t=10664).\n\n[The interactive slides for the talk can be found here.](http://mobile-first-animation.netlify.com)\n\n## Springs Playground\n\n\u003ca href=\"https://spring-playground.netlify.com/\"\u003e\n\u003cimg src=\"./demos/spring-demo.png\" width=\"400px\"\u003e\n\u003c/a\u003e\n\nYou can play with the [spring demo from the talk here.](https://spring-playground.netlify.com/)\n\n## Notes:\n\n- If you find any bugs or UI inconsistencies, please make an issue!\n- These are animation demos and as such they are not production-ready UI code. They are not fully accessible, and don't have desktop variants.\n- Adhering to animation best practices can ensure that animations perform acceptably on newer \"average\", sub-$200 devices. However, there are some devices (older or very inexpensive phones) that will have difficulties achieving minimally acceptable animation performance. Make sure to test your animations on the phones of your target audience before committing to add them.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faholachek%2Fmobile-first-animation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faholachek%2Fmobile-first-animation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faholachek%2Fmobile-first-animation/lists"}