diff --git a/rollup.config.js b/rollup.config.js
index b4258571..cf338b07 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,7 +1,7 @@
 import path from 'path';
 import resolve from '@rollup/plugin-node-resolve';
 import babel from '@rollup/plugin-babel';
-import pkg from './package.json';
+import pkg from './package.json' assert {type: "json"};
 
 const plugins = [
   // The 'node-resolve' plugin allows Rollup to resolve bare module imports like
diff --git a/src/router.js b/src/router.js
index 681e3c30..7113bb4d 100644
--- a/src/router.js
+++ b/src/router.js
@@ -175,6 +175,8 @@ export class Router extends Resolver {
       baseUrl: baseHref && Resolver.__createUrl(baseHref, document.URL).href.replace(/[^/]*$/, '')
     }, options));
 
+    this.enableNativeViewTransitions = options && options.enableNativeViewTransitions;
+
     this.resolveRoute = context => this.__resolveRoute(context);
 
     const triggers = Router.NavigationTrigger;
@@ -472,23 +474,43 @@ export class Router extends Resolver {
             return this.location;
           }
 
-          this.__addAppearingContent(context, previousContext);
-          const animationDone = this.__animateIfNeeded(context);
-
-          this.__runOnAfterEnterCallbacks(context);
-          this.__runOnAfterLeaveCallbacks(context, previousContext);
-
-          return animationDone.then(() => {
-            if (this.__isLatestRender(context)) {
-              // If there is another render pass started after this one,
-              // the 'disappearing content' would be removed when the other
-              // render pass calls `this.__addAppearingContent()`
-              this.__removeDisappearingContent();
-
-              this.__previousContext = context;
-              return this.location;
-            }
-          });
+          if(this.enableNativeViewTransitions && document.startViewTransition) {
+            document.startViewTransition(
+              () => {
+                this.__addAppearingContent(context, previousContext);
+                this.__runOnAfterEnterCallbacks(context);
+                this.__runOnAfterLeaveCallbacks(context, previousContext);
+                if (this.__isLatestRender(context)) {
+                  // If there is another render pass started after this one,
+                  // the 'disappearing content' would be removed when the other
+                  // render pass calls `this.__addAppearingContent()`
+                  this.__removeDisappearingContent();
+
+                  this.__previousContext = context;
+                  return this.location;
+                }
+              }
+            )
+          }
+          else {
+            this.__addAppearingContent(context, previousContext);
+            const animationDone = this.__animateIfNeeded(context);
+
+            this.__runOnAfterEnterCallbacks(context);
+            this.__runOnAfterLeaveCallbacks(context, previousContext);
+
+            return animationDone.then(() => {
+              if (this.__isLatestRender(context)) {
+                // If there is another render pass started after this one,
+                // the 'disappearing content' would be removed when the other
+                // render pass calls `this.__addAppearingContent()`
+                this.__removeDisappearingContent();
+
+                this.__previousContext = context;
+                return this.location;
+              }
+            });
+          }
         }
       })
       .catch(error => {