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 : Float -> Transition -> List (Attribute msg)

Combine fade and slideLeft with the specified offset

fadeZoom : Float -> Transition -> List (Attribute msg)

Combine fade and zoom with specified offset

Slide left

slide : Float -> Transition -> List (Attribute msg)

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

slideOut : Float -> Float -> List (Attribute msg)

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

slideIn : Float -> Float -> List (Attribute msg)

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

Fade

fade : Transition -> List (Attribute msg)

Fade animation

fadeOut : Float -> List (Attribute msg)

Fade out (exit).

fadeIn : Float -> List (Attribute msg)

Fade in (enter).

Zoom

zoom : Float -> Transition -> List (Attribute msg)

Zoom animation

zoomIn : Float -> Float -> List (Attribute msg)

Zoom in (enter)

zoomOut : Float -> Float -> List (Attribute msg)

Zoom out (exit)

Tooling to create animations

compose :

(Float -> List (Attribute msg))

-> (Float -> List (Attribute msg))

-> Transition

-> List (Attribute msg)

Compose an animation with exit and enter phases.

Modules

TransitStyle

etaque/elm-transit-style/4.0.0