gsadmin/gitbook
1
0
Fork 0
mirror of https://github.com/GitbookIO/gitbook.git synced 2026-09-24 19:32:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove motion animations from ScrollSectionList (#3573)

Browse Source 
Co-authored-by: Nicolas Dorseuil <nicolas@gitbook.io>
This commit is contained in:
conico974
2025-08-20 19:14:01 +02:00
committed by GitHub
parent 6217a2ed3b
commit fa6ef0c01c
2 changed files with 35 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/gitbook/src/components/PageAside/AsideSectionHighlight.tsx
+33 -39
View File
@@ -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,
])}
/>
);
}
);
packages/gitbook/src/components/PageAside/ScrollSectionsList.tsx
+2 -10
View File
@@ -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(