{"id":24487125,"url":"https://github.com/probably-not/live-flip","last_synced_at":"2026-03-05T23:41:44.809Z","repository":{"id":271765464,"uuid":"913941730","full_name":"probably-not/live-flip","owner":"probably-not","description":"FLIP animations of elements within LiveView","archived":false,"fork":false,"pushed_at":"2025-05-15T18:51:22.000Z","size":102,"stargazers_count":19,"open_issues_count":14,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-19T07:44:53.773Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://live-flip.fly.dev/","language":"Elixir","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/probably-not.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":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-01-08T16:38:48.000Z","updated_at":"2025-05-15T17:42:00.000Z","dependencies_parsed_at":"2025-04-13T21:06:38.135Z","dependency_job_id":"5a09e73c-f77e-46db-a1e2-0ed8b542b86b","html_url":"https://github.com/probably-not/live-flip","commit_stats":null,"previous_names":["probably-not/live-flip"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/probably-not/live-flip","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/probably-not%2Flive-flip","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/probably-not%2Flive-flip/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/probably-not%2Flive-flip/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/probably-not%2Flive-flip/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/probably-not","download_url":"https://codeload.github.com/probably-not/live-flip/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/probably-not%2Flive-flip/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30156110,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-05T22:39:40.138Z","status":"ssl_error","status_checked_at":"2026-03-05T22:39:24.771Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":[],"created_at":"2025-01-21T15:33:28.605Z","updated_at":"2026-03-05T23:41:44.017Z","avatar_url":"https://github.com/probably-not.png","language":"Elixir","funding_links":[],"categories":[],"sub_categories":[],"readme":"# LiveFlip\n\n[![Hex.pm Version](https://img.shields.io/hexpm/v/live_flip.svg)](https://hex.pm/packages/live_flip) [![Documentation](https://img.shields.io/badge/docs-latest-blue.svg)](https://hexdocs.pm/live_flip/)\n\nA component and hook for FLIP animations of elements within LiveView.\n\n## How To Use\n\nA demo project is provided here in the demo folder, it is a simple demo app to display the capability that the component provides. You can visit [live-flip.fly.dev](https://live-flip.fly.dev) to see it in action. The animations are fully automated by the wrapper, and the class changes are fully driven by the server.\n\nThe easiest way to start is to install (see the below Installation section), and add the Flip hook to your hooks in your app's `app.js` file. Once you have that, you can wrap any element in the `flip_wrap` component and receive all the animations for free!\n\nIn your app.js, or wherever you define your hooks, simply import the following:\n\n```javascript\nimport Flip from \"../../deps/live_flip/assets/js/hooks\"\n```\n\nOr, if you are in an umbrella project:\n\n```javascript\nimport Flip from \"../../../../deps/live_flip/assets/js/hooks\"\n```\n\nAnd then add the hook to your Hooks object:\n\n```javascript\nlet liveSocket = new LiveSocket(\"/live\", Socket, {\n  hooks: { Flip },\n})\n```\n\nAnd now you're ready to roll! Just wrap your element with the  component from `LiveFlip` and you will get automatic FLIP animations!\n\nSimply render your inner content within the `LiveFlip.flip_wrap` component and move it around the page by adjusting\nits classes. The element will automatically animate its movement:\n\n```heex\n\u003c.flip_wrap id=\"my-red-square\"\u003e\n  \u003cdiv class=\"absolute w-16 h-16 bg-red-500 rounded-lg shadow-lg\"\u003e\n  \u003c/div\u003e\n\u003c/.flip_wrap\u003e\n```\n\n### Caveats\n\nAs of now (version 0.1.0), animations and FLIPs are implemented for the following:\n- Position changes\n- Width changes\n- Height changes\n\nHowever, since the hook utilizes the Web Animations API and transforms, it is unable to handle if the element has transforms applied on it (yet). This is something that I want to tackle in following releases, as I get a better handle of how to compose transforms that are already on an element, with incoming transforms during an update and the transforms necessary for the FLIP to work.\n\nIn addition to this caveat - the UI is non-blocking right now - this means that animations may be running as your element changes classes. I'm not currently using LiveView's `this.js` ViewHook functionality to trigger transitions - mainly because I want to target the Web Animations API and keep this hook very generic (i.e. not targeting Tailwind and not class-based). My understanding of the `this.js.transition` function is that it works by adding classes and transitioning these classes off, meaning that I would need to dynamically calculate the TailwindCSS classes necessary for the FLIP thus tying this very much to Tailwind exclusively. Unfortunately, this also means I can't cause the UI to lock or be blocked - there have been many discussions about this in the past, both on the forum and on the Slack. I'm hoping that this (as a nice use case for it) will open up the discussion again.\n\n## Installation\n\nIf [available in Hex](https://hex.pm/docs/publish), the package can be installed\nby adding `live_flip` to your list of dependencies in `mix.exs`:\n\n```elixir\ndef deps do\n  [\n    {:live_flip, \"~\u003e 0.1.0\"}\n  ]\nend\n```\n\nDocumentation can be generated with [ExDoc](https://github.com/elixir-lang/ex_doc)\nand published on [HexDocs](https://hexdocs.pm). Once published, the docs can\nbe found at \u003chttps://hexdocs.pm/live_flip\u003e.\n\n## Contributing\n\nFeel free to fork and make PRs! I'm definitely happy to have eyes on this and to get feedback so we can take care of edge cases.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprobably-not%2Flive-flip","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprobably-not%2Flive-flip","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprobably-not%2Flive-flip/lists"}