really happy with these transitions 😭

examples/docs/package-lock.json

@@ -373,7 +373,7 @@
     "elm-spa": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/elm-spa/-/elm-spa-3.0.0.tgz",
-      "integrity": "sha512-UtOTP4NDnkSPaf3V5I2h9PGCtjF2/9NIrYK8ctdzE24knR1L8QImA723t57RYTodQAs/meDME3sSxNoCNJ10hA==",
+      "integrity": "sha512-iHCv8EUUyKjYxKypfSMUC5mpPr4pRzSbhenWHh94zeQDJmnzW/JQMWvhdVSRfEGST5OK0vHtn5jcvNPQj5TCXA==",
       "dev": true
     },
     "emoji-regex": {

examples/docs/public/ports.js

@@ -11,7 +11,7 @@ const Ports = {
   },
   // Maps an action name to its handler
   actions: {
-    'LOG': (message) =>
-      console.info(`From Elm:`, message)
+    'SCROLL_TO_TOP': _ =>
+      window.scroll({ top: 0, left: 0, behavior: 'smooth' })
   }
 }

examples/docs/src/Global.elm

@@ -32,6 +32,7 @@ type Device
 type Msg
     = ScreenResized Int Int
     | GotViewport Dom.Viewport
+    | AfterNavigate { old : Route, new : Route }
 
 
 type alias GlobalContext msg =
@@ -44,13 +45,19 @@ init _ _ =
     ( { device = Desktop
       }
     , Task.perform GotViewport Dom.getViewport
-    , Ports.log "Global.elm is using ports!"
+    , Cmd.none
     )
 
 
 update : GlobalContext msg -> Msg -> Model -> ( Model, Cmd Msg, Cmd msg )
 update _ msg model =
     case msg of
+        AfterNavigate _ ->
+            ( model
+            , Cmd.none
+            , Ports.scrollToTop
+            )
+
         ScreenResized width _ ->
             ( { model | device = deviceFrom width }
             , Cmd.none

examples/docs/src/Main.elm

@@ -16,7 +16,7 @@ main =
             { routes = Routes.parsers
             , toPath = Routes.toPath
             , notFound = routes.notFound
-            , afterNavigate = Nothing
+            , afterNavigate = Just Global.AfterNavigate
             }
         , global =
             { init = Global.init

examples/docs/src/Ports.elm

@@ -1,4 +1,4 @@
-port module Ports exposing (log)
+port module Ports exposing (scrollToTop)
 
 import Json.Encode as Json
 
@@ -6,9 +6,9 @@ import Json.Encode as Json
 port outgoing : { action : String, data : Json.Value } -> Cmd msg
 
 
-log : String -> Cmd msg
-log message =
+scrollToTop : Cmd msg
+scrollToTop =
     outgoing
-        { action = "LOG"
-        , data = Json.string message
+        { action = "SCROLL_TO_TOP"
+        , data = Json.null
         }