etaque / elm-transit-style / TransitStyle

Animations for elm-transit, to be used on elm-html attributes.

div
    (fadeSlide 100 model.transition)
    [ text "Some content" ]

div
    (onClick (Click Page1) :: fadeZoom 0.05 model.transition)
    [ text "Some content" ]

Combinations

fadeSlide : Basics.Float -> Transition -> List (Html.Attribute msg)

Combine fade and slideLeft with the specified offset

fadeZoom : Basics.Float -> Transition -> List (Html.Attribute msg)

Combine fade and zoom with specified offset

Slide left

slide : Basics.Float -> Transition -> List (Html.Attribute msg)

Slide animation, with the specified offset. Greater than 0 to right, lesser to left.

slideOut : Basics.Float -> Basics.Float -> List (Html.Attribute msg)

Slide out (exit) by translating on X for desired offset

slideIn : Basics.Float -> Basics.Float -> List (Html.Attribute msg)

Slide in (enter) by translating on X for desired offset

Fade

fade : Transition -> List (Html.Attribute msg)

Fade animation

fadeOut : Basics.Float -> List (Html.Attribute msg)

Fade out (exit).

fadeIn : Basics.Float -> List (Html.Attribute msg)

Fade in (enter).

Zoom

zoom : Basics.Float -> Transition -> List (Html.Attribute msg)

Zoom animation

zoomIn : Basics.Float -> Basics.Float -> List (Html.Attribute msg)

Zoom in (enter)

zoomOut : Basics.Float -> Basics.Float -> List (Html.Attribute msg)

Zoom out (exit)

Tooling to create animations

compose : (Basics.Float -> List (Html.Attribute msg)) -> (Basics.Float -> List (Html.Attribute msg)) -> Transition -> List (Html.Attribute msg)

Compose an animation with exit and enter phases.