{"id":21174885,"url":"https://github.com/mindinventory/reactzooapp","last_synced_at":"2025-07-06T20:05:34.538Z","repository":{"id":108849455,"uuid":"206554784","full_name":"Mindinventory/ReactZooApp","owner":"Mindinventory","description":"ReactZooApp","archived":false,"fork":false,"pushed_at":"2023-05-06T17:10:50.000Z","size":1525,"stargazers_count":31,"open_issues_count":6,"forks_count":3,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-07-06T20:05:31.246Z","etag":null,"topics":["animation","card","css","detail","html","interaction","list","minimal","motion","page","react","reactjs","responsive","smooth","translation","ui","ux","web","website","zooapp"],"latest_commit_sha":null,"homepage":"https://zooapp.mindinventory.net","language":"JavaScript","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/Mindinventory.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-09-05T12:08:36.000Z","updated_at":"2025-01-06T09:19:37.000Z","dependencies_parsed_at":"2025-07-06T20:05:33.030Z","dependency_job_id":null,"html_url":"https://github.com/Mindinventory/ReactZooApp","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Mindinventory/ReactZooApp","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mindinventory%2FReactZooApp","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mindinventory%2FReactZooApp/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mindinventory%2FReactZooApp/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mindinventory%2FReactZooApp/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Mindinventory","download_url":"https://codeload.github.com/Mindinventory/ReactZooApp/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mindinventory%2FReactZooApp/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263966174,"owners_count":23536814,"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","card","css","detail","html","interaction","list","minimal","motion","page","react","reactjs","responsive","smooth","translation","ui","ux","web","website","zooapp"],"created_at":"2024-11-20T16:56:31.588Z","updated_at":"2025-07-06T20:05:34.530Z","avatar_url":"https://github.com/Mindinventory.png","language":"JavaScript","readme":"# ZooApp\n\nThis is a web experiment for native-like animations/transitions between 'current page leaving the DOM' and 'new page entering the DOM’ using ReactJs and CSS.\n\nWhen an item is selected from the listing page, the common elements among the listing page and the detail page for the selected item (image and its background in our case) are animated from their current positions on listing page to their destination positions on the detail page. The reverse also works the same way. \n\nThe interesting thing to be noticed in this demo is that the leaving page also leaves the DOM rather than staying in it.\n\n\n### Preview\n\n|  Desktop view  |\n| ------------- |\n| ![Transition preview](https://zooapp.mindinventory.net/preview.gif)  |\n\n|  iPad view  |  Mobile view |\n| ------------- | ------------- |\n| ![Transition preview](https://zooapp.mindinventory.net/ipad-preview.gif)  | ![Transition preview](https://zooapp.mindinventory.net/mobile-preview.gif)  |\n\n\n## See live\nhttps://zooapp.mindinventory.net/\n\n## Technologies\n###### Development\nReactJs\n\n###### State management\nReactJs Context API\n\n###### Transitions\nCSS\n\n---\nFirst of all, install all the packages.\n### `npm install`\n\nIn the project directory, you can run.\n### `npm start`\n\nRuns the app in the development mode.\u003cbr\u003e\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser.\n\n---\nFeel free to share your views on this.\n\nHave an awesome idea? We will provide a quick analysis and free proposal for it. Don’t worry, it is secure and confidential.\n\nContact us on \nhttp://www.mindinventory.com/inquiry.php \nor \nsales@mindinventory.com\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmindinventory%2Freactzooapp","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmindinventory%2Freactzooapp","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmindinventory%2Freactzooapp/lists"}