{"id":13646348,"url":"https://github.com/mdgriffith/elm-style-animation","last_synced_at":"2025-10-08T04:49:08.197Z","repository":{"id":46773783,"uuid":"49376329","full_name":"mdgriffith/elm-style-animation","owner":"mdgriffith","description":"The style animation library for Elm!","archived":false,"fork":false,"pushed_at":"2019-11-06T21:37:54.000Z","size":971,"stargazers_count":440,"open_issues_count":26,"forks_count":40,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-10-08T04:49:04.781Z","etag":null,"topics":["animation","elm","elm-style-animation","spring"],"latest_commit_sha":null,"homepage":"http://package.elm-lang.org/packages/mdgriffith/elm-style-animation/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":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-01-10T17:04:03.000Z","updated_at":"2025-09-10T09:51:10.000Z","dependencies_parsed_at":"2022-09-23T04:13:02.484Z","dependency_job_id":null,"html_url":"https://github.com/mdgriffith/elm-style-animation","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"purl":"pkg:github/mdgriffith/elm-style-animation","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdgriffith%2Felm-style-animation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdgriffith%2Felm-style-animation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdgriffith%2Felm-style-animation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdgriffith%2Felm-style-animation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mdgriffith","download_url":"https://codeload.github.com/mdgriffith/elm-style-animation/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdgriffith%2Felm-style-animation/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278891744,"owners_count":26063855,"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","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["animation","elm","elm-style-animation","spring"],"created_at":"2024-08-02T01:02:53.477Z","updated_at":"2025-10-08T04:49:08.178Z","avatar_url":"https://github.com/mdgriffith.png","language":"Elm","funding_links":[],"categories":["Elm"],"sub_categories":[],"readme":"# The Style Animation library for Elm!\n\n\n## The Basics\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 Animate [ model.style ]\n\n```\n\n\n__Set up an update `Msg`__ in your update function.\n```elm\n    Animate animMsg -\u003e\n        { model\n            | style = Animation.update animMsg model.style\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` actually returns a list of `Html.Attributes`.  Fortunately, you can add your own style because  `Html.Attributes.style` stacks!\n```elm\n    div\n        (List.concat\n            [ Animation.render model.style\n            , [ style\n                    [ ( \"position\", \"absolute\" )\n                    , ( \"border-style\", \"dotted\" )\n                    ]\n               ]\n            ]\n        )\n        [ text \"This is being Animated!\" ]\n```\n\n\n__Start an animation__ in your update statement.\n\n```elm\ncase msg 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.  This describes what the strategy should be if the thing you're trying to animate is already in the process of being animated.  You either want to interrupt what its doing and do this new animation.  Or you want to queue up this new animation to run after the current animation is finished.  90% of the time you want `Animation.interrupt`\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# Examples\n\n * Simple FadeIn/FadeOut - [Code](https://github.com/mdgriffith/elm-style-animation/blob/master/examples/SimpleFadeIn.elm)\n\n * Menu Slide in - [Demo](https://mdgriffith.github.io/elm-style-animation/3.0.0/FlowerMenu/) - [Code](https://github.com/mdgriffith/elm-animation-flower-menu)\n\n * Rotating Gears - [Demo](https://mdgriffith.github.io/elm-style-animation/3.0.0/Gears.html) - [Code](https://github.com/mdgriffith/elm-style-animation/blob/master/examples/Gears.elm)\n\n * Logo (Svg polygon morphing) - [Demo](https://mdgriffith.github.io/elm-style-animation/3.0.0/Logo.html) - [Code](https://github.com/mdgriffith/elm-style-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/elm-style-animation/blob/master/examples/Showcase.elm)\n\n# Advanced!\n\n## Note!\n\nThe compiler is going to refer to your animation model as `Animation.Model.Animation msg`.  `Animation.State` is just a synonym for that.\n\n## Sending Messages\n\n * Send Messages Example - [Code](https://github.com/mdgriffith/elm-style-animation/blob/master/examples/SimpleSendMsg.elm)\n\nFirst, import `Animation.Messenger`\n\nChange your `Animation.State` to `Animation.Messenger.State MyMsgType`.\n\nYou can now use `Animation.Messenger.send MyCustomMessage` as a step in composing your animation.\n\nYou need to update this new animation state using `Animation.Messenger.update`, which will return `(newAnimState, messagesSentinCmdForm)`.  So you need to change your animation update section to something like the following.\n\n\n\n\n```elm\ncase msg of\n    Animate animMsg -\u003e\n        let\n            (newStyle, cmds) =\n                Animation.Messenger.update\n                    animMsg\n                    model.style\n        in\n            ( { model\n                 | style = newStyle\n              },\n              cmds\n            )\n```\n\n_Note!_ Make sure you're sending the cmds in the above code.  If you're note, then the animation will run, but the messages won't be sent.\n\nAlso, if you're running this in a child component, make sure you're `Cmd.map`ing the child's commands back to the child or else the messages will be lost!\n\n\n## Animating Properties that aren't directly supported.\n\nYou can construct custom properties if you don't find them in the library using `Animation.custom`.  These will be rendered in the style property.\n\n```elm\nAnimation.to\n    [ Animation.custom \"my-custom-prop\" 5 \"px\"\n    ]\n\n```\n\nThere is also `customColor` for color based properties.\n\n\n\n## Setting Custom Interpolation\n\nBehind the curtain elm-style-animation mostly uses springs to animate values from A to B.  However you can specify custom values for a spring, or a duration and easing if you want. There are two basic ways to do this.\n\n\n### Set them with your initial style.\n\nUse `Animation.styleWith` or `Animation.styleWithEach` to set your initial style instead of `Animation.style`.  \n\n```elm\nAnimation.styleWith\n    (Animation.spring\n        { stiffness = 400\n        , damping = 23 }\n    )\n    [ Animation.opacity 0\n    , Animation.left (px 20)\n    ]\n```\n\nThis will set the spring used for these properties.  Alternatively `Animation.styleWithEach` is a way to set a custom interpolation for each individual property.\n\n\n### Set a temporary spring/duration + easing\n\nYou can also use `Animation.toWith` and `Animation.toWithEach`.  These can be substituted for `Animation.to` and allow you to specify a spring or duration+easing that lasts for exactly one step.  After that step, whatever default spring or duration/easing there is (either the auto default or via being specified in `Animation.styleWith`) is then used.\n\n```elm\nAnimation.interrupt\n    [ Animation.toWith\n        (Animation.easing\n            { duration = 2*second\n            , ease = (\\x -\u003e x^2)\n            }\n        ) \n        [ Animation.left (px 0.0)\n        , Animation.opacity 1.0\n        ]\n    ]\n    model.style\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdgriffith%2Felm-style-animation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmdgriffith%2Felm-style-animation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdgriffith%2Felm-style-animation/lists"}