# Fading page transition with elm-ui+elm-animator?

**URL:** <https://discourse.elm-lang.org/t/fading-page-transition-with-elm-ui-elm-animator/8905>\
**Category:** Learn\
**Created:** [January 22, 2023, 11:06pm UTC](https://discourse.elm-lang.org/t/fading-page-transition-with-elm-ui-elm-animator/8905 "2023-01-22T23:06:26Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![mcc](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/mcc/32/946_2.png) [@mcc](https://discourse.elm-lang.org/u/mcc)\
**Post date:** [January 22, 2023, 11:06pm UTC](https://discourse.elm-lang.org/t/fading-page-transition-with-elm-ui-elm-animator/8905/1 "2023-01-22T23:06:26Z")

</div>

Hey!

I’m working on a game where you transition between different states, and for some of these I’d like to have a fading animation between each stage.

I have have a graph of what we call scenes in the game, where each scene has a set of nodes (we call those frames), a set of edges (called choices, taking you to the next frame). We represent it as a graph. So the aim is that when a choice is clicked, we transition to the new frame.

My initial thinking was simply to check that if the node ID is different from the current frame, it should set the animation opacity to zero

```auto

animation : FrameId -> Animator.Timeline FrameId -> Html.Attribute Msg
animation frameId timeline =
    Animator.Inline.opacity timeline <|
        \currentFrame ->
            if currentFrame == frameId then
                Animator.at 1

            else
                Animator.at 0

```

Then I set up the following render function

```auto
render : List (Element.Attribute Msg) -> Frame -> Element.Element Msg
render attributes frame =
    let
        node =
            frame.node

        choices =
            IntDict.toList frame.outgoing
                |> List.filterMap
                    (\( id, choice ) ->
                        case choice of
                            Prompt str ->
                                Just ( id, str )
                    )
    in
    case node.label of
        Display text ->
            Element.column (attributes ++ [Element.spacing 24, Element.scrollbarX])
                [ textPrompt text
                , listChoices choices
                ]

```

Later I render it with

```auto
-- latest is the current Frame id from Animation.current, frame is the node.
render [Element.htmlAttribute <| animation latest model.frameState] frame

```

Now I’m curious how I can at the same time fade out the old page? With my current setup the new page only fades in and the old doesn’t transition “out”.

I thought maybe I could use an attribute like `Element.below (render [Element.htmlAttribute <| animation oldFrameId model.frameState] oldFrame)` but this doesn’t render correctly.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [February 1, 2023, 11:07pm UTC](https://discourse.elm-lang.org/t/fading-page-transition-with-elm-ui-elm-animator/8905/2 "2023-02-01T23:07:04Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.