diff --git a/docs/app/data/fixtures.tsx b/docs/app/data/fixtures.tsx
index a6664333c7..8c0f0d98c6 100644
--- a/docs/app/data/fixtures.tsx
+++ b/docs/app/data/fixtures.tsx
@@ -606,7 +606,12 @@ export const TRANSITION_CONFIG_DATA: CellData[][] = [
   [
     {
       label: 'enter',
-      content: ToContent,
+      content: (
+        <p>
+          The <code>enter</code> prop is used to pass styles to the animation
+          when the transition is entering.
+        </p>
+      ),
     },
     {
       label: 'object | object[] | function',
@@ -619,7 +624,12 @@ export const TRANSITION_CONFIG_DATA: CellData[][] = [
   [
     {
       label: 'update',
-      content: ToContent,
+      content: (
+        <p>
+          The <code>update</code> prop is used to pass styles to the animation
+          when the transition is updating.
+        </p>
+      ),
     },
     {
       label: 'object | object[] | function',
@@ -632,7 +642,12 @@ export const TRANSITION_CONFIG_DATA: CellData[][] = [
   [
     {
       label: 'leave',
-      content: ToContent,
+      content: (
+        <p>
+          The <code>leave</code> prop is used to pass styles to the animation
+          when the transition is leaving.
+        </p>
+      ),
     },
     {
       label: 'object | object[] | function',
diff --git a/docs/app/data/navigationSchema.generated.json b/docs/app/data/navigationSchema.generated.json
index 5230e736d5..1a1df246b4 100644
--- a/docs/app/data/navigationSchema.generated.json
+++ b/docs/app/data/navigationSchema.generated.json
@@ -1,307 +1 @@
-[
-  {
-    "href": "/docs",
-    "id": "index",
-    "title": "Overview",
-    "sidebarPosition": 1,
-    "children": []
-  },
-  {
-    "href": "/docs/getting-started",
-    "id": "getting-started",
-    "title": "Getting started",
-    "sidebarPosition": 2,
-    "children": []
-  },
-  {
-    "href": "/docs/concepts",
-    "id": "concepts",
-    "noPage": true,
-    "isNew": false,
-    "children": [
-      {
-        "id": "animated-elements",
-        "title": "Animated Elements",
-        "sidebarPosition": 1,
-        "children": [],
-        "href": "/docs/concepts/animated-elements",
-        "noPage": false,
-        "isNew": false
-      },
-      {
-        "id": "controllers-and-springs",
-        "title": "Controllers & Springs",
-        "sidebarPosition": 2,
-        "children": [],
-        "href": "/docs/concepts/controllers-and-springs",
-        "noPage": false,
-        "isNew": false
-      },
-      {
-        "id": "imperative-api",
-        "title": "Imperative API",
-        "sidebarPosition": 3,
-        "children": [],
-        "href": "/docs/concepts/imperative-api",
-        "noPage": false,
-        "isNew": false
-      },
-      {
-        "id": "targets",
-        "title": "Targets",
-        "sidebarPosition": 4,
-        "children": [],
-        "href": "/docs/concepts/targets",
-        "noPage": false,
-        "isNew": false
-      }
-    ],
-    "sidebarPosition": 3,
-    "title": "Concepts"
-  },
-  {
-    "href": "/docs/components",
-    "id": "components",
-    "noPage": false,
-    "isNew": false,
-    "children": [
-      {
-        "id": "use-spring",
-        "title": "useSpring",
-        "sidebarPosition": 1,
-        "children": [],
-        "href": "/docs/components/use-spring",
-        "noPage": false,
-        "isNew": false
-      },
-      {
-        "id": "use-springs",
-        "title": "useSprings",
-        "sidebarPosition": 2,
-        "children": [],
-        "href": "/docs/components/use-springs",
-        "noPage": false,
-        "isNew": false
-      },
-      {
-        "id": "use-spring-value",
-        "title": "useSpringValue",
-        "sidebarPosition": 3,
-        "children": [],
-        "href": "/docs/components/use-spring-value",
-        "noPage": false,
-        "isNew": true
-      },
-      {
-        "id": "use-transition",
-        "title": "useTransition",
-        "sidebarPosition": 4,
-        "children": [],
-        "href": "/docs/components/use-transition",
-        "noPage": false,
-        "isNew": false
-      },
-      {
-        "id": "use-chain",
-        "title": "useChain",
-        "sidebarPosition": 5,
-        "children": [],
-        "href": "/docs/components/use-chain",
-        "noPage": false,
-        "isNew": false
-      },
-      {
-        "id": "use-trail",
-        "title": "useTrail",
-        "sidebarPosition": 6,
-        "children": [],
-        "href": "/docs/components/use-trail",
-        "noPage": false,
-        "isNew": false
-      },
-      {
-        "id": "parallax",
-        "title": "Parallax",
-        "sidebarPosition": 7,
-        "children": [],
-        "href": "/docs/components/parallax",
-        "noPage": false,
-        "isNew": false
-      },
-      {
-        "id": "parallax-layer",
-        "title": "Parallax Layer",
-        "sidebarPosition": 8,
-        "children": [],
-        "href": "/docs/components/parallax-layer",
-        "noPage": false,
-        "isNew": false
-      }
-    ],
-    "sidebarPosition": 4,
-    "title": "Components"
-  },
-  {
-    "href": "/docs/advanced",
-    "id": "advanced",
-    "noPage": true,
-    "isNew": false,
-    "children": [
-      {
-        "id": "config",
-        "title": "Spring Configs",
-        "sidebarPosition": 1,
-        "children": [],
-        "href": "/docs/advanced/config",
-        "noPage": false,
-        "isNew": false
-      },
-      {
-        "id": "events",
-        "title": "Events",
-        "sidebarPosition": 2,
-        "children": [],
-        "href": "/docs/advanced/events",
-        "noPage": false,
-        "isNew": false
-      },
-      {
-        "id": "controller",
-        "title": "Controller",
-        "sidebarPosition": 3,
-        "children": [],
-        "href": "/docs/advanced/controller",
-        "noPage": false,
-        "isNew": false
-      },
-      {
-        "id": "spring-value",
-        "title": "SpringValue",
-        "sidebarPosition": 4,
-        "children": [],
-        "href": "/docs/advanced/spring-value",
-        "noPage": false,
-        "isNew": false
-      },
-      {
-        "id": "spring-ref",
-        "title": "SpringRef",
-        "sidebarPosition": 5,
-        "children": [],
-        "href": "/docs/advanced/spring-ref",
-        "noPage": false,
-        "isNew": false
-      },
-      {
-        "id": "interpolation",
-        "title": "Interpolation",
-        "sidebarPosition": 6,
-        "children": [],
-        "href": "/docs/advanced/interpolation",
-        "noPage": false,
-        "isNew": false
-      },
-      {
-        "id": "async-animations",
-        "title": "Async Animations",
-        "sidebarPosition": 7,
-        "children": [],
-        "href": "/docs/advanced/async-animations",
-        "noPage": false,
-        "isNew": false
-      }
-    ],
-    "sidebarPosition": 5,
-    "title": "Advanced API"
-  },
-  {
-    "href": "/docs/guides",
-    "id": "guides",
-    "noPage": true,
-    "isNew": false,
-    "children": [
-      {
-        "id": "react-three-fiber",
-        "title": "React Three Fiber",
-        "sidebarPosition": 1,
-        "children": [],
-        "href": "/docs/guides/react-three-fiber",
-        "noPage": false,
-        "isNew": false
-      },
-      {
-        "id": "testing",
-        "title": "Testing",
-        "sidebarPosition": 2,
-        "children": [],
-        "href": "/docs/guides/testing",
-        "noPage": false,
-        "isNew": false
-      }
-    ],
-    "sidebarPosition": 6,
-    "title": "Guides"
-  },
-  {
-    "href": "/docs/utilities",
-    "id": "utilities",
-    "noPage": true,
-    "isNew": false,
-    "children": [
-      {
-        "id": "use-isomorphic-layout-effect",
-        "title": "useIsomorphicLayout",
-        "sidebarPosition": 1,
-        "children": [],
-        "href": "/docs/utilities/use-isomorphic-layout-effect",
-        "noPage": false,
-        "isNew": false
-      },
-      {
-        "id": "use-reduced-motion",
-        "title": "useReducedMotion",
-        "sidebarPosition": 2,
-        "children": [],
-        "href": "/docs/utilities/use-reduced-motion",
-        "noPage": false,
-        "isNew": false
-      },
-      {
-        "id": "use-scroll",
-        "title": "useScroll",
-        "sidebarPosition": 3,
-        "children": [],
-        "href": "/docs/utilities/use-scroll",
-        "noPage": false,
-        "isNew": true
-      },
-      {
-        "id": "use-resize",
-        "title": "useResize",
-        "sidebarPosition": 4,
-        "children": [],
-        "href": "/docs/utilities/use-resize",
-        "noPage": false,
-        "isNew": true
-      },
-      {
-        "id": "use-in-view",
-        "title": "useInView",
-        "sidebarPosition": 5,
-        "children": [],
-        "href": "/docs/utilities/use-in-view",
-        "noPage": false,
-        "isNew": true
-      }
-    ],
-    "sidebarPosition": 7,
-    "title": "Utilities"
-  },
-  {
-    "href": "/docs/typescript",
-    "id": "typescript",
-    "title": "Typescript",
-    "sidebarPosition": 8,
-    "children": []
-  }
-]
+[{"href":"/docs","id":"index","title":"Overview","sidebarPosition":1,"children":[]},{"href":"/docs/getting-started","id":"getting-started","title":"Getting started","sidebarPosition":2,"children":[]},{"href":"/docs/concepts","id":"concepts","noPage":true,"isNew":false,"children":[{"id":"animated-elements","title":"Animated Elements","sidebarPosition":1,"children":[],"href":"/docs/concepts/animated-elements","noPage":false,"isNew":false},{"id":"controllers-and-springs","title":"Controllers & Springs","sidebarPosition":2,"children":[],"href":"/docs/concepts/controllers-and-springs","noPage":false,"isNew":false},{"id":"imperative-api","title":"Imperative API","sidebarPosition":3,"children":[],"href":"/docs/concepts/imperative-api","noPage":false,"isNew":false},{"id":"targets","title":"Targets","sidebarPosition":4,"children":[],"href":"/docs/concepts/targets","noPage":false,"isNew":false}],"sidebarPosition":3,"title":"Concepts"},{"href":"/docs/components","id":"components","noPage":false,"isNew":false,"children":[{"id":"use-spring","title":"useSpring","sidebarPosition":1,"children":[],"href":"/docs/components/use-spring","noPage":false,"isNew":false},{"id":"use-springs","title":"useSprings","sidebarPosition":2,"children":[],"href":"/docs/components/use-springs","noPage":false,"isNew":false},{"id":"use-spring-value","title":"useSpringValue","sidebarPosition":3,"children":[],"href":"/docs/components/use-spring-value","noPage":false,"isNew":true},{"id":"use-transition","title":"useTransition","sidebarPosition":4,"children":[],"href":"/docs/components/use-transition","noPage":false,"isNew":false},{"id":"use-chain","title":"useChain","sidebarPosition":5,"children":[],"href":"/docs/components/use-chain","noPage":false,"isNew":false},{"id":"use-trail","title":"useTrail","sidebarPosition":6,"children":[],"href":"/docs/components/use-trail","noPage":false,"isNew":false},{"id":"parallax","title":"Parallax","sidebarPosition":7,"children":[],"href":"/docs/components/parallax","noPage":false,"isNew":false},{"id":"parallax-layer","title":"Parallax Layer","sidebarPosition":8,"children":[],"href":"/docs/components/parallax-layer","noPage":false,"isNew":false}],"sidebarPosition":4,"title":"Components"},{"href":"/docs/advanced","id":"advanced","noPage":true,"isNew":false,"children":[{"id":"config","title":"Spring Configs","sidebarPosition":1,"children":[],"href":"/docs/advanced/config","noPage":false,"isNew":false},{"id":"events","title":"Events","sidebarPosition":2,"children":[],"href":"/docs/advanced/events","noPage":false,"isNew":false},{"id":"controller","title":"Controller","sidebarPosition":3,"children":[],"href":"/docs/advanced/controller","noPage":false,"isNew":false},{"id":"spring-value","title":"SpringValue","sidebarPosition":4,"children":[],"href":"/docs/advanced/spring-value","noPage":false,"isNew":false},{"id":"spring-ref","title":"SpringRef","sidebarPosition":5,"children":[],"href":"/docs/advanced/spring-ref","noPage":false,"isNew":false},{"id":"interpolation","title":"Interpolation","sidebarPosition":6,"children":[],"href":"/docs/advanced/interpolation","noPage":false,"isNew":false},{"id":"async-animations","title":"Async Animations","sidebarPosition":7,"children":[],"href":"/docs/advanced/async-animations","noPage":false,"isNew":false}],"sidebarPosition":5,"title":"Advanced API"},{"href":"/docs/guides","id":"guides","noPage":true,"isNew":false,"children":[{"id":"react-three-fiber","title":"React Three Fiber","sidebarPosition":1,"children":[],"href":"/docs/guides/react-three-fiber","noPage":false,"isNew":false},{"id":"testing","title":"Testing","sidebarPosition":2,"children":[],"href":"/docs/guides/testing","noPage":false,"isNew":false}],"sidebarPosition":6,"title":"Guides"},{"href":"/docs/utilities","id":"utilities","noPage":true,"isNew":false,"children":[{"id":"use-isomorphic-layout-effect","title":"useIsomorphicLayout","sidebarPosition":1,"children":[],"href":"/docs/utilities/use-isomorphic-layout-effect","noPage":false,"isNew":false},{"id":"use-reduced-motion","title":"useReducedMotion","sidebarPosition":2,"children":[],"href":"/docs/utilities/use-reduced-motion","noPage":false,"isNew":false},{"id":"use-scroll","title":"useScroll","sidebarPosition":3,"children":[],"href":"/docs/utilities/use-scroll","noPage":false,"isNew":true},{"id":"use-resize","title":"useResize","sidebarPosition":4,"children":[],"href":"/docs/utilities/use-resize","noPage":false,"isNew":true},{"id":"use-in-view","title":"useInView","sidebarPosition":5,"children":[],"href":"/docs/utilities/use-in-view","noPage":false,"isNew":true}],"sidebarPosition":7,"title":"Utilities"},{"href":"/docs/typescript","id":"typescript","title":"Typescript","sidebarPosition":8,"children":[]}]
diff --git a/docs/app/data/subnavSchema.generated.json b/docs/app/data/subnavSchema.generated.json
index 8c5741af7d..7e58d37bd0 100644
--- a/docs/app/data/subnavSchema.generated.json
+++ b/docs/app/data/subnavSchema.generated.json
@@ -1,323 +1 @@
-{
-  "/getting-started": [
-    { "href": "#install", "label": "Install", "id": "install" },
-    {
-      "href": "#the-animated-element",
-      "label": "The Animated Element",
-      "id": "the-animated-element"
-    },
-    { "href": "#the-hook", "label": "The Hook", "id": "the-hook" },
-    {
-      "href": "#your-first-animation",
-      "label": "Your First Animation",
-      "id": "your-first-animation"
-    },
-    {
-      "href": "#reacting-to-events",
-      "label": "Reacting to events",
-      "id": "reacting-to-events"
-    },
-    { "href": "#next-steps", "label": "Next Steps", "id": "next-steps" }
-  ],
-  "/typescript": [
-    { "href": "#animation", "label": "Animation", "id": "animation" },
-    {
-      "href": "#animationprops",
-      "label": "AnimationProps",
-      "id": "animationprops"
-    },
-    {
-      "href": "#controllerupdate",
-      "label": "ControllerUpdate",
-      "id": "controllerupdate"
-    },
-    { "href": "#lookup", "label": "Lookup", "id": "lookup" },
-    { "href": "#oneormore", "label": "OneOrMore", "id": "oneormore" },
-    { "href": "#springupdate", "label": "SpringUpdate", "id": "springupdate" },
-    { "href": "#springvalues", "label": "SpringValues", "id": "springvalues" },
-    {
-      "href": "#transitionstate",
-      "label": "TransitionState",
-      "id": "transitionstate"
-    },
-    { "href": "#unknownprops", "label": "UnknownProps", "id": "unknownprops" }
-  ],
-  "/utilities/index": [],
-  "/utilities/use-in-view": [
-    { "href": "#usage", "label": "Usage", "id": "usage" },
-    { "href": "#references", "label": "References", "id": "references" },
-    { "href": "#typescript", "label": "Typescript", "id": "typescript" },
-    { "href": "#examples", "label": "Examples", "id": "examples" }
-  ],
-  "/utilities/use-isomorphic-layout-effect": [
-    { "href": "#usage", "label": "Usage", "id": "usage" },
-    {
-      "href": "#why-do-we-need-this",
-      "label": "Why do we need this?",
-      "id": "why-do-we-need-this"
-    },
-    {
-      "href": "#what-does-it-do",
-      "label": "What does it do?",
-      "id": "what-does-it-do"
-    },
-    { "href": "#typescript", "label": "Typescript", "id": "typescript" }
-  ],
-  "/utilities/use-reduced-motion": [
-    { "href": "#usage", "label": "Usage", "id": "usage" },
-    {
-      "href": "#stopping-animations",
-      "label": "Stopping animations",
-      "id": "stopping-animations"
-    },
-    {
-      "href": "#why-is-it-important",
-      "label": "Why is it important?",
-      "id": "why-is-it-important"
-    },
-    { "href": "#typescript", "label": "Typescript", "id": "typescript" }
-  ],
-  "/utilities/use-resize": [
-    { "href": "#usage", "label": "Usage", "id": "usage" },
-    { "href": "#reference", "label": "Reference", "id": "reference" },
-    { "href": "#typescript", "label": "Typescript", "id": "typescript" }
-  ],
-  "/utilities/use-scroll": [
-    { "href": "#usage", "label": "Usage", "id": "usage" },
-    { "href": "#reference", "label": "Reference", "id": "reference" },
-    { "href": "#typescript", "label": "Typescript", "id": "typescript" },
-    { "href": "#examples", "label": "Examples", "id": "examples" }
-  ],
-  "/guides/index": [],
-  "/guides/react-three-fiber": [
-    { "href": "#introduction", "label": "Introduction", "id": "introduction" },
-    {
-      "href": "#why-use-the-library",
-      "label": "Why use the library?",
-      "id": "why-use-the-library"
-    },
-    {
-      "href": "#use-the-imperative-api",
-      "label": "Use the imperative API",
-      "id": "use-the-imperative-api"
-    },
-    {
-      "href": "#syncing-spring-values",
-      "label": "Syncing spring values",
-      "id": "syncing-spring-values"
-    },
-    {
-      "href": "#troubleshooting",
-      "label": "Troubleshooting",
-      "id": "troubleshooting"
-    }
-  ],
-  "/guides/testing": [
-    { "href": "#introduction", "label": "Introduction", "id": "introduction" },
-    { "href": "#example", "label": "Example", "id": "example" },
-    {
-      "href": "#skipping-animations",
-      "label": "Skipping Animations",
-      "id": "skipping-animations"
-    },
-    { "href": "#fake-timers", "label": "Fake Timers", "id": "fake-timers" },
-    {
-      "href": "#troubleshooting",
-      "label": "Troubleshooting",
-      "id": "troubleshooting"
-    }
-  ],
-  "/concepts/animated-elements": [
-    {
-      "href": "#what-are-they",
-      "label": "What are they?",
-      "id": "what-are-they"
-    },
-    {
-      "href": "#animating-elements",
-      "label": "Animating elements",
-      "id": "animating-elements"
-    },
-    {
-      "href": "#animating-components",
-      "label": "Animating components",
-      "id": "animating-components"
-    },
-    {
-      "href": "#example-using-stitches--radixui",
-      "label": "Example: using stitches & radix-ui",
-      "id": "example-using-stitches--radixui"
-    },
-    { "href": "#deep-dive", "label": "Deep dive", "id": "deep-dive" }
-  ],
-  "/concepts/controllers-and-springs": [
-    {
-      "href": "#what-you-know",
-      "label": "What you know",
-      "id": "what-you-know"
-    },
-    { "href": "#controller", "label": "Controller", "id": "controller" },
-    { "href": "#spring-value", "label": "Spring value", "id": "spring-value" },
-    { "href": "#frame-value", "label": "Frame value", "id": "frame-value" },
-    { "href": "#fluids", "label": "Fluids", "id": "fluids" },
-    {
-      "href": "#what-you-learnt",
-      "label": "What you learnt",
-      "id": "what-you-learnt"
-    }
-  ],
-  "/concepts/imperative-api": [
-    { "href": "#comparison", "label": "Comparison", "id": "comparison" },
-    { "href": "#methods", "label": "Methods", "id": "methods" },
-    {
-      "href": "#upgrading-from-v8",
-      "label": "Upgrading from v8",
-      "id": "upgrading-from-v8"
-    }
-  ],
-  "/concepts/index": [],
-  "/concepts/targets": [
-    {
-      "href": "#what-is-a-target",
-      "label": "What is a target?",
-      "id": "what-is-a-target"
-    },
-    {
-      "href": "#adding-a-target",
-      "label": "Adding a target",
-      "id": "adding-a-target"
-    }
-  ],
-  "/components/parallax-layer": [
-    { "href": "#usage", "label": "Usage", "id": "usage" },
-    { "href": "#reference", "label": "Reference", "id": "reference" },
-    { "href": "#ref", "label": "Ref", "id": "ref" },
-    { "href": "#examples", "label": "Examples", "id": "examples" }
-  ],
-  "/components/parallax": [
-    { "href": "#usage", "label": "Usage", "id": "usage" },
-    { "href": "#reference", "label": "Reference", "id": "reference" },
-    { "href": "#ref", "label": "Ref", "id": "ref" },
-    { "href": "#examples", "label": "Examples", "id": "examples" }
-  ],
-  "/components/use-chain": [
-    { "href": "#usage", "label": "Usage", "id": "usage" },
-    {
-      "href": "#timesteps-explained",
-      "label": "Timesteps Explained",
-      "id": "timesteps-explained"
-    },
-    { "href": "#reference", "label": "Reference", "id": "reference" },
-    { "href": "#typescript", "label": "Typescript", "id": "typescript" },
-    { "href": "#examples", "label": "Examples", "id": "examples" }
-  ],
-  "/components/use-spring-value": [
-    { "href": "#usage", "label": "Usage", "id": "usage" },
-    { "href": "#updating", "label": "Updating", "id": "updating" },
-    { "href": "#reference", "label": "Reference", "id": "reference" },
-    { "href": "#typescript", "label": "Typescript", "id": "typescript" },
-    { "href": "#examples", "label": "Examples", "id": "examples" }
-  ],
-  "/components/use-spring": [
-    { "href": "#usage", "label": "Usage", "id": "usage" },
-    { "href": "#reference", "label": "Reference", "id": "reference" },
-    { "href": "#typescript", "label": "Typescript", "id": "typescript" },
-    { "href": "#examples", "label": "Examples", "id": "examples" }
-  ],
-  "/components/use-springs": [
-    { "href": "#usage", "label": "Usage", "id": "usage" },
-    { "href": "#reference", "label": "Reference", "id": "reference" },
-    { "href": "#typescript", "label": "Typescript", "id": "typescript" },
-    { "href": "#examples", "label": "Examples", "id": "examples" }
-  ],
-  "/components/use-trail": [
-    { "href": "#usage", "label": "Usage", "id": "usage" },
-    { "href": "#reference", "label": "Reference", "id": "reference" },
-    { "href": "#typescript", "label": "Typescript", "id": "typescript" },
-    { "href": "#examples", "label": "Examples", "id": "examples" }
-  ],
-  "/components/use-transition": [
-    { "href": "#usage", "label": "Usage", "id": "usage" },
-    { "href": "#reference", "label": "Reference", "id": "reference" },
-    { "href": "#typescript", "label": "Typescript", "id": "typescript" },
-    { "href": "#examples", "label": "Examples", "id": "examples" }
-  ],
-  "/advanced/async-animations": [
-    {
-      "href": "#arent-all-animations-async",
-      "label": "Aren't all animations async?",
-      "id": "arent-all-animations-async"
-    },
-    { "href": "#the-to-prop", "label": "The to prop", "id": "the-to-prop" },
-    {
-      "href": "#chaining-animations",
-      "label": "Chaining animations",
-      "id": "chaining-animations"
-    },
-    {
-      "href": "#writing-animation-scripts",
-      "label": "Writing animation scripts",
-      "id": "writing-animation-scripts"
-    }
-  ],
-  "/advanced/config": [
-    { "href": "#usage", "label": "Usage", "id": "usage" },
-    {
-      "href": "#config-visualizer",
-      "label": "Config Visualizer",
-      "id": "config-visualizer"
-    },
-    { "href": "#easings", "label": "Easings", "id": "easings" },
-    { "href": "#reference", "label": "Reference", "id": "reference" },
-    { "href": "#pitfalls", "label": "Pitfalls", "id": "pitfalls" }
-  ],
-  "/advanced/controller": [
-    { "href": "#usage", "label": "Usage", "id": "usage" },
-    { "href": "#properties", "label": "Properties", "id": "properties" },
-    { "href": "#methods", "label": "Methods", "id": "methods" }
-  ],
-  "/advanced/events": [
-    {
-      "href": "#keys-vs-springs",
-      "label": "Keys vs Springs",
-      "id": "keys-vs-springs"
-    },
-    { "href": "#onstart", "label": "onStart", "id": "onstart" },
-    { "href": "#onchange", "label": "onChange", "id": "onchange" },
-    { "href": "#onrest", "label": "onRest", "id": "onrest" },
-    { "href": "#onpause", "label": "onPause", "id": "onpause" },
-    { "href": "#onresume", "label": "onResume", "id": "onresume" },
-    { "href": "#onresolve", "label": "onResolve", "id": "onresolve" },
-    { "href": "#onprops", "label": "onProps", "id": "onprops" },
-    { "href": "#ondestroyed", "label": "onDestroyed", "id": "ondestroyed" },
-    { "href": "#typescript", "label": "Typescript", "id": "typescript" }
-  ],
-  "/advanced/index": [],
-  "/advanced/interpolation": [
-    { "href": "#what-is-one", "label": "What is one?", "id": "what-is-one" },
-    { "href": "#basic-usage", "label": "Basic Usage", "id": "basic-usage" },
-    {
-      "href": "#advanced-usage",
-      "label": "Advanced Usage",
-      "id": "advanced-usage"
-    },
-    { "href": "#config", "label": "Config", "id": "config" },
-    {
-      "href": "#overriding-the-global-to-function",
-      "label": "Overriding the global to function",
-      "id": "overriding-the-global-to-function"
-    },
-    { "href": "#typescript", "label": "Typescript", "id": "typescript" }
-  ],
-  "/advanced/spring-ref": [
-    { "href": "#usage", "label": "Usage", "id": "usage" },
-    { "href": "#properties", "label": "Properties", "id": "properties" },
-    { "href": "#methods", "label": "Methods", "id": "methods" }
-  ],
-  "/advanced/spring-value": [
-    { "href": "#usage", "label": "Usage", "id": "usage" },
-    { "href": "#properties", "label": "Properties", "id": "properties" },
-    { "href": "#methods", "label": "Methods", "id": "methods" },
-    { "href": "#ts-glossary", "label": "TS Glossary", "id": "ts-glossary" }
-  ]
-}
+{"/getting-started":[{"href":"#install","label":"Install","id":"install"},{"href":"#the-animated-element","label":"The Animated Element","id":"the-animated-element"},{"href":"#the-hook","label":"The Hook","id":"the-hook"},{"href":"#your-first-animation","label":"Your First Animation","id":"your-first-animation"},{"href":"#reacting-to-events","label":"Reacting to events","id":"reacting-to-events"},{"href":"#next-steps","label":"Next Steps","id":"next-steps"}],"/typescript":[{"href":"#animation","label":"Animation","id":"animation"},{"href":"#animationprops","label":"AnimationProps","id":"animationprops"},{"href":"#controllerupdate","label":"ControllerUpdate","id":"controllerupdate"},{"href":"#lookup","label":"Lookup","id":"lookup"},{"href":"#oneormore","label":"OneOrMore","id":"oneormore"},{"href":"#springupdate","label":"SpringUpdate","id":"springupdate"},{"href":"#springvalues","label":"SpringValues","id":"springvalues"},{"href":"#transitionstate","label":"TransitionState","id":"transitionstate"},{"href":"#unknownprops","label":"UnknownProps","id":"unknownprops"}],"/utilities/index":[],"/utilities/use-in-view":[{"href":"#usage","label":"Usage","id":"usage"},{"href":"#references","label":"References","id":"references"},{"href":"#typescript","label":"Typescript","id":"typescript"},{"href":"#examples","label":"Examples","id":"examples"}],"/utilities/use-isomorphic-layout-effect":[{"href":"#usage","label":"Usage","id":"usage"},{"href":"#why-do-we-need-this","label":"Why do we need this?","id":"why-do-we-need-this"},{"href":"#what-does-it-do","label":"What does it do?","id":"what-does-it-do"},{"href":"#typescript","label":"Typescript","id":"typescript"}],"/utilities/use-reduced-motion":[{"href":"#usage","label":"Usage","id":"usage"},{"href":"#stopping-animations","label":"Stopping animations","id":"stopping-animations"},{"href":"#why-is-it-important","label":"Why is it important?","id":"why-is-it-important"},{"href":"#typescript","label":"Typescript","id":"typescript"}],"/utilities/use-resize":[{"href":"#usage","label":"Usage","id":"usage"},{"href":"#reference","label":"Reference","id":"reference"},{"href":"#typescript","label":"Typescript","id":"typescript"}],"/utilities/use-scroll":[{"href":"#usage","label":"Usage","id":"usage"},{"href":"#reference","label":"Reference","id":"reference"},{"href":"#typescript","label":"Typescript","id":"typescript"},{"href":"#examples","label":"Examples","id":"examples"}],"/guides/index":[],"/guides/react-three-fiber":[{"href":"#introduction","label":"Introduction","id":"introduction"},{"href":"#why-use-the-library","label":"Why use the library?","id":"why-use-the-library"},{"href":"#use-the-imperative-api","label":"Use the imperative API","id":"use-the-imperative-api"},{"href":"#syncing-spring-values","label":"Syncing spring values","id":"syncing-spring-values"},{"href":"#troubleshooting","label":"Troubleshooting","id":"troubleshooting"}],"/guides/testing":[{"href":"#introduction","label":"Introduction","id":"introduction"},{"href":"#example","label":"Example","id":"example"},{"href":"#skipping-animations","label":"Skipping Animations","id":"skipping-animations"},{"href":"#fake-timers","label":"Fake Timers","id":"fake-timers"},{"href":"#troubleshooting","label":"Troubleshooting","id":"troubleshooting"}],"/concepts/animated-elements":[{"href":"#what-are-they","label":"What are they?","id":"what-are-they"},{"href":"#animating-elements","label":"Animating elements","id":"animating-elements"},{"href":"#animating-components","label":"Animating components","id":"animating-components"},{"href":"#example-using-stitches--radixui","label":"Example: using stitches & radix-ui","id":"example-using-stitches--radixui"},{"href":"#deep-dive","label":"Deep dive","id":"deep-dive"}],"/concepts/controllers-and-springs":[{"href":"#what-you-know","label":"What you know","id":"what-you-know"},{"href":"#controller","label":"Controller","id":"controller"},{"href":"#spring-value","label":"Spring value","id":"spring-value"},{"href":"#frame-value","label":"Frame value","id":"frame-value"},{"href":"#fluids","label":"Fluids","id":"fluids"},{"href":"#what-you-learnt","label":"What you learnt","id":"what-you-learnt"}],"/concepts/imperative-api":[{"href":"#comparison","label":"Comparison","id":"comparison"},{"href":"#methods","label":"Methods","id":"methods"},{"href":"#upgrading-from-v8","label":"Upgrading from v8","id":"upgrading-from-v8"}],"/concepts/index":[],"/concepts/targets":[{"href":"#what-is-a-target","label":"What is a target?","id":"what-is-a-target"},{"href":"#adding-a-target","label":"Adding a target","id":"adding-a-target"}],"/components/parallax-layer":[{"href":"#usage","label":"Usage","id":"usage"},{"href":"#reference","label":"Reference","id":"reference"},{"href":"#ref","label":"Ref","id":"ref"},{"href":"#examples","label":"Examples","id":"examples"}],"/components/parallax":[{"href":"#usage","label":"Usage","id":"usage"},{"href":"#reference","label":"Reference","id":"reference"},{"href":"#ref","label":"Ref","id":"ref"},{"href":"#examples","label":"Examples","id":"examples"}],"/components/use-chain":[{"href":"#usage","label":"Usage","id":"usage"},{"href":"#timesteps-explained","label":"Timesteps Explained","id":"timesteps-explained"},{"href":"#reference","label":"Reference","id":"reference"},{"href":"#typescript","label":"Typescript","id":"typescript"},{"href":"#examples","label":"Examples","id":"examples"}],"/components/use-spring-value":[{"href":"#usage","label":"Usage","id":"usage"},{"href":"#updating","label":"Updating","id":"updating"},{"href":"#reference","label":"Reference","id":"reference"},{"href":"#typescript","label":"Typescript","id":"typescript"},{"href":"#examples","label":"Examples","id":"examples"}],"/components/use-spring":[{"href":"#usage","label":"Usage","id":"usage"},{"href":"#reference","label":"Reference","id":"reference"},{"href":"#typescript","label":"Typescript","id":"typescript"},{"href":"#examples","label":"Examples","id":"examples"}],"/components/use-springs":[{"href":"#usage","label":"Usage","id":"usage"},{"href":"#reference","label":"Reference","id":"reference"},{"href":"#typescript","label":"Typescript","id":"typescript"},{"href":"#examples","label":"Examples","id":"examples"}],"/components/use-trail":[{"href":"#usage","label":"Usage","id":"usage"},{"href":"#reference","label":"Reference","id":"reference"},{"href":"#typescript","label":"Typescript","id":"typescript"},{"href":"#examples","label":"Examples","id":"examples"}],"/components/use-transition":[{"href":"#usage","label":"Usage","id":"usage"},{"href":"#reference","label":"Reference","id":"reference"},{"href":"#typescript","label":"Typescript","id":"typescript"},{"href":"#examples","label":"Examples","id":"examples"}],"/advanced/async-animations":[{"href":"#arent-all-animations-async","label":"Aren't all animations async?","id":"arent-all-animations-async"},{"href":"#the-to-prop","label":"The to prop","id":"the-to-prop"},{"href":"#chaining-animations","label":"Chaining animations","id":"chaining-animations"},{"href":"#writing-animation-scripts","label":"Writing animation scripts","id":"writing-animation-scripts"}],"/advanced/config":[{"href":"#usage","label":"Usage","id":"usage"},{"href":"#config-visualizer","label":"Config Visualizer","id":"config-visualizer"},{"href":"#easings","label":"Easings","id":"easings"},{"href":"#reference","label":"Reference","id":"reference"},{"href":"#pitfalls","label":"Pitfalls","id":"pitfalls"}],"/advanced/controller":[{"href":"#usage","label":"Usage","id":"usage"},{"href":"#properties","label":"Properties","id":"properties"},{"href":"#methods","label":"Methods","id":"methods"}],"/advanced/events":[{"href":"#keys-vs-springs","label":"Keys vs Springs","id":"keys-vs-springs"},{"href":"#onstart","label":"onStart","id":"onstart"},{"href":"#onchange","label":"onChange","id":"onchange"},{"href":"#onrest","label":"onRest","id":"onrest"},{"href":"#onpause","label":"onPause","id":"onpause"},{"href":"#onresume","label":"onResume","id":"onresume"},{"href":"#onresolve","label":"onResolve","id":"onresolve"},{"href":"#onprops","label":"onProps","id":"onprops"},{"href":"#ondestroyed","label":"onDestroyed","id":"ondestroyed"},{"href":"#typescript","label":"Typescript","id":"typescript"}],"/advanced/index":[],"/advanced/interpolation":[{"href":"#what-is-one","label":"What is one?","id":"what-is-one"},{"href":"#basic-usage","label":"Basic Usage","id":"basic-usage"},{"href":"#advanced-usage","label":"Advanced Usage","id":"advanced-usage"},{"href":"#config","label":"Config","id":"config"},{"href":"#overriding-the-global-to-function","label":"Overriding the global to function","id":"overriding-the-global-to-function"},{"href":"#typescript","label":"Typescript","id":"typescript"}],"/advanced/spring-ref":[{"href":"#usage","label":"Usage","id":"usage"},{"href":"#properties","label":"Properties","id":"properties"},{"href":"#methods","label":"Methods","id":"methods"}],"/advanced/spring-value":[{"href":"#usage","label":"Usage","id":"usage"},{"href":"#properties","label":"Properties","id":"properties"},{"href":"#methods","label":"Methods","id":"methods"},{"href":"#ts-glossary","label":"TS Glossary","id":"ts-glossary"}]}