diff --git a/packages/gitbook/src/components/PageAside/AsideSectionHighlight.tsx b/packages/gitbook/src/components/PageAside/AsideSectionHighlight.tsx
index 4b18d3d90..f4e4ec80e 100644
--- a/packages/gitbook/src/components/PageAside/AsideSectionHighlight.tsx
+++ b/packages/gitbook/src/components/PageAside/AsideSectionHighlight.tsx
@@ -1,47 +1,41 @@
 'use client';
 
-import { type Transition, motion, useReducedMotion } from 'framer-motion';
-
 import { type ClassValue, tcls } from '@/lib/tailwind';
+import React from 'react';
 
-export function AsideSectionHighlight({
-    transition,
-    className,
-}: {
-    transition?: Transition;
-    className?: ClassValue;
-}) {
-    const prefersReducedMotion = useReducedMotion();
+export const AsideSectionHighlight = React.memo(
+    ({
+        className,
+    }: {
+        className?: ClassValue;
+    }) => {
+        return (
+            <div
+                className={tcls([
+                    'border-primary-9',
+                    'tint:border-primary-11',
+                    'sidebar-list-line:border-l-2',
 
-    return (
-        <motion.div
-            layout
-            layoutId="sections-line"
-            className={tcls([
-                'border-primary-9',
-                'tint:border-primary-11',
-                'sidebar-list-line:border-l-2',
+                    'inset-0',
+                    'pointer-events-none',
+                    'absolute',
+                    'z-0',
+                    'sidebar-list-line:-left-px',
 
-                'inset-0',
-                'pointer-events-none',
-                'absolute',
-                'z-0',
-                'sidebar-list-line:-left-px',
+                    'rounded-md',
+                    'straight-corners:rounded-none',
+                    'circular-corners:rounded-2xl',
+                    'sidebar-list-line:rounded-l-none',
 
-                'rounded-md',
-                'straight-corners:rounded-none',
-                'circular-corners:rounded-2xl',
-                'sidebar-list-line:rounded-l-none',
+                    'sidebar-list-pill:bg-primary',
+                    '[html.theme-muted.sidebar-list-pill_&]:bg-primary-hover',
+                    '[html.theme-gradient.sidebar-list-pill_&]:bg-primary-active',
 
-                'sidebar-list-pill:bg-primary',
-                '[html.theme-muted.sidebar-list-pill_&]:bg-primary-hover',
-                '[html.theme-gradient.sidebar-list-pill_&]:bg-primary-active',
-
-                'contrast-more:border',
-                'contrast-more:bg-primary',
-                className,
-            ])}
-            transition={prefersReducedMotion ? { duration: 0 } : transition}
-        />
-    );
-}
+                    'contrast-more:border',
+                    'contrast-more:bg-primary',
+                    className,
+                ])}
+            />
+        );
+    }
+);
diff --git a/packages/gitbook/src/components/PageAside/ScrollSectionsList.tsx b/packages/gitbook/src/components/PageAside/ScrollSectionsList.tsx
index 0992b722f..15feeb750 100644
--- a/packages/gitbook/src/components/PageAside/ScrollSectionsList.tsx
+++ b/packages/gitbook/src/components/PageAside/ScrollSectionsList.tsx
@@ -19,13 +19,6 @@ const SECTION_INTERSECTING_THRESHOLD = 0.9;
  */
 const ACTIVE_ITEM_OFFSET = 100;
 
-const springCurve = {
-    type: 'spring',
-    stiffness: 700,
-    damping: 50,
-    mass: 0.8,
-};
-
 export function ScrollSectionsList(props: { sections: DocumentSection[] }) {
     const { sections } = props;
 
@@ -75,9 +68,8 @@ export function ScrollSectionsList(props: { sections: DocumentSection[] }) {
                     )}
                     ref={activeId === section.id ? activeItemRef : null}
                 >
-                    {activeId === section.id ? (
+                    {activeId === section.id && (
                         <AsideSectionHighlight
-                            transition={springCurve}
                             className={tcls(
                                 'sidebar-list-default:hidden',
                                 section?.depth > 1
@@ -91,7 +83,7 @@ export function ScrollSectionsList(props: { sections: DocumentSection[] }) {
                                       ]
                             )}
                         />
-                    ) : null}
+                    )}
                     <a
                         href={`#${section.id}`}
                         className={tcls(