Transitioning between pages

Learn
1

Hi there,

I recently tried to add a smooth page transition to my application, which is built with Elm-UI and Elm Animator. My current architecture has a Session type which includes all information that needs to be persisted across pages and a PageModel union type which contains data needed for specific pages.

What I’m trying to do now is add (possibly different) transitions between pages on route change. My current approach stores a Transition type inside the Session which internally contains a page model (the page model of the page we are navigating away from).

With this i can calculate the HTML for both pages using the respective view functions.

Now the problem is - when transitioning from

  1. displaying page A
  2. displaying both page A and page B in some form
  3. displaying page B

the pages rerender, causing a flicker since img tags are reloading etc.

This makes sense, since the DOM representation changes:

case Animator.current timeline of
    OnPage -> currentPage
    Transitioning transitionType ->
       ...
       Element.el [ ..., Element.inFront <| Element.el [...] currentPage ] previousPage

Does anybody have an idea how to solve the flickering problem?
I tried Element.Keyed.el, but (probably since the element moves out of the Element.inFront), it doesn’t help.

Unfortunately I cannot upload a video here, but if it helps you visualize the issue, I could upload a screen capture elsewhere and post a link.

Thanks in advance :slight_smile:

1 Like
2

I don’t use elm-ui but, in the end elm-ui renders html. This means that the following might work: given 2 elements that have to overlap inside the same container and with the same z-index, the one that appears later in the HTML is the one that will appear in front. Having this into account, you could have a page counter that always goes up to be used as key in Html.Keyed make it stick to each rendered page and always render the new page first but with the new key and with no modification of its properties.

3

Thanks! This does solve the problem, although it requires me to re-architect my main render function. Basically what I’m going to do now is using plain css and Elm.Html on the application level while still using Elm-UI at the page and component level.
The biggest pain point here is my previous usage of Element.inFront to handle sticky navigation and overlays. I’m also wondering whether it is a good idea to have multiple Element.layouts at once.

Side note: instead of a page counter, I am using the pages route (url) for the key. This should work perfectly, since I’m never transitioning from a page to itself anyways.

4

I just noticed that Elm-UI does account for this via a render option Element - elm-ui 1.1.8 in case anyone else runs into this problem.

5

For the record it is worth pointing out that, albeit It is still under a feature flag in Chrome, one fine day we will have native page transitions API: Smooth and simple page transitions with the shared element transition API - Chrome Developers

5 Likes
6

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