{"id":16710657,"url":"https://github.com/mdgriffith/elm-animator","last_synced_at":"2025-04-09T18:34:50.782Z","repository":{"id":44335441,"uuid":"219076758","full_name":"mdgriffith/elm-animator","owner":"mdgriffith","description":"A timeline-based animation engine for Elm","archived":false,"fork":false,"pushed_at":"2024-08-05T14:36:50.000Z","size":1144,"stargazers_count":132,"open_issues_count":12,"forks_count":15,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-10-13T20:09:18.053Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://package.elm-lang.org/packages/mdgriffith/elm-animator/latest/","language":"Elm","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mdgriffith.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.md","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}},"created_at":"2019-11-01T23:21:40.000Z","updated_at":"2024-06-29T15:27:49.000Z","dependencies_parsed_at":"2022-09-12T12:10:40.182Z","dependency_job_id":"5176f866-0265-457c-9d42-7acb05854264","html_url":"https://github.com/mdgriffith/elm-animator","commit_stats":{"total_commits":456,"total_committers":5,"mean_commits":91.2,"dds":0.3223684210526315,"last_synced_commit":"8c914ee0415b682ff789b5e16f1b5a9a133ab13a"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdgriffith%2Felm-animator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdgriffith%2Felm-animator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdgriffith%2Felm-animator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdgriffith%2Felm-animator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mdgriffith","download_url":"https://codeload.github.com/mdgriffith/elm-animator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248088313,"owners_count":21045685,"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-12T20:09:12.844Z","updated_at":"2025-04-09T18:34:50.761Z","avatar_url":"https://github.com/mdgriffith.png","language":"Elm","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Elm Animator\n\nBring animations to your Elm app!\n\nCheck out the talk that goes with the library, [The Immutable Animator's Toolkit](https://www.youtube.com/watch?v=Nf4rElfA8SE).\n\nJoin the `#animations` channel on the [Elm Slack](https://elmlang.herokuapp.com/) if you want to chat!\n\n# Animating with Timelines\n\nThe high level idea is to track timelines of values in your model and animate between them.\n\nSo, if you were previously storing a `Bool`, now you'd store `Animator.Timeline Bool`, and you'd be able to animate the state transitions in your `view`\n\n```elm\n    div\n        [ Animator.Inline.opacity model.checked \u003c|\n            \\checked -\u003e\n                if checked then\n                   Animator.at 1\n\n                else\n                   Animator.at 0\n        ]\n        [ text \"👍\" ]\n```\n\nThis library handles the animation for you!  (There is slightly more work to do to get started so start with the [**Checkbox example**](https://github.com/mdgriffith/elm-animator/blob/master/examples/Checkbox.elm))\n\nThis approach is pretty cool!  It allows you to:\n\n- Model your animations in terms of the **`Model` you're already storing**\n- Animate **any number of elements** while only tracking one timeline.  This is fantastic for rich animations that need to coordinate several components.\n\nThis library also has the ability to dynamically generate **CSS `@keyframes`**, which means your animations can be very performant.\n\nLet's check out some examples!\n\n# Overview of examples\n\n**Note** if you clone this library to play with the code locally, make sure to `cd examples` and run `elm make` from there!\n\n1. [**Checkbox**](https://github.com/mdgriffith/elm-animator/blob/master/examples/Checkbox.elm) ([live example](http://mdgriffith.github.io/elm-animator/checkbox.html)) — Animate a checkbox as it's checked.  It covers:\n     \n     - *How to **get started** with `elm-animator`*\n     - *An idea of how to **incrementally upgrade** existing code to use animations*\n\n2. [**Page transitions**](https://github.com/mdgriffith/elm-animator/blob/master/examples/Pages.elm) ([live example](http://mdgriffith.github.io/elm-animator/page-transition.html)) — Transition between pages 3d page transition with routing.\n\n     - *Set up routing so there are no page **reloads*** (actually this is standard for SPAs in general).\n     - *Animate the transition between pages*\n     - How to do _**CSS Keyframe** generation_\n  \n3. [**Loading**](https://github.com/mdgriffith/elm-animator/blob/master/examples/Loading.elm) ([live example](http://mdgriffith.github.io/elm-animator/loading.html)) —Animate the loading state of a piece of content.\n     \n     - *How to animate **resting** states such as a loading spinner*\n     - _Animate with content that's already been **deleted**_ (whaaaa?!)\n\n4. [**Mario**](https://github.com/mdgriffith/elm-animator/blob/master/examples/Mario.elm) ([live example](http://mdgriffith.github.io/elm-animator/mario.html))— The classic Mario example!  Run around and jump.\n\n     - *How to get started with **sprite animation***\n     - *How to interact with a separate animation system such as physics code!*\n\n\n# The Goal of a Continuous UI\n\nAnimation can either be a nuanced, playful helper in your UI, or it can be a nuisance.\n\nThere's an immediate question of *what kinds of animation we want to cultivate in the Elm community.*\n\nWith that in mind, here are two types of animation that I'd love to emphasize and `elm-animator` should be very useful for both.\n\n\n## Continuous UI\n\n*A continuous UI minimizes context-shifting for a user and allows them to build a spatial model of your interface*.  \n\nWe're generally used to pieces of UI popping in and out of existence, and pages that change drastically on click.  Everytime something changes, it's a context shift for your user.\n\nWe can use animation to make that experience continuous so our users can build a quick intuition about how our interfaces work.\n\n[Sarah Drasner has an excellent talk showing what a continuous UI interaction can look like](https://youtu.be/QlmaI7x7SYo?t=167).\n\nThere's also a fairly basic [page transition example](http://mdgriffith.github.io/elm-animator/page-transition.html)  - ([Code](https://github.com/mdgriffith/elm-animator/blob/master/examples/Pages.elm)) for this library that has the same principle.\n\n\n\n## Calm Enrichment\n\nThe second type is something I think of as *calm enrichment*.\n\nThe floating city on the [Elm Japan Website](https://elmjapan.org/) —you will need to scroll down a little— is wonderful!\n\nIt doesn't distract from what I'm trying to accomplish on the website, it simply sits there, calmly floating.  It doesn't take anything away from my *budget of attention* that I have when visiting the website.  In fact it likely **increases** the amount of attention I'm willing to *pay*.\n\nThey used [`elm-playground`](https://package.elm-lang.org/packages/evancz/elm-playground/latest/Playground) —which I am likewise inspired by— to achieve the effect and convinced me to make this sort of thing easy in `elm-animator`.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdgriffith%2Felm-animator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmdgriffith%2Felm-animator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdgriffith%2Felm-animator/lists"}