Initial styles

Author: istarkov

packages/sdk-components-animation/package.json

@@ -66,7 +66,9 @@
     "@webstudio-is/sdk-components-react": "workspace:*",
     "@webstudio-is/template": "workspace:*",
     "@webstudio-is/tsconfig": "workspace:*",
+    "@webstudio-is/css-data": "workspace:*",
     "react": "18.3.0-canary-14898b6a9-20240318",
-    "react-dom": "18.3.0-canary-14898b6a9-20240318"
+    "react-dom": "18.3.0-canary-14898b6a9-20240318",
+    "type-fest": "^4.32.0"
   }
 }

packages/sdk-components-animation/src/scroll.stories.tsx

@@ -1,17 +1,57 @@
-const Component = () => {
-  return <div>JO</div>;
-};
+import { parseCssValue } from "@webstudio-is/css-data";
+import { Scroll } from "./scroll";
+
+const DEBUG = true;
 
 export default {
   title: "Components/Animate",
 };
 
 const Story = {
+  parameters: {
+    layout: "fullscreen",
+  },
+
   render() {
     return (
-      <>
-        <Component />
-      </>
+      <Scroll
+        debug={DEBUG}
+        action={{
+          type: "scroll",
+          animations: [
+            {
+              timing: {
+                fill: "backwards",
+              },
+              keyframes: [
+                {
+                  offset: 0,
+                  styles: {
+                    transform: parseCssValue(
+                      "transform",
+                      "translate(0, 100px)"
+                    ),
+                  },
+                },
+              ],
+            },
+          ],
+        }}
+      >
+        <div
+          style={{ height: "200px", width: "200px", backgroundColor: "red" }}
+        ></div>
+        <div
+          style={{
+            height: "100px",
+            width: "100px",
+            backgroundColor: "yellow",
+            position: "fixed",
+            left: 0,
+            top: 0,
+          }}
+        ></div>
+      </Scroll>
     );
   },
 };

packages/sdk-components-animation/src/scroll.tsx

@@ -4,12 +4,15 @@ import { ClientOnly } from "./shared/client-only";
 import { PolyfillLoader } from "./shared/scroll-polyfill";
 import { DebugDelayLoader } from "./shared/debug-delay-loader";
 import { escapeCssSpecifier } from "./shared/css-utils";
+import type { AnimationAction } from "./shared/animation-types";
+import { findKeyframeStylesWithZeroOffset } from "./shared/keyframes";
+import { hyphenateProperty, toValue } from "@webstudio-is/css-engine";
 
 const componentAttributeId = `data-ws-animate-id`;
 
 const createSelector = (id: string) => `[${componentAttributeId}="${id}"] > *`;
 
-const Animate = ({ id }: { id: string }) => {
+const Animate = ({ id, action }: { id: string; action: AnimationAction }) => {
   useLayoutEffect(() => {
     const selector = createSelector(id);
     const elements = document.querySelectorAll(selector);
@@ -18,6 +21,8 @@ const Animate = ({ id }: { id: string }) => {
     }
     const disposables = Array.from(elements)
       .map((elt) => {
+        return () => {};
+
         if (elt instanceof HTMLElement) {
           const animation = elt.animate(
             [{ offset: 0, transform: "translate(0, 100px)" }],
@@ -43,37 +48,71 @@ const Animate = ({ id }: { id: string }) => {
   return undefined;
 };
 
-const StylesBeforeAnimate = ({ id }: { id: string }) => {
+const StylesBeforeAnimate = ({
+  id,
+  action,
+}: {
+  id: string;
+  action: AnimationAction;
+}) => {
   const selector = createSelector(id);
 
-  const styleContent = `
-  @keyframes ws-scroll-animation-${id} {
-    from {
-      transform: translate(0, 100px);
+  const animationsWithInitialStyles = action.animations.filter(
+    (animation) =>
+      animation.timing.fill === "backwards" || animation.timing.fill === "both"
+  );
+
+  let styleContent = "";
+
+  let animationId = 0;
+  for (const animation of animationsWithInitialStyles) {
+    const styles = findKeyframeStylesWithZeroOffset(animation.keyframes);
+    if (styles === undefined) {
+      continue;
     }
-  }
 
-  ${selector} {
-    animation-name: ws-scroll-animation-${id};
-    animation-fill-mode: backwards;
-    animation-play-state: paused;
-    animation-duration: 1ms;
+    const style = Object.entries(styles).map(
+      ([property, value]) => `${hyphenateProperty(property)}:${toValue(value)};`
+    );
+
+    styleContent = `
+    ${styleContent}
 
+    @keyframes ws-scroll-animation-${id}-${animationId} {
+      from {
+        ${style}
+        composite: auto;
+      }
+    }
+
+    ${selector} {
+      animation-name: ws-scroll-animation-${id}-${animationId};
+      animation-fill-mode: backwards;
+      animation-play-state: paused;
+      animation-duration: 1ms;
+
+    }
+    `;
+    animationId++;
   }
-  `;
+
   return <style dangerouslySetInnerHTML={{ __html: styleContent }} />;
 };
 
-type ScrollProps = { debug?: boolean; children?: React.ReactNode };
+type ScrollProps = {
+  debug?: boolean;
+  children?: React.ReactNode;
+  action: AnimationAction;
+};
 
-export const Scroll = ({ debug = false, children }: ScrollProps) => {
+export const Scroll = ({ debug = false, children, action }: ScrollProps) => {
   const nakedId = useId();
   const id = escapeCssSpecifier(nakedId);
 
   return (
     <>
-      <ClientOnly fallback={<StylesBeforeAnimate id={id} />}>
-        <Suspense fallback={<StylesBeforeAnimate id={id} />}>
+      <ClientOnly fallback={<StylesBeforeAnimate id={id} action={action} />}>
+        <Suspense fallback={<StylesBeforeAnimate id={id} action={action} />}>
           <ErrorBoundary
             fallback={null}
             onError={(error) => {

packages/sdk-components-animation/src/shared/animation-types.tsx

@@ -0,0 +1,39 @@
+import type { StyleValue } from "@webstudio-is/css-engine";
+
+export type KeyframeStyles = { [property: string]: StyleValue | undefined };
+
+export type AnimationKeyframe = {
+  offset: number | undefined;
+  // We are using composite: auto as the default value for now
+  // composite?: CompositeOperationOrAuto;
+  styles: KeyframeStyles;
+};
+
+type KeyframeEffectOptions = {
+  rangeStart?: StyleValue | undefined;
+  rangeEnd?: StyleValue | undefined;
+  easing?: string;
+  fill?: FillMode;
+};
+
+/*
+type AnimationTiming = {
+  delay?: number;
+  duration?: number;
+  easing?: string;
+  fill?: FillMode;
+};
+*/
+
+type ScrollAction = {
+  type: "scroll";
+  source?: "closest" | "nearest" | "root";
+  axis?: "block" | "inline" | "x" | "y";
+  animations: {
+    timing: KeyframeEffectOptions;
+    keyframes: AnimationKeyframe[];
+  }[];
+};
+
+// | ViewAction | ...
+export type AnimationAction = ScrollAction;

packages/sdk-components-animation/src/shared/debug-delay-loader.tsx

@@ -1,12 +1,11 @@
 // Artificial delay for loading the component for debugging purposes
 
-import { use } from "react";
+import { use, useState } from "react";
 
 const wait = () => new Promise((resolve) => setTimeout(resolve, 1000));
 
-const waitglobal = wait();
-
 export const DebugDelayLoader = () => {
-  use(waitglobal);
+  const [waitLocal] = useState(wait);
+  use(waitLocal);
   return undefined;
 };

packages/sdk-components-animation/src/shared/keyframes.ts

@@ -0,0 +1,27 @@
+import type { AnimationKeyframe, KeyframeStyles } from "./animation-types";
+
+export const findKeyframeStylesWithZeroOffset = (
+  keyframes: AnimationKeyframe[]
+): KeyframeStyles | undefined => {
+  let zeroOffsetStyles: KeyframeStyles = {};
+
+  if (keyframes.length === 0) {
+    return undefined;
+  }
+
+  if (keyframes[0].offset === undefined) {
+    zeroOffsetStyles = { ...zeroOffsetStyles, ...keyframes[0].styles };
+  }
+
+  for (const keyframe of keyframes) {
+    if (keyframe.offset === 0) {
+      zeroOffsetStyles = { ...zeroOffsetStyles, ...keyframe.styles };
+    }
+  }
+
+  if (Object.keys(zeroOffsetStyles).length === 0) {
+    return undefined;
+  }
+
+  return zeroOffsetStyles;
+};