xarvh / elm-slides / Slides.SlideAnimation

This module contains the functions used to animate the change from one slide to another, and the types to create your own function.

Slide animators

scroll : Status -> Css.Style

Scrolls the slide horizontally, right to left

fade : Status -> Css.Style

Fade in

verticalDeck : Status -> Css.Style

Vertical deck

Types


type alias Animator =
Status -> Css.Style

Shorthand for the function type used to animate the slides. The first argument describes the slide state: whether it is still or moving, and if the latter in which direction and how much movement.

fade : SlideAttributes
fade status =
    let
        opacity =
            case status of
                Still ->
                    1

                Moving direction order completion ->
                    case direction of
                        Incoming ->
                            completion

                        Outgoing ->
                            1 - completion
    in
    [ Css.opacity (Css.num opacity) ]


type Status
    = Still
    | Moving MotionDirection RelativeOrder Basics.Float

Tells you what a visible slide is doing. The Float used by the Moving constructor is for the animation completion that runs between 0 and 1, 0 when the animation hasn't yet started and 1 when it is completed.


type MotionDirection
    = Incoming
    | Outgoing

This is used to tell the slideAttributes function whether it is running on the slide that's coming into view or the one that's going away.


type RelativeOrder
    = EarlierSlide
    | LaterSlide

Usually during an animation there will be two visible slides: this tells you the relative position of the two slides within the normal slide sequence.

If you navigate from one slide to the next, the Outgoing slide will be the EarlierSlide, and the Incoming slide will be the LaterSlide.

If instead you navigate backwards, from one slide to the previous, it will be the opposite.