xarvh / elm-slides

Awesome presentation framework to create your slides in Elm.

Home Page:http://package.elm-lang.org/packages/xarvh/elm-slides/latest

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add verticalDeck slide animator

xarvh opened this issue · comments

Something like:

verticalDeck : SA.Animator
verticalDeck status =
    Css.asPairs <|
        case status of
            SA.Still ->
                [ Css.position Css.absolute
                ]

            SA.Moving direction order completion ->
                case order of
                    SA.LaterSlide ->
                        [ Css.position Css.absolute
                        , Css.property "z-index" "1"
                        , Css.property "filter" <| "blur(" ++ (toString <| round <| (1 - completion) * 10) ++ "px)"
                        ]

                    SA.EarlierSlide ->
                        [ Css.position Css.absolute
                        , Css.transform <| Css.translate2 zero (pct (completion * 100))
                        , Css.property "z-index" "2"
                        ]

Add -webkit-filter: blur(10px);