{"id":15770447,"url":"https://github.com/c-ehrlich/framer-motion-list","last_synced_at":"2025-03-31T11:43:21.531Z","repository":{"id":134326431,"uuid":"472511673","full_name":"c-ehrlich/framer-motion-list","owner":"c-ehrlich","description":"Creating an animated list with framer-motion","archived":false,"fork":false,"pushed_at":"2022-03-21T21:04:05.000Z","size":184,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-05T14:41:20.038Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/c-ehrlich.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":"2022-03-21T21:03:50.000Z","updated_at":"2022-03-21T21:04:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"4c46e74f-621b-4f4d-8a66-ba4915839b84","html_url":"https://github.com/c-ehrlich/framer-motion-list","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/c-ehrlich%2Fframer-motion-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c-ehrlich%2Fframer-motion-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c-ehrlich%2Fframer-motion-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c-ehrlich%2Fframer-motion-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/c-ehrlich","download_url":"https://codeload.github.com/c-ehrlich/framer-motion-list/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246465220,"owners_count":20781919,"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-10-04T14:41:33.818Z","updated_at":"2025-03-31T11:43:21.495Z","avatar_url":"https://github.com/c-ehrlich.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Framer Motion Animated List\n\n## What is this?\nA simple React app that displays a list of item and lets the user add and subtract items, sort the list, and reset to initial state. The list items animate smoothly to make it easier to understand how the list is being modified.\n\n## What did I learn?\nPrior to this project I had some difficulties understanding how the different aspects of framer-motion worked together, but by creating this focused demo project I now understand what each aspect does, and how to combine them.\n\nI also learned that there are some edge cases of undocumented behaviour that are frequently recommended in tutorials, but are actually not intended and will be caught if framer-motion is used with TypeScript. One example of this is passing a style prop that changes based on the `useIsPresent` hook. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fc-ehrlich%2Fframer-motion-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fc-ehrlich%2Fframer-motion-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fc-ehrlich%2Fframer-motion-list/lists"}