use element.animate for horizontal

Author: GuptaSiddhant

.storybook/preview.tsx

@@ -4,7 +4,7 @@ import {
   Title,
   Subtitle,
   Description,
-  Primary,  
+  Primary,
   ArgTypes,
 } from "@storybook/blocks";
 
@@ -17,6 +17,7 @@ const preview: Preview = {
         date: /Date$/,
       },
     },
+    layout: "fullscreen",
     docs: {
       page: () => (
         <>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-scrolly-telling",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Create scrolly-telling animations in React with ease.",
   "type": "module",
   "keywords": [

src/components/ScrollyHorizontalElement.tsx

@@ -10,7 +10,6 @@ export interface ScrollyHorizontalElementProps {
   children: React.ReactNode;
   preChildren?: React.ReactNode;
   postChildren?: React.ReactNode;
-  precision?: number;
 
   style?: React.CSSProperties;
 }
@@ -51,20 +50,22 @@ const ScrollyHorizontalElement = forwardRef<
     children,
     preChildren,
     postChildren,
-    precision,
     ...rest
   } = props;
 
   const containerRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
   const scrollyValues = useScrollyHorizontalElementLayout(
     containerRef,
-    contentRef,
-    precision
+    contentRef
   );
 
   return (
-    <div className="scrolly-horizontal-container" style={styles.container}>
+    <div
+      ref={containerRef}
+      className="scrolly-horizontal-container"
+      style={styles.container}
+    >
       <div className="scrolly-horizontal-sticky" style={styles.sticky}>
         <ScrollyElementContext.Provider value={scrollyValues}>
           {preChildren}
@@ -88,13 +89,11 @@ export default ScrollyHorizontalElement;
 
 function useScrollyHorizontalElementLayout(
   containerRef: React.RefObject<HTMLDivElement>,
-  contentRef: React.RefObject<HTMLDivElement>,
-  precision?: number
+  contentRef: React.RefObject<HTMLDivElement>
 ) {
-  const scrollyValues = useScrolly(contentRef, {
-    precision,
-    startAtEntryRatio: 1,
-    stopAtExitRatio: 0,
+  const timeRef = useRef(0);
+  const scrollyValues = useScrolly(containerRef, {
+    precision: 3,
   });
   const { windowWidth, windowHeight, scrollRatio } = scrollyValues;
 
@@ -111,10 +110,22 @@ function useScrollyHorizontalElementLayout(
       targetEnd: scrollDistance,
     }).toFixed(0);
 
-    contentRef.current?.style.setProperty(
-      "transform",
-      `translateX(-${translateValue}px)`
-    );
+    const frame = window.requestAnimationFrame((time) => {
+      const delta = time - timeRef.current;
+      timeRef.current = time;
+
+      contentRef.current?.animate(
+        { transform: `translateX(-${translateValue}px)` },
+        {
+          fill: "forwards",
+          easing: "ease-in-out",
+          duration: 100,
+          playbackRate: 1 + delta / 100,
+        }
+      );
+    });
+
+    return () => window.cancelAnimationFrame(frame);
   }, [windowHeight, windowWidth, scrollRatio, contentRef, containerRef]);
 
   return scrollyValues;

src/element.tsx

@@ -20,8 +20,8 @@ export type ScrollyElementProps<T extends React.ElementType> = {
  * A component that can be used to create a scrolly-telling element.
  */
 const ScrollyElement = forwardRef<HTMLDivElement, ScrollyElementProps<"div">>(
-  (props, ref): JSX.Element | null => {
-    if (!props.horizontal) {
+  ({ horizontal, ...props }, ref): JSX.Element | null => {
+    if (!horizontal) {
       return <ScrollyVerticalElement {...props} ref={ref} />;
     }
 

src/stories/ScrollyElement.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import {
+  scrollSpacerDecorator,
+  scrollyContextDecorator,
+} from "./decorators.jsx";
+import ScrollyElement from "../element.jsx";
+
+const component = ScrollyElement;
+type ComponentType = typeof component;
+
+export default {
+  title: "ScrollyElement",
+  component,
+  tags: ["autodocs"],
+  decorators: [scrollyContextDecorator, scrollSpacerDecorator],
+  parameters: {
+    layout: "fullscreen",
+  },
+} satisfies Meta<ComponentType>;
+
+export const Horizontal: StoryObj<ComponentType> = {
+  args: {
+    horizontal: true,
+    style: { gap: "1rem", padding: "1rem" },
+    children: Array(5)
+      .fill(null)
+      .map((_, i) => {
+        const key = `slide-${i}`;
+        return <App index={i} key={key} />;
+      }),
+  },
+};
+
+function App({ index }: { index: number }) {
+  return (
+    <div
+      style={{
+        minWidth: "80vw",
+        height: "100%",
+        backgroundColor: "lightcyan",
+        border: "1px solid lightblue",
+        borderRadius: "0.5rem",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        color: "black",
+      }}
+    >
+      This is slide {index + 1}.
+    </div>
+  );
+}

src/stories/decorators.tsx

@@ -6,3 +6,32 @@ export const scrollyContextDecorator: Decorator<unknown> = (Story) => (
     <Story />
   </ScrollyProvider>
 );
+
+function ScrollSpacer(style: React.CSSProperties) {
+  return (
+    <div
+      style={{
+        height: "100vh",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        background: "lightgray",
+        color: "black",
+        font: "2rem",
+        ...style,
+      }}
+    >
+      Scroll to see the component
+    </div>
+  );
+}
+
+export const scrollSpacerDecorator: Decorator<unknown> = (Story) => {
+  return (
+    <>
+      <ScrollSpacer />
+      <Story />
+      <ScrollSpacer />
+    </>
+  );
+};