Group GSAP stories

src/gsap/components/SplitTextWrapper/SplitTextWrapper.mdx

@@ -1,7 +1,7 @@
 import { Meta, Canvas, Controls } from '@storybook/blocks';
 import * as stories from './SplitTextWrapper.stories';
 
-<Meta title="components/SplitTextWrapper" of={stories} />
+<Meta title="GSAP / Components / SplitTextWrapper" of={stories} />
 
 # SplitTextWrapper
 

src/gsap/components/SplitTextWrapper/SplitTextWrapper.stories.tsx

@@ -8,7 +8,7 @@ import { useAnimation } from '../../hooks/useAnimation/useAnimation.js';
 import { SplitTextWrapper } from './SplitTextWrapper.js';
 
 const meta = {
-  title: 'components/SplitTextWrapper',
+  title: 'GSAP / Components / SplitTextWrapper',
   component: SplitTextWrapper,
 } as Meta;
 

src/gsap/hooks/useAnimation/useAnimation.mdx

@@ -1,7 +1,7 @@
 import { Meta, Canvas } from '@storybook/blocks';
 import * as stories from './useAnimation.stories';
 
-<Meta title="hooks/useAnimation" />
+<Meta title="GSAP / Hooks / useAnimation" />
 
 # useAnimation
 

src/gsap/hooks/useAnimation/useAnimation.stories.tsx

@@ -4,7 +4,7 @@ import { useCallback, useRef, type ReactElement } from 'react';
 import { useAnimation } from './useAnimation.js';
 
 export default {
-  title: 'hooks/useAnimation',
+  title: 'GSAP / Hooks / useAnimation',
   component: Timeline,
 };
 

src/gsap/hooks/useExposeAnimation/useExposeAnimation.mdx

@@ -1,7 +1,7 @@
 import { Meta } from '@storybook/blocks';
 import { UseExposeAnimation } from './useExposeAnimation.stories';
 
-<Meta title="hooks/useExposeAnimation" />
+<Meta title="GSAP / Hooks / useExposeAnimation" />
 
 # useExposeAnimation
 

src/gsap/hooks/useExposeAnimation/useExposeAnimation.stories.tsx

@@ -8,7 +8,7 @@ import { useAnimation } from '../useAnimation/useAnimation.js';
 import { useExposeAnimation } from '../useExposeAnimation/useExposeAnimation.js';
 
 const meta = {
-  title: 'hooks/useExposeAnimation',
+  title: 'GSAP / Hooks / useExposeAnimation',
 } satisfies Meta;
 
 export default meta;

src/gsap/hooks/useExposedAnimation/useExposedAnimation.mdx

@@ -1,7 +1,7 @@
 import { Meta, Canvas } from '@storybook/blocks';
 import * as stories from './useExposedAnimation.stories';
 
-<Meta title="hooks/useExposedAnimation" />
+<Meta title="GSAP / Hooks / useExposedAnimation" />
 
 # useExposedAnimation
 

src/gsap/hooks/useExposedAnimation/useExposedAnimation.stories.tsx

@@ -10,7 +10,7 @@ import { useExposeAnimation } from '../useExposeAnimation/useExposeAnimation.js'
 import { useExposedAnimation } from './useExposedAnimation.js';
 
 const meta = {
-  title: 'hooks/useExposedAnimation',
+  title: 'GSAP / Hooks / useExposedAnimation',
 } satisfies Meta;
 
 export default meta;

src/gsap/hooks/useExposedAnimations/useExposedAnimations.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="hooks/useExposedAnimations" />
+<Meta title="GSAP / Hooks / useExposedAnimations" />
 
 # useExposedAnimations
 

src/gsap/hooks/useExposedAnimations/useExposedAnimations.stories.tsx

@@ -9,7 +9,7 @@ import { useScrollAnimation } from '../useScrollAnimation/useScrollAnimation.js'
 import { useExposedAnimations } from './useExposedAnimations.js';
 
 export default {
-  title: 'hooks/useExposedAnimations',
+  title: 'GSAP / Hooks / useExposedAnimations',
 };
 
 // Forces a re-render, useful to test for unwanted side-effects

src/gsap/hooks/useFlip/useFlip.mdx

@@ -1,7 +1,7 @@
 import { Meta, Canvas } from '@storybook/blocks';
 import * as stories from './useFlip.stories';
 
-<Meta title="components/useFlip" of={stories} />
+<Meta title="GSAP / Hooks / useFlip" of={stories} />
 
 # useFlip
 

src/gsap/hooks/useFlip/useFlip.stories.tsx

@@ -6,7 +6,7 @@ import { useToggle } from '../../../hooks/useToggle/useToggle.js';
 import { useFlip } from './useFlip.js';
 
 const meta = {
-  title: 'hooks/useFlip',
+  title: 'GSAP / Hooks / useFlip',
 } as Meta;
 
 export default meta;

src/gsap/hooks/useScrollAnimation/useScrollAnimation.mdx

@@ -1,7 +1,7 @@
 import { Meta, Canvas } from '@storybook/blocks';
 import * as stories from './useScrollAnimation.stories';
 
-<Meta title="hooks/useScrollAnimation" />
+<Meta title="GSAP / hooks / useScrollAnimation" />
 
 # useScrollAnimation
 

src/gsap/hooks/useScrollAnimation/useScrollAnimation.stories.tsx

@@ -4,7 +4,7 @@ import { useRef, type ReactElement } from 'react';
 import { useScrollAnimation } from './useScrollAnimation.js';
 
 export default {
-  title: 'hooks/useScrollAnimation',
+  title: 'GSAP / Hooks / useScrollAnimation',
   parameters: {
     layout: 'fullscreen',
   },

src/gsap/hooks/useScrollAnimation/useScrollAnimation.ts

@@ -14,7 +14,7 @@ if (typeof window !== 'undefined') {
  * when the global animations map is updated.
  *
  * Note: do not scrub a React component's root because React won't know what element to
- * unmount when the component with a pinned animation is must removed from the vDOM.
+ * unmount when the component with a pinned animation is removed from the vDOM.
  */
 export function useScrollAnimation<T extends gsap.core.Animation>(
   callback: () => T | undefined,

src/gsap/utils/getAnimation/getAnimation.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="hooks/getAnimation" />
+<Meta title="GSAP / Hooks / getAnimation" />
 
 # useExposeAnimation
 

src/gsap/utils/getAnimation/getAnimation.stories.tsx

@@ -7,7 +7,7 @@ import { useExposeAnimation } from '../../hooks/useExposeAnimation/useExposeAnim
 import { getAnimation } from './getAnimation.js';
 
 export default {
-  title: 'hooks/getAnimation',
+  title: 'GSAP / Hooks / getAnimation',
 };
 
 const Child = ensuredForwardRef<HTMLDivElement, unknown>((_, ref): ReactElement => {

src/lifecycle/components/CrossFlow/CrossFlow.stories.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable react/no-multi-comp, react/jsx-no-literals, react-hooks/rules-of-hooks */
 import type { Meta, StoryObj } from '@storybook/react';
-import { Fragment, useRef, useState, type ReactElement } from 'react';
+import { Fragment, useLayoutEffect, useRef, useState, type ReactElement } from 'react';
 import { useBeforeUnmount } from '../../hooks/useBeforeUnmount/useBeforeUnmount.js';
 import { CrossFlow } from './CrossFlow.js';
 
 const meta = {
-  title: 'Lifecycle / components/CrossFlow',
+  title: 'Lifecycle / Components/CrossFlow',
   argTypes: {
     children: {
       description: 'ReactElement | null',
@@ -31,13 +31,28 @@ type ChildProps = {
 function Child({ background, onClick, duration = 1000 }: ChildProps): ReactElement {
   const ref = useRef<HTMLButtonElement>(null);
 
+  useLayoutEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+
+    const animation = ref.current.animate([{ opacity: 0 }, { opacity: 1 }], {
+      duration,
+      fill: 'forwards',
+    });
+
+    return () => {
+      animation.cancel();
+    };
+  }, [duration]);
+
   // show visible animation during "before unmount" lifecycle
   useBeforeUnmount(async (abortSignal) => {
     if (!ref.current) {
       return;
     }
 
-    const animation = ref.current.animate([{ opacity: 1 }, { opacity: 0 }], {
+    const animation = ref.current.animate([{ opacity: 0 }], {
       duration,
       fill: 'forwards',
     });

src/lifecycle/components/TransitionPresence/TransitionPresence.stories.tsx

@@ -7,7 +7,7 @@ import { useBeforeUnmount } from '../../hooks/useBeforeUnmount/useBeforeUnmount.
 import { TransitionPresence } from './TransitionPresence.js';
 
 const meta = {
-  title: 'Lifecycle / components / TransitionPresence',
+  title: 'Lifecycle / Components / TransitionPresence',
 } satisfies Meta;
 
 export default meta;
@@ -42,7 +42,7 @@ function Child({ background, onClick }: ChildProps): ReactElement {
       return;
     }
 
-    const animation = ref.current.animate([{ opacity: 1 }, { opacity: 0 }], {
+    const animation = ref.current.animate([{ opacity: 0 }], {
       duration: 500,
       fill: 'forwards',
     });

src/lifecycle/hooks/useBeforeMount/useBeforeMount.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="Lifecycle / hooks / useBeforeMount" />
+<Meta title="Lifecycle / Hooks / useBeforeMount" />
 
 # useBeforeMount
 

src/lifecycle/hooks/useBeforeUnmount/useBeforeUnmount.mdx

@@ -1,7 +1,7 @@
 import { Canvas, Meta } from '@storybook/blocks';
 import * as transitionPrescenseStories from '../../components/TransitionPresence/TransitionPresence.stories';
 
-<Meta title="Lifecycle / hooks / useBeforeUnmount" />
+<Meta title="Lifecycle / Hooks / useBeforeUnmount" />
 
 # useBeforeUnmount
 

src/lifecycle/hooks/useBeforeUnmount/useBeforeUnmount.stories.tsx

@@ -7,7 +7,7 @@ import { TransitionPresence } from '../../components/TransitionPresence/Transiti
 import { useBeforeUnmount } from './useBeforeUnmount.js';
 
 const meta = {
-  title: 'Lifecycle / hooks / useBeforeUnmount',
+  title: 'Lifecycle / Hooks / useBeforeUnmount',
 } satisfies Meta;
 
 export default meta;

src/lifecycle/hooks/useIsMounted/useIsMounted.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="Lifecycle / hooks / useIsMounted" />
+<Meta title="Lifecycle / Hooks / useIsMounted" />
 
 # useIsMounted
 

src/lifecycle/hooks/useIsMounted/useIsMounted.stories.tsx

@@ -6,7 +6,7 @@ import { useIsMountedState } from '../useIsMountedState/useIsMountedState.js';
 import { useIsMounted } from './useIsMounted.js';
 
 const meta = {
-  title: 'Lifecycle / hooks / useIsMounted',
+  title: 'Lifecycle / Hooks / useIsMounted',
 } satisfies Meta;
 
 export default meta;

src/lifecycle/hooks/useIsMountedState/useIsMountedState.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="Lifecycle / hooks / useIsMountedState" />
+<Meta title="Lifecycle / Hooks / useIsMountedState" />
 
 # useIsMountedState
 

src/lifecycle/hooks/useIsMountedState/useIsMountedState.stories.tsx

@@ -5,7 +5,7 @@ import { useForceRerender } from '../../../hooks/useForceRerender/useForceRerend
 import { useIsMountedState } from './useIsMountedState.js';
 
 const meta = {
-  title: 'Lifecycle / hooks / useIsMountedState',
+  title: 'Lifecycle / Hooks / useIsMountedState',
 } satisfies Meta;
 
 export default meta;

src/lifecycle/hooks/useMount/useMount.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="Lifecycle / hooks / useMount" />
+<Meta title="Lifecycle / Hooks / useMount" />
 
 # useMount
 

src/lifecycle/hooks/useUnmount/useUnmount.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="Lifecycle / hooks / useUnmount" />
+<Meta title="Lifecycle / Hooks / useUnmount" />
 
 # useUnmount
 

src/nextjs/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/blocks';
 
-<Meta title="NextJS / hooks / useIsomorphicLayoutEffect" />
+<Meta title="NextJS / Hooks / useIsomorphicLayoutEffect" />
 
 # useIsomorphicLayoutEffect