@yewdiel21/motion-kit 0.18.0 → 0.19.0

package/src/index.ts

@@ -309,3 +309,4 @@ export { createMagnetizeButton, type MagnetizeButtonOptions, type MagnetizeButto
 export { createBadgeButton, type BadgeButtonOptions, type BadgeButtonInstance } from './components/badge-button/engine';
 export { createMorphingPageDots, type MorphingPageDotsOptions, type MorphingPageDotsInstance } from './components/morphing-page-dots/engine';
 export { createNotFound, type NotFoundOptions, type NotFoundInstance } from './components/not-found/engine';
+export { createScrollArea, type ScrollAreaOptions, type ScrollAreaInstance, type ScrollAreaVisibility, type ScrollAreaAxis } from './components/scroll-area/engine';

package/src/motion/morph.ts

@@ -127,6 +127,9 @@ function faceOf(surface: HTMLElement, origin: HTMLElement, shape: Shape, withCop
 /** The morph each surface is playing, so a new one stops it first. */
 const running = new WeakMap<HTMLElement, gsap.core.Animation>();
 
+/** A scroll area's bars and button ride on the surface: they are not content that enters. */
+const OVERLAY = '[data-mk-scroll-rail], [data-mk-scroll-top]';
+
 /** Whether a surface is opening or closing right now. */
 export const isMorphing = (surface: HTMLElement) => running.has(surface);
 
@@ -141,7 +144,7 @@ function stop(surface: HTMLElement) {
 /** Stop a surface's morph now and put the surface and its content back to rest. */
 export function stopMorph(surface: HTMLElement) {
   stop(surface);
-  const parts = [...surface.querySelectorAll<HTMLElement>(':scope > *')].filter((element) => !element.classList.contains('mk-liquid'));
+  const parts = [...surface.querySelectorAll<HTMLElement>(':scope > *')].filter((element) => !element.classList.contains('mk-liquid') && !element.matches(OVERLAY));
   gsap.killTweensOf(parts);
   clearStyles(parts, MORPH_STYLES);
 }
@@ -298,7 +301,7 @@ export interface MorphOpenOptions {
 
 const partsOf = (surface: HTMLElement, content: string | undefined) =>
   [...surface.querySelectorAll<HTMLElement>(content ?? ':scope > *')].filter(
-    (element) => !element.classList.contains(FACE) && !element.classList.contains('mk-liquid'),
+    (element) => !element.classList.contains(FACE) && !element.classList.contains('mk-liquid') && !element.matches(OVERLAY),
   );
 
 /**

package/src/react/index.ts

@@ -189,4 +189,5 @@ export { ParticleButton, type ParticleButtonProps } from '../components/particle
 export { MagnetizeButton, type MagnetizeButtonProps } from '../components/magnetize-button/react';
 export { BadgeButton, type BadgeButtonProps } from '../components/badge-button/react';
 export { MorphingPageDots, type MorphingPageDotsProps } from '../components/morphing-page-dots/react';
-export { NotFound, type NotFoundProps } from '../components/not-found/react';
+export { NotFound, type NotFoundProps } from '../components/not-found/react';
+export { ScrollArea, type ScrollAreaProps } from '../components/scroll-area/react';