{"id":16710670,"url":"https://github.com/mdgriffith/elm-animation-pack","last_synced_at":"2025-04-10T05:35:39.876Z","repository":{"id":62418791,"uuid":"83342836","full_name":"mdgriffith/elm-animation-pack","owner":"mdgriffith","description":"Easily manage your animation states in Elm!","archived":false,"fork":false,"pushed_at":"2017-02-28T13:51:20.000Z","size":77,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-24T06:51:52.406Z","etag":null,"topics":["animation","elm","elm-style-animation"],"latest_commit_sha":null,"homepage":null,"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":"2017-02-27T18:28:38.000Z","updated_at":"2017-11-28T23:42:55.000Z","dependencies_parsed_at":"2022-11-01T16:47:28.031Z","dependency_job_id":null,"html_url":"https://github.com/mdgriffith/elm-animation-pack","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdgriffith%2Felm-animation-pack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdgriffith%2Felm-animation-pack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdgriffith%2Felm-animation-pack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdgriffith%2Felm-animation-pack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mdgriffith","download_url":"https://codeload.github.com/mdgriffith/elm-animation-pack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248164017,"owners_count":21058066,"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":["animation","elm","elm-style-animation"],"created_at":"2024-10-12T20:09:15.782Z","updated_at":"2025-04-10T05:35:39.859Z","avatar_url":"https://github.com/mdgriffith.png","language":"Elm","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Manage your Elm animation states!\n\nManaging your animation states in Elm can be a pain.  This module is an attempt at making it a little bit easier.\n\nEssentially this module uses a dict behind the scenes to keep track of your animation states.  This comes with some tradeoffs, check the __warnings__ section at the bottom of the doc.\n\n\n## Code Example\n\nInitial model and subscription.\n```elm\nimport Color\nimport Animation\nimport Animation.Pack\n\ntype MyStyles \n    = MyStyle \n    | OtherStyle\n\n-- Fancy alias for the tuple comma\n(=\u003e) = (,)\n\n-- Your initial model.\ninit =\n    { styles = \n        Animation.Pack.init\n            [ MyStyle =\u003e\n                [ Animation.opacity 0.0\n                , Animation.color Color.blue\n                , Animation.left (px 0.0)\n                ]\n            , OtherStyle =\u003e\n                [ Animation.opacity 0.0\n                , Animation.color Color.blue\n                , Animation.left (px 0.0)\n                ]\n            ]\n    }\n\n-- .. add the subscription to your subs\n   , subscriptions = (\\model -\u003e Animation.Pack.subscription Animate model.styles)\n\n-- .. Add an animation update command to your update function.\n    Animate animMsg -\u003e\n        let\n            (newStyles, cmds) = Animation.Pack.update animMsg model.styles\n        in\n            ( { model | styles = newStyles}\n            , cmds\n            )\n\n\n\n```\n#### Now you can animate!\n\n```elm\n    StartAnimation -\u003e\n        let\n            newStyles =\n                model.styles\n                    |\u003e Animation.Pack.animate MyStyle\n                        [ Animation.to\n                            [ Animation.left (px 0.0)\n                            , Animation.opacity 1.0\n                            ]\n                        ]\n                    |\u003e Animation.Pack.animate OtherStyle\n                        [ Animation.to\n                            [ Animation.color Color.red\n                            , Animation.top (px 80)\n                            ]\n                        ]\n                }\n        in\n            ( { model | styles = newStyles }\n            , Cmd.none\n            )\n```\n\n\n## More Advanced Usage\n\nYou can dynamically add an `Animation.State` to your pack by using `Animation.Pack.add`.  This is useful when you need to start animating something you didn't have when the app started!\n\n\n## Warnings\n\nBecause this module is using a dict behind the scenes, you lose some of the strengths of elm's type checking.\n\nHere are all the pitfalls you need to be aware of:\n\n  * If you try to update/animate a state that doesn't exist, you'll get a logged warning (i.e. runtime notification) and _nothing else will happen_!\n  * Be careful about using `Animation.Pack.add` all the time.  Use it only when you're _sure_ you need it.  Remember to `Animation.Pack.remove` any states you're not using.\n  * Don't use functions as keys for `Animation.Pack`.  If you do, you'll have a bad time.\n\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdgriffith%2Felm-animation-pack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmdgriffith%2Felm-animation-pack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdgriffith%2Felm-animation-pack/lists"}