{"id":16710663,"url":"https://github.com/mdgriffith/ui-animation","last_synced_at":"2025-04-10T05:35:21.021Z","repository":{"id":77476599,"uuid":"64677674","full_name":"mdgriffith/ui-animation","owner":"mdgriffith","description":"All Work from this Repo has been published at https://github.com/mdgriffith/elm-style-animation","archived":false,"fork":false,"pushed_at":"2016-09-15T13:00:37.000Z","size":426,"stargazers_count":5,"open_issues_count":8,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-24T06:51:52.069Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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":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}},"created_at":"2016-08-01T15:14:26.000Z","updated_at":"2021-11-12T12:09:00.000Z","dependencies_parsed_at":null,"dependency_job_id":"5418994b-c3a2-4e77-98b6-1eba4740dacb","html_url":"https://github.com/mdgriffith/ui-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/mdgriffith%2Fui-animation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdgriffith%2Fui-animation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdgriffith%2Fui-animation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdgriffith%2Fui-animation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mdgriffith","download_url":"https://codeload.github.com/mdgriffith/ui-animation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248163909,"owners_count":21058045,"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:13.924Z","updated_at":"2025-04-10T05:35:21.012Z","avatar_url":"https://github.com/mdgriffith.png","language":"Elm","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Elm-Style-Animation Rewrite\nThis code will eventually be released as a major version to [elm-style-animation](https://github.com/mdgriffith/elm-style-animation).\n\nThe main purpose of this rewrite was to change the API to use a list based api vs the pipes based api that was used previously.  I also wanted to take the time to add some polish.\n\nI've filed a number of issues on this repo on design points that I would love feedback on.  Please reply to them if you have any thoughts or submit an issue if you've thought of something I've missed!\n\n\n## Basic Animation\n\nTo get started, there are a few things that need to happen.\n\n\n__Set an initial style__ in your model.\n\n```elm\nimport Animation exposing (px)\n\ninit : Model\ninit =\n    { style = \n        Animation.style \n            [ Animation.left (px 0.0)\n            , Animation.opacity 1.0\n            ]\n    }\n```\n\n__Subscribe to Animation's subscription.__  This will animate using AnimationFrame when something is running, and stop giving updates when there is no animation. \n```elm\nsubscriptions : Model -\u003e Sub Msg\nsubscriptions model =\n    Animation.subscription [model.style] Animate\n\n```\n\n\n__Set up an update `Msg`__ in your update function.\n```elm\n    Animate animMsg -\u003e\n        { model\n            | animation = Animation.update animMsg model.style\n        }\n                \n```\n\n\n__Render our animation__ at the necessary element in your view.  Not all animated properties are style properties(such as the svg.d property and polygon.points property), so `Animation.render` actaully returns a list of `Html.Attributes`.  Fortunately, you can add your own style because  `Html.Attributes.style` stacks!\n```elm\n    div\n        (Animation.render model.style\n            ++ [ style\n                    [ ( \"position\", \"absolute\" )\n                    , ( \"border-style\", \"dotted\" )\n                    ]\n               ]\n        )\n        [ text \"This is being Animated!\" ]\n```\n\n\n\n\n__Start an animation__ in your update statement.\n\n```elm\ncase msgs of\n    Show -\u003e\n        let \n            newStyle = \n                Animation.interrupt\n                    [ Animation.to \n                        [ Animation.left (px 0.0)\n                        , Animation.opacity 1.0\n                        ]\n                    ]\n                    model.style\n        in\n            { model\n                | style = newStyle\n            }\n```\n\nHere's generally how we compose animations.\n\n * Choose `Animation.queue` or `Animation.interrupt`, both of which take a list of steps and your animation model.\n * Steps can be\n    * `Animation.to` - Animate to a target style\n    * `Animation.set` - Set a animation to a style immediately.\n    * `Animation.wait (5 * second)` - wait for some amount of time\n    * `Animation.repeat x [..list of steps to repeat]` - Repeat a list of steps x times.\n    * `Animation.loop [..list of steps to repeat]` - Loop a list of steps forever/until interrupted.\n\n\n\n\n# Examples\n * Gears - [Demo](https://mdgriffith.github.io/elm-style-animation/3.0.0/Gears.html) - [Code](https://github.com/mdgriffith/ui-animation/blob/master/examples/Gears.elm)\n * Menu - [Demo](https://mdgriffith.github.io/elm-style-animation/3.0.0/FlowerMenu/) - [Code](https://github.com/mdgriffith/elm-html-animation-flower-menu/tree/split-out-animation)\n * Logo - [Demo](https://mdgriffith.github.io/elm-style-animation/3.0.0/Logo.html) - [Code](https://github.com/mdgriffith/ui-animation/blob/master/examples/Logo.elm)\n * Showcase - [Demo](https://mdgriffith.github.io/elm-style-animation/3.0.0/Showcase.html) - [Code](https://github.com/mdgriffith/ui-animation/blob/master/examples/Showcase.elm)\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdgriffith%2Fui-animation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmdgriffith%2Fui-animation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdgriffith%2Fui-animation/lists"}