[{"name":"Animator","comment":" CSS animation, with a single renderer for transitions, sequences, and timelines.\n\n@docs Animation, transition\n@docs Attribute, opacity\n@docs rotation, rotationAround\n@docs x, y, z\n@docs scale, scaleX, scaleY, scaleZ\n@docs color, px, int, float\n@docs withTransition, withStepTransition\n@docs Duration, ms\n\n\n# Premade\n\nThese are ordinary keyframe sequences; inspect their definitions to make your own.\n\n@docs spinning, pulsing, bouncing, pinging\n\n\n# Sequences\n\n    import Animator as Anim\n    import Html\n\n    Anim.div\n        (Anim.keyframes\n            [ Anim.loop\n                [ Anim.set [ Anim.opacity 1 ]\n                , Anim.wait (Anim.ms 200)\n                , Anim.step (Anim.ms 200) [ Anim.opacity 0 ]\n                ]\n            ]\n        )\n        []\n        [ Html.text \"Hello!\" ]\n\n@docs Step, set, wait, step\n@docs keyframes, loop, loopFor, sequence\n\n\n# On a Timeline\n\n@docs onTimeline, onTimelineWith\n\n\n# Rendering\n\n@docs div, node\n@docs Css, css, toCss\n\n","unions":[{"name":"Animation","comment":" An animation ready to render as HTML or CSS.\n","args":[],"cases":[]}],"aliases":[{"name":"Attribute","comment":" A CSS property and its target value and transition curve.\n","args":[],"type":"InternalAnim.Property.Prop"},{"name":"Css","comment":" Generated keyframes, transitions, inline properties, and an identity hash.\n","args":[],"type":"InternalAnim.Render.Css"},{"name":"Duration","comment":" A duration. Start with a short duration and adjust for the size and distance\nof the movement.\n","args":[],"type":"InternalAnim.Time.Duration"},{"name":"Step","comment":" A step or nested sequence of steps.\n","args":[],"type":"InternalAnim.Render.Step"}],"values":[{"name":"bouncing","comment":" The duration covers a complete out-and-back bounce. Distance is in pixels:\npositive moves down, negative moves up.\n","type":"Animator.Duration -> Basics.Float -> Animator.Animation"},{"name":"color","comment":" A color property.\n","type":"String.String -> Color.Color -> Animator.Attribute"},{"name":"css","comment":" Equivalent to `onTimelineWith` followed by `toCss`.\n","type":"Animator.Timeline.Timeline state -> (state -> ( List.List Animator.Attribute, List.List Animator.Step )) -> Animator.Css"},{"name":"div","comment":" ","type":"Animator.Animation -> List.List (Html.Attribute msg) -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"float","comment":" A unitless numeric property.\n","type":"String.String -> Basics.Float -> Animator.Attribute"},{"name":"int","comment":" A property rendered as a rounded integer.\n","type":"String.String -> Basics.Float -> Animator.Attribute"},{"name":"keyframes","comment":" Render a sequence using CSS keyframe animations.\n","type":"List.List Animator.Step -> Animator.Animation"},{"name":"loop","comment":" Repeat indefinitely.\n","type":"List.List Animator.Step -> Animator.Step"},{"name":"loopFor","comment":" Repeat a sequence. Zero skips it; a negative count repeats indefinitely.\n","type":"Basics.Int -> List.List Animator.Step -> Animator.Step"},{"name":"ms","comment":" A duration in milliseconds.\n","type":"Basics.Float -> Animator.Duration"},{"name":"node","comment":" ","type":"String.String -> Animator.Animation -> List.List (Html.Attribute msg) -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"onTimeline","comment":" Animate on a timeline, allowing multiple elements to synchronize and handling\ninterruptions from their sampled positions. Uses CSS keyframe animations.\n\nOmitted properties return to their defaults: translation and rotation to `0`,\nscale and opacity to `1`. In contrast, `step` keeps omitted properties as they are.\n\n","type":"Animator.Timeline.Timeline state -> (state -> List.List Animator.Attribute) -> Animator.Animation"},{"name":"onTimelineWith","comment":" Animate to a state's properties, then run its resting steps. The steps are\ninterrupted when the next timeline transition begins.\n","type":"Animator.Timeline.Timeline state -> (state -> ( List.List Animator.Attribute, List.List Animator.Step )) -> Animator.Animation"},{"name":"opacity","comment":" ","type":"Basics.Float -> Animator.Attribute"},{"name":"pinging","comment":" ","type":"Animator.Duration -> Animator.Animation"},{"name":"pulsing","comment":" ","type":"Animator.Duration -> Animator.Animation"},{"name":"px","comment":" A property measured in pixels.\n","type":"String.String -> Basics.Float -> Animator.Attribute"},{"name":"rotation","comment":" Rotation in turns around the Z axis.\n","type":"Basics.Float -> Animator.Attribute"},{"name":"rotationAround","comment":" Rotation in turns around the given axis.\n","type":"{ x : Basics.Float, y : Basics.Float, z : Basics.Float } -> Basics.Float -> Animator.Attribute"},{"name":"scale","comment":" Scale all three axes.\n","type":"Basics.Float -> Animator.Attribute"},{"name":"scaleX","comment":" ","type":"Basics.Float -> Animator.Attribute"},{"name":"scaleY","comment":" ","type":"Basics.Float -> Animator.Attribute"},{"name":"scaleZ","comment":" ","type":"Basics.Float -> Animator.Attribute"},{"name":"sequence","comment":" Group steps into a sequence that runs once.\n","type":"List.List Animator.Step -> Animator.Step"},{"name":"set","comment":" Immediately set properties.\n","type":"List.List Animator.Attribute -> Animator.Step"},{"name":"spinning","comment":" ","type":"Animator.Duration -> Animator.Animation"},{"name":"step","comment":" Move to these properties, preserving properties omitted from the step.\n","type":"Animator.Duration -> List.List Animator.Attribute -> Animator.Step"},{"name":"toCss","comment":" Extract generated CSS for integration with a different view library.\n","type":"Animator.Animation -> Animator.Css"},{"name":"transition","comment":" Animate a change to these properties using native CSS transitions where\npossible. Springs use native CSS `linear(...)` easing, which requires a browser\nwith support for that timing function. Incompatible curves within a compound\nproperty use keyframes instead.\n\nNative springs follow CSS transition reversal rules. Use a timeline when spring\ninterruptions need to preserve incoming velocity.\n\n    Animator.div\n        (Animator.transition (Animator.ms 200)\n            [ Animator.opacity\n                (if model.visible then\n                    1\n\n                 else\n                    0\n                )\n            ]\n        )\n        []\n        [ Html.text \"Hello!\" ]\n\n","type":"Animator.Duration -> List.List Animator.Attribute -> Animator.Animation"},{"name":"wait","comment":" Hold the current properties for a duration.\n","type":"Animator.Duration -> Animator.Step"},{"name":"withStepTransition","comment":" Apply a curve to all properties in a step, including nested sequences.\n","type":"Animator.Transition.Transition -> Animator.Step -> Animator.Step"},{"name":"withTransition","comment":" Attributes use `Animator.Transition.standard` by default.\n","type":"Animator.Transition.Transition -> Animator.Attribute -> Animator.Attribute"},{"name":"x","comment":" Translation in pixels.\n","type":"Basics.Float -> Animator.Attribute"},{"name":"y","comment":" Translation in pixels.\n","type":"Basics.Float -> Animator.Attribute"},{"name":"z","comment":" Translation in pixels.\n","type":"Basics.Float -> Animator.Attribute"}],"binops":[]},{"name":"Animator.Timeline","comment":"\n\n\n# Getting started\n\nHere's how to keep a timeline in your model and update it:\n\n    import Animator\n    import Animator.Timeline as Timeline\n    import Browser.Events\n    import Time\n\n    type alias Model =\n        { visible : Timeline.Timeline Bool }\n\n    init : Model\n    init =\n        { visible = Timeline.init False }\n\n    type Msg\n        = Tick Time.Posix\n        | Show\n\n    subscriptions : Model -> Sub Msg\n    subscriptions model =\n        if Timeline.isRunning model.visible then\n            Browser.Events.onAnimationFrame Tick\n\n        else\n            Sub.none\n\n    update : Msg -> Model -> ( Model, Cmd Msg )\n    update msg model =\n        case msg of\n            Tick now ->\n                ( { model | visible = Timeline.update now model.visible }\n                , Cmd.none\n                )\n\n            Show ->\n                ( { model | visible = Timeline.to (Animator.ms 300) True model.visible }\n                , Cmd.none\n                )\n\n@docs Timeline, init\n\n\n# Transitioning to a new state\n\nNow that we have a `Timeline` set up, we likely want to set a new **value**.\n\nIn order to do that we need to specify both —\n\n  - the new state we want to be in\n  - a `Duration` for how long this transition should take.\n\n@docs to\n\n@docs update, isRunning, hasChanges\n\n\n# Interruptions and Queueing\n\nIn some more **advanced** cases you might want to define a _series_ of states to animate through instead of just going to one directly.\n\n    Timeline.interrupt\n        [ Timeline.wait (Animator.ms 300)\n\n        -- after waiting 300 milliseconds,\n        -- start transitioning to a new state, Griffyndor\n        -- Take 1 whole second to make the transition\n        , Timeline.transitionTo (Animator.ms 1000) Griffyndor\n\n        -- Once we've arrived at Griffyndor,\n        -- immediately start transitioning to Slytherin\n        -- and take half a second to make the transition\n        , Timeline.transitionTo (Animator.ms 500) Slytherin\n        ]\n        timeline\n\n@docs interrupt, queue\n\n@docs Step, wait, transitionTo\n\n@docs scale, delay, Duration\n\n\n# Reading the timeline\n\nYou might be wondering, 'How do we get our value \"out\" of a `Timeline`?'\n\nWell, we can ask the `Timeline` all sorts of questions.\n\n@docs current, previous, upcoming, upcomingWith, arrived, arrivedAt, arrivedAtWith\n\n@docs progress\n\n","unions":[{"name":"Step","comment":" ","args":["state"],"cases":[]}],"aliases":[{"name":"Duration","comment":" A duration shared with `Animator.Duration`. Construct one with `Animator.ms`.\n","args":[],"type":"InternalAnim.Time.Duration"},{"name":"Timeline","comment":" A timeline of `state` values.\n\nBehind the scenes this is roughly a list of states and the times that they should occur!\n\n","args":["state"],"type":"InternalAnim.Timeline.Timeline state"}],"values":[{"name":"arrived","comment":" Subtly different than [`current`](#current), this will provide the new state as soon as the transition has _finished_.\n\n```ascii\n          A---------B---------C\n               ^    ^    ^    ^\narrived:       A    B    B    C\n```\n\n","type":"Animator.Timeline.Timeline state -> state"},{"name":"arrivedAt","comment":" Sometimes we want to know when we've arrived at a state so we can trigger some other work.\n\nUse `arrivedAt` before updating the timeline to detect arrivals after its current\ntime and at or before the new tick. An arrival is not reported again on the next\ntick. Destinations canceled by an interruption are not reported.\n\n    Tick time ->\n        if Animator.Timeline.arrivedAt MyState time model.timeline then\n            --...do something special\n\n","type":"state -> Time.Posix -> Animator.Timeline.Timeline state -> Basics.Bool"},{"name":"arrivedAtWith","comment":" ","type":"(state -> Basics.Bool) -> Time.Posix -> Animator.Timeline.Timeline state -> Basics.Bool"},{"name":"current","comment":" Get the current `state` of the timeline.\n\nThis value will switch to a new value when a transition begins.\n\nIf you had a timeline that went from A to B to C, here's what `current` would be at various points on the timeline.\n\n```ascii\n          A---------B---------C\n               ^    ^    ^    ^\ncurrent:       B    B    C    C\n```\n\n**Note** — If you want to detect the moment when you arrive at a new state, try using [`arrivedAt`](#arrivedAt)\n\n","type":"Animator.Timeline.Timeline state -> state"},{"name":"delay","comment":" Delay the events of a timeline.\n\nThis is generally used in your view function to add a bit of variety when animating multiple elements.\n\n        Animator.Value.float (Animator.Timeline.delay (Animator.ms 200) timeline) <|\n            \\state ->\n                if state then\n                    Animator.Value.to 0\n\n                else\n                    Animator.Value.to 1\n\nDelays add together, negative additions are ignored, and the total is capped at\n5 seconds.\n\nIf you need a longer delay, it's likely you want to create a separate timeline.\n\n","type":"Animator.Timeline.Duration -> Animator.Timeline.Timeline state -> Animator.Timeline.Timeline state"},{"name":"hasChanges","comment":" `True` when scheduling requests are waiting for the next `update`. Becomes\n`False` once they are scheduled, even if the animation is still running.\nUse `isRunning` for animation-frame subscriptions.\n","type":"Animator.Timeline.Timeline state -> Basics.Bool"},{"name":"init","comment":" Create a timeline with an initial `state`.\n\nSo, if you previously had a `Bool` in your model:\n\n    type alias Model = { checked : Bool }\n\n    -- created via\n    { checked = False }\n\nYou could replace that with a `Timeline.Timeline Bool`:\n\n    type alias Model = { checked : Timeline.Timeline Bool }\n\n    -- created via\n    { checked = Timeline.init False }\n\n","type":"state -> Animator.Timeline.Timeline state"},{"name":"interrupt","comment":" If several interruptions are requested before the next `update`, the latest\nnonempty schedule wins.\nAn initial `wait` lets existing motion continue until the replacement begins.\n","type":"List.List (Animator.Timeline.Step state) -> Animator.Timeline.Timeline state -> Animator.Timeline.Timeline state"},{"name":"isRunning","comment":" Use this to control your animation-frame subscription. CSS resting loops can\ncontinue in the browser even when this returns `False`.\n","type":"Animator.Timeline.Timeline state -> Basics.Bool"},{"name":"previous","comment":" Get the previous `state` on this timeline.\n\nAs you'll see in the [Loading example](https://github.com/mdgriffith/elm-animator/blob/master/examples/src/Loading.elm), it means we can use `previous` to refer to data that we've already \"deleted\" or set to `Nothing`.\n\nHow cool!\n\n```ascii\n          A---------B---------C\n               ^    ^    ^\nprevious:      A    A    B\n```\n\n","type":"Animator.Timeline.Timeline state -> state"},{"name":"progress","comment":" The proportion (number between 0 and 1) of progress between the last state and the new one.\n\nOnce we arrive at a new state, this value will be 1 until we start another transition.\n\n","type":"Animator.Timeline.Timeline state -> Basics.Float"},{"name":"queue","comment":" Wait until the current timeline is **finished** and then continue with these new steps.\n\nPending steps are scheduled on the next `update`.\n\n","type":"List.List (Animator.Timeline.Step state) -> Animator.Timeline.Timeline state -> Animator.Timeline.Timeline state"},{"name":"scale","comment":" Scale durations when pending steps are scheduled by the next `update`.\n\n    0.5 -> Animations take half as much time\n    1.0 -> normal\n    2.0 -> Animations take twice as long\n\n**Note** - 0.1 is the lowest number allowed, and 5 is the highest.\n\nSet this on the model's timeline before calling `update`. It does not retime\nevents that have already been scheduled, so applying it only in a view does not\nchange their playback speed.\n\n","type":"Basics.Float -> Animator.Timeline.Timeline state -> Animator.Timeline.Timeline state"},{"name":"to","comment":" Interrupt the existing schedule on the next `update`.\n","type":"Animator.Timeline.Duration -> state -> Animator.Timeline.Timeline state -> Animator.Timeline.Timeline state"},{"name":"transitionTo","comment":" ","type":"Animator.Timeline.Duration -> state -> Animator.Timeline.Step state"},{"name":"upcoming","comment":" Check to see if a `state` is upcoming on a timeline.\n\n**Note** — This can be used to ensure a set of states can only be [`queued`](#queue) if they aren't already running.\n\n**Note 2** — This only checks if an event is in the _future_, but does not check the value you're currently at. You might need to use [`arrived`](#arrived) as well if you also care about the current state.\n\n","type":"state -> Animator.Timeline.Timeline state -> Basics.Bool"},{"name":"upcomingWith","comment":" ","type":"(state -> Basics.Bool) -> Animator.Timeline.Timeline state -> Basics.Bool"},{"name":"update","comment":" Call with the timestamp from `Browser.Events.onAnimationFrame` while\n`isRunning`, or from an existing game loop. Check `arrivedAt` before updating if\nyou need to detect arrivals during this tick.\n","type":"Time.Posix -> Animator.Timeline.Timeline state -> Animator.Timeline.Timeline state"},{"name":"wait","comment":" A list containing only waits has no destination and does not create a schedule.\n","type":"Animator.Timeline.Duration -> Animator.Timeline.Step state"}],"binops":[]},{"name":"Animator.Transition","comment":"\n\n@docs Transition\n\n@docs linear, standard\n\n@docs spring, bezier\n\n","unions":[],"aliases":[{"name":"Transition","comment":" ","args":[],"type":"InternalAnim.Transition.Transition"}],"values":[{"name":"bezier","comment":" Arguments follow CSS `cubic-bezier(x1, y1, x2, y2)` order.\nKeep X coordinates in `0..1`. Y coordinates may go outside that range for overshoot.\n","type":"Basics.Float -> Basics.Float -> Basics.Float -> Basics.Float -> Animator.Transition.Transition"},{"name":"linear","comment":" ","type":"Animator.Transition.Transition"},{"name":"spring","comment":" Both parameters range from `0` to `1`; values outside that range are clamped.\n\n  - `wobble`: how much the motion bounces around its destination. `0` is the least\n    wobbly setting, `1` the most. Even `0` can overshoot, especially at short durations.\n  - `quickness`: how snappy the spring feels. `0` is softer, `1` is stiffer.\n\nStart here, then adjust to taste:\n\n    import Animator\n    import Animator.Transition as Transition\n\n    Animator.transition (Animator.ms 600)\n        [ Animator.x 200\n            |> Animator.withTransition\n                (Transition.spring { wobble = 0.4, quickness = 0.5 })\n        ]\n\nDuration still comes from the animation (`600ms` above). `quickness` is not a\nduration multiplier. Short durations can make the spring feel different, so tune\nthese settings at the duration you intend to use.\n\n","type":"{ wobble : Basics.Float, quickness : Basics.Float } -> Animator.Transition.Transition"},{"name":"standard","comment":" The default easing: `cubic-bezier(0.4, 0, 0.2, 1)`.\n","type":"Animator.Transition.Transition"}],"binops":[]},{"name":"Animator.Value","comment":" You may want to animate a value manually, without generating any CSS.\n\nThis module is for you!\n\nYou'll need to track a `Timeline` in your model and update it using `Browser.Events.onAnimationFrame`.\n\n@docs color\n\n@docs float, velocity, movement, Movement, to, xy, xyz\n\n@docs withTransition\n\n","unions":[],"aliases":[{"name":"Movement","comment":" ","args":[],"type":"InternalAnim.Move.Move Basics.Float"}],"values":[{"name":"color","comment":" ","type":"Animator.Timeline.Timeline state -> (state -> Color.Color) -> Color.Color"},{"name":"float","comment":" ","type":"Animator.Timeline.Timeline state -> (state -> Animator.Value.Movement) -> Basics.Float"},{"name":"movement","comment":" The interpolated position and velocity (in value units per second).\nCompleted transitions hold their destination with zero velocity. Interrupted\ntransitions contribute their position and velocity at the interruption time.\n","type":"Animator.Timeline.Timeline state -> (state -> Animator.Value.Movement) -> { position : Basics.Float, velocity : Basics.Float }"},{"name":"to","comment":" ","type":"Basics.Float -> Animator.Value.Movement"},{"name":"velocity","comment":" Units per second: if your values are pixels, this returns pixels per second.\n","type":"Animator.Timeline.Timeline state -> (state -> Animator.Value.Movement) -> Basics.Float"},{"name":"withTransition","comment":" ","type":"Animator.Transition.Transition -> Animator.Value.Movement -> Animator.Value.Movement"},{"name":"xy","comment":" ","type":"Animator.Timeline.Timeline state -> (state -> { x : Animator.Value.Movement, y : Animator.Value.Movement }) -> { x : Basics.Float, y : Basics.Float }"},{"name":"xyz","comment":" ","type":"Animator.Timeline.Timeline state -> (state -> { x : Animator.Value.Movement, y : Animator.Value.Movement, z : Animator.Value.Movement }) -> { x : Basics.Float, y : Basics.Float, z : Basics.Float }"}],"binops":[]}]