From 73b275e45dde501063ef6a3631e1b2599815ac6f Mon Sep 17 00:00:00 2001
From: istarkov <istarkov@gmail.com>
Date: Mon, 14 Apr 2025 16:46:55 +0300
Subject: [PATCH 1/2] experimental: Ranges animation control

Add border animation

Move vars

Try ranges
---
 .../animation-panel-content.stories.tsx       |  43 ++--
 .../animation/animation-panel-content.tsx     | 229 +++++++++++-------
 .../animation/animation-ranges.stories.tsx    | 102 ++++++++
 .../animation/animation-ranges.tsx            | 216 +++++++++++++++++
 packages/sdk/src/index.ts                     |   2 +
 packages/sdk/src/schema/animation-schema.ts   |   2 +
 6 files changed, 484 insertions(+), 110 deletions(-)
 create mode 100644 apps/builder/app/builder/features/settings-panel/props-section/animation/animation-ranges.stories.tsx
 create mode 100644 apps/builder/app/builder/features/settings-panel/props-section/animation/animation-ranges.tsx

diff --git a/apps/builder/app/builder/features/settings-panel/props-section/animation/animation-panel-content.stories.tsx b/apps/builder/app/builder/features/settings-panel/props-section/animation/animation-panel-content.stories.tsx
index 5b66afd4e424..027aa2e09d9b 100644
--- a/apps/builder/app/builder/features/settings-panel/props-section/animation/animation-panel-content.stories.tsx
+++ b/apps/builder/app/builder/features/settings-panel/props-section/animation/animation-panel-content.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { AnimationPanelContent } from "./animation-panel-content";
-import { theme } from "@webstudio-is/design-system";
+import { Box, theme } from "@webstudio-is/design-system";
 import { useState } from "react";
 import type { ScrollAnimation, ViewAnimation } from "@webstudio-is/sdk";
 
@@ -26,13 +26,19 @@ const ScrollAnimationTemplate: Story["render"] = ({ value: initialValue }) => {
   const [value, setValue] = useState(initialValue);
 
   return (
-    <AnimationPanelContent
-      type="scroll"
-      value={value}
-      onChange={(newValue) => {
-        setValue(newValue as ScrollAnimation);
-      }}
-    />
+    <Box css={{ width: 240 }}>
+      <AnimationPanelContent
+        type="scroll"
+        value={value}
+        onChange={(newValue, isEphemeral) => {
+          if (isEphemeral) {
+            return;
+          }
+
+          setValue(newValue as ScrollAnimation);
+        }}
+      />
+    </Box>
   );
 };
 
@@ -40,13 +46,18 @@ const ViewAnimationTemplate: Story["render"] = ({ value: initialValue }) => {
   const [value, setValue] = useState(initialValue);
 
   return (
-    <AnimationPanelContent
-      type="view"
-      value={value}
-      onChange={(newValue) => {
-        setValue(newValue as ViewAnimation);
-      }}
-    />
+    <Box css={{ width: 240 }}>
+      <AnimationPanelContent
+        type="view"
+        value={value}
+        onChange={(newValue, isEphemeral) => {
+          if (isEphemeral) {
+            return;
+          }
+          setValue(newValue as ViewAnimation);
+        }}
+      />
+    </Box>
   );
 };
 
@@ -82,7 +93,7 @@ export const ViewAnimationStory: Story = {
       name: "view-animation",
       timing: {
         rangeStart: ["entry", { type: "unit", value: 0, unit: "%" }],
-        rangeEnd: ["exit", { type: "unit", value: 100, unit: "%" }],
+        rangeEnd: ["entry", { type: "unit", value: 100, unit: "%" }],
       },
       keyframes: [
         {
diff --git a/apps/builder/app/builder/features/settings-panel/props-section/animation/animation-panel-content.tsx b/apps/builder/app/builder/features/settings-panel/props-section/animation/animation-panel-content.tsx
index 4075251e63d7..11222f9aaac6 100644
--- a/apps/builder/app/builder/features/settings-panel/props-section/animation/animation-panel-content.tsx
+++ b/apps/builder/app/builder/features/settings-panel/props-section/animation/animation-panel-content.tsx
@@ -40,6 +40,7 @@ import { Keyframes } from "./animation-keyframes";
 import { humanizeString } from "~/shared/string-utils";
 import { Link2Icon, Link2UnlinkedIcon } from "@webstudio-is/icons";
 import { $availableUnitVariables } from "~/builder/features/style-panel/shared/model";
+import { AnimationRanges } from "./animation-ranges";
 
 const fillModeDescriptions: Record<
   NonNullable<ViewAnimation["timing"]["fill"]>,
@@ -469,22 +470,46 @@ export const AnimationPanelContent = ({
           }}
         />
       </Grid>
+
       <Grid
         gap={1}
         align={"center"}
         css={{
-          gridTemplateColumns: "1fr 16px 1fr",
+          gridTemplateAreas: `
+            "rangeEndLabel . . animation"
+            "rangeEndName rangeEndPercentage connect animation"
+            "rangeStartLabel . connect animation"
+            "rangeStartName rangeStartPercentage connect animation"
+            "durationLabel durationValue . animation"
+          `,
+          gridTemplateColumns: "1.5fr 1fr 16px 34px",
           paddingInline: theme.panel.paddingInline,
           flexShrink: 0,
         }}
       >
-        <Label htmlFor={fieldIds.rangeStartName}>Range Start</Label>
-        <div />
-        <Label disabled={!isRangeEndEnabled} htmlFor={fieldIds.rangeEndName}>
+        <Label
+          css={{
+            gridArea: "rangeStartLabel",
+          }}
+          htmlFor={fieldIds.rangeStartName}
+        >
+          Range Start
+        </Label>
+
+        <Label
+          css={{
+            gridArea: "rangeEndLabel",
+          }}
+          disabled={!isRangeEndEnabled}
+          htmlFor={fieldIds.rangeEndName}
+        >
           Range End
         </Label>
 
         <Select
+          css={{
+            gridArea: "rangeStartName",
+          }}
           id={fieldIds.rangeStartName}
           options={timelineRangeNames}
           getLabel={humanizeString}
@@ -550,7 +575,11 @@ export const AnimationPanelContent = ({
             );
           }}
         />
-        <Grid>
+        <Grid
+          css={{
+            gridArea: "connect",
+          }}
+        >
           <EnhancedTooltip
             content={isLinked ? "Unlink range names" : "Link range names"}
           >
@@ -582,6 +611,9 @@ export const AnimationPanelContent = ({
           </EnhancedTooltip>
         </Grid>
         <Select
+          css={{
+            gridArea: "rangeEndName",
+          }}
           id={fieldIds.rangeEndName}
           disabled={!isRangeEndEnabled}
           options={timelineRangeNames}
@@ -648,105 +680,114 @@ export const AnimationPanelContent = ({
           }}
         />
 
-        <RangeValueInput
-          id={fieldIds.rangeStartValue}
-          value={
-            value.timing.rangeStart?.[1] ?? {
-              type: "unit",
-              value: 0,
-              unit: "%",
-            }
-          }
-          onChange={(rangeStart, isEphemeral) => {
-            if (rangeStart === undefined && isEphemeral) {
-              handleChange(undefined, true);
-              return;
+        <Box css={{ gridArea: "rangeStartPercentage" }}>
+          <RangeValueInput
+            id={fieldIds.rangeStartValue}
+            value={
+              value.timing.rangeStart?.[1] ?? {
+                type: "unit",
+                value: 0,
+                unit: "%",
+              }
             }
+            onChange={(rangeStart, isEphemeral) => {
+              if (rangeStart === undefined && isEphemeral) {
+                handleChange(undefined, true);
+                return;
+              }
 
-            const defaultTimelineRangeName = timelineRangeNames[0]!;
-
-            handleChange(
-              {
-                ...value,
-                timing: {
-                  ...value.timing,
-                  rangeStart: [
-                    value.timing.rangeStart?.[0] ?? defaultTimelineRangeName,
-                    rangeStart,
-                  ],
+              const defaultTimelineRangeName = timelineRangeNames[0]!;
+
+              handleChange(
+                {
+                  ...value,
+                  timing: {
+                    ...value.timing,
+                    rangeStart: [
+                      value.timing.rangeStart?.[0] ?? defaultTimelineRangeName,
+                      rangeStart,
+                    ],
+                  },
                 },
-              },
-              isEphemeral
-            );
-          }}
-        />
-        <div />
-        <RangeValueInput
-          id={fieldIds.rangeEndValue}
-          disabled={!isRangeEndEnabled}
-          value={
-            value.timing.rangeEnd?.[1] ?? {
-              type: "unit",
-              value: 0,
-              unit: "%",
-            }
-          }
-          onChange={(rangeEnd, isEphemeral) => {
-            if (rangeEnd === undefined && isEphemeral) {
-              handleChange(undefined, true);
-              return;
+                isEphemeral
+              );
+            }}
+          />
+        </Box>
+        <Box css={{ gridArea: "rangeEndPercentage" }}>
+          <RangeValueInput
+            id={fieldIds.rangeEndValue}
+            disabled={!isRangeEndEnabled}
+            value={
+              value.timing.rangeEnd?.[1] ?? {
+                type: "unit",
+                value: 0,
+                unit: "%",
+              }
             }
+            onChange={(rangeEnd, isEphemeral) => {
+              if (rangeEnd === undefined && isEphemeral) {
+                handleChange(undefined, true);
+                return;
+              }
 
-            const defaultTimelineRangeName = timelineRangeNames[0]!;
-
-            handleChange(
-              {
-                ...value,
-                timing: {
-                  ...value.timing,
-                  rangeEnd: [
-                    value.timing.rangeEnd?.[0] ?? defaultTimelineRangeName,
-                    rangeEnd,
-                  ],
+              const defaultTimelineRangeName = timelineRangeNames[0]!;
+
+              handleChange(
+                {
+                  ...value,
+                  timing: {
+                    ...value.timing,
+                    rangeEnd: [
+                      value.timing.rangeEnd?.[0] ?? defaultTimelineRangeName,
+                      rangeEnd,
+                    ],
+                  },
                 },
-              },
-              isEphemeral
-            );
+                isEphemeral
+              );
+            }}
+          />
+        </Box>
+
+        <Label
+          css={{
+            gridArea: "durationLabel",
           }}
-        />
-      </Grid>
+          htmlFor={fieldIds.duration}
+        >
+          Duration
+        </Label>
 
-      <Grid
-        gap={1}
-        align={"center"}
-        css={{
-          gridTemplateColumns: "1fr 16px 1fr",
-          paddingInline: theme.panel.paddingInline,
-        }}
-      >
-        <Label htmlFor={fieldIds.duration}>Duration</Label>
-        <div />
-        <DurationInput
-          id={fieldIds.duration}
-          value={value.timing.duration}
-          onChange={(duration, isEphemeral) => {
-            if (duration === undefined && isEphemeral) {
-              handleChange(undefined, true);
-              return;
-            }
+        <Box css={{ gridArea: "durationValue" }}>
+          <DurationInput
+            id={fieldIds.duration}
+            value={value.timing.duration}
+            onChange={(duration, isEphemeral) => {
+              if (duration === undefined && isEphemeral) {
+                handleChange(undefined, true);
+                return;
+              }
 
-            handleChange(
-              {
-                ...value,
-                timing: {
-                  ...value.timing,
-                  duration,
+              handleChange(
+                {
+                  ...value,
+                  timing: {
+                    ...value.timing,
+                    duration,
+                  },
                 },
-              },
-              isEphemeral
-            );
-          }}
-        />
+                isEphemeral
+              );
+            }}
+          />
+        </Box>
+        <Grid css={{ gridArea: "animation", alignSelf: "stretch" }}>
+          <AnimationRanges
+            rangeStart={value.timing.rangeStart}
+            rangeEnd={value.timing.rangeEnd}
+          />
+        </Grid>
       </Grid>
 
       <Keyframes
diff --git a/apps/builder/app/builder/features/settings-panel/props-section/animation/animation-ranges.stories.tsx b/apps/builder/app/builder/features/settings-panel/props-section/animation/animation-ranges.stories.tsx
new file mode 100644
index 000000000000..ff5fb1a56a10
--- /dev/null
+++ b/apps/builder/app/builder/features/settings-panel/props-section/animation/animation-ranges.stories.tsx
@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AnimationRanges } from "./animation-ranges";
+import type { ViewRangeOptionsSchema } from "@webstudio-is/sdk";
+import { Grid } from "@webstudio-is/design-system";
+
+// ----- Type definitions -----
+
+const RANGE_TYPES = [
+  "contain",
+  "cover",
+  "entry",
+  "exit",
+  "entry-crossing",
+  "exit-crossing",
+] as const;
+type RangeType = (typeof RANGE_TYPES)[number];
+
+type StorybookArgs = {
+  rangeStartType: RangeType;
+  rangeStartValue: number;
+  rangeEndType: RangeType;
+  rangeEndValue: number;
+};
+
+// ----- Storybook config -----
+
+const meta: Meta<(args: StorybookArgs) => React.ReactNode> = {
+  title: "Components/AnimationRanges",
+  argTypes: {
+    rangeStartType: {
+      name: "rangeStart[0]",
+      control: { type: "select" },
+      options: RANGE_TYPES,
+      defaultValue: "entry",
+    },
+    rangeStartValue: {
+      name: "rangeStart[1] (% value)",
+      control: { type: "range", min: -100, max: 100, step: 1 },
+      defaultValue: 0,
+    },
+    rangeEndType: {
+      name: "rangeEnd[0]",
+      control: { type: "select" },
+      options: RANGE_TYPES,
+      defaultValue: "exit",
+    },
+    rangeEndValue: {
+      name: "rangeEnd[1] (% value)",
+      control: { type: "range", min: -100, max: 100, step: 1 },
+      defaultValue: 100,
+    },
+  },
+  args: {
+    rangeStartType: "entry",
+    rangeStartValue: 0,
+    rangeEndType: "exit",
+    rangeEndValue: 100,
+  } satisfies StorybookArgs,
+};
+export default meta;
+
+// ----- Utility to map SB args to component props -----
+
+const getComponentArgs = (args: StorybookArgs): ViewRangeOptionsSchema => {
+  return {
+    rangeStart: [
+      args.rangeStartType,
+      { type: "unit", unit: "%", value: args.rangeStartValue },
+    ],
+    rangeEnd: [
+      args.rangeEndType,
+      { type: "unit", unit: "%", value: args.rangeEndValue },
+    ],
+  };
+};
+
+// ----- Story -----
+
+type Story = StoryObj<{
+  // flatten for controls, type-safe
+  rangeStartType: RangeType;
+  rangeStartValue: number;
+  rangeEndType: RangeType;
+  rangeEndValue: number;
+}>;
+
+export const Basic: Story = {
+  render: (args) => (
+    <Grid
+      css={{
+        width: 400,
+        height: 240,
+        gridTemplateColumns: "40px 60px 80px",
+        gap: 20,
+      }}
+    >
+      <AnimationRanges {...getComponentArgs(args)} />
+      <AnimationRanges {...getComponentArgs(args)} />
+      <AnimationRanges {...getComponentArgs(args)} />
+    </Grid>
+  ),
+};
diff --git a/apps/builder/app/builder/features/settings-panel/props-section/animation/animation-ranges.tsx b/apps/builder/app/builder/features/settings-panel/props-section/animation/animation-ranges.tsx
new file mode 100644
index 000000000000..8dd7dc2e79ae
--- /dev/null
+++ b/apps/builder/app/builder/features/settings-panel/props-section/animation/animation-ranges.tsx
@@ -0,0 +1,216 @@
+import { toValue } from "@webstudio-is/css-engine";
+import { Box, keyframes, styled, theme } from "@webstudio-is/design-system";
+import type {
+  ScrollRangeOptionsSchema,
+  ViewRangeOptionsSchema,
+} from "@webstudio-is/sdk";
+import { useEffect, useRef } from "react";
+
+type AnimationRangesProps = ViewRangeOptionsSchema;
+
+const progressVariable = "--ws-progress";
+
+const Wrapper = styled(Box, {
+  position: "relative",
+  alignSelf: "stretch",
+});
+
+const InsetLine = styled(Box, {
+  position: "absolute",
+  left: 0,
+  right: 0,
+  backgroundColor: "rgba(255, 255, 255, 0.6)",
+});
+
+const Scrollable = styled(Box, {
+  position: "absolute",
+  inset: 0,
+  overflowY: "scroll",
+
+  "&::-webkit-scrollbar": {
+    display: "none",
+  },
+});
+
+const bgKeyframes = keyframes({
+  "0%": { [progressVariable]: "0" },
+  "100%": { [progressVariable]: "360" },
+});
+
+const rafInterval = (callback: () => void): (() => void) => {
+  let frameId: number;
+
+  const loop = () => {
+    callback();
+    frameId = requestAnimationFrame(loop);
+  };
+
+  frameId = requestAnimationFrame(loop);
+
+  return () => {
+    cancelAnimationFrame(frameId);
+  };
+};
+
+export const AnimationRanges = (props: {
+  rangeStart:
+    | AnimationRangesProps["rangeStart"]
+    | ScrollRangeOptionsSchema["rangeStart"];
+  rangeEnd:
+    | AnimationRangesProps["rangeEnd"]
+    | ScrollRangeOptionsSchema["rangeEnd"];
+}) => {
+  const scrollableRef = useRef<HTMLDivElement>(null);
+  const subjectRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    try {
+      CSS.registerProperty({
+        name: progressVariable,
+        syntax: "<number>",
+        inherits: true,
+        initialValue: "0",
+      });
+    } catch {
+      /* */
+    }
+
+    const scrollable = scrollableRef.current;
+    const subject = subjectRef.current;
+
+    if (scrollable == null) {
+      return;
+    }
+
+    if (subject == null) {
+      return;
+    }
+
+    const scrollHeight = scrollable.scrollHeight;
+    const clientHeight = scrollable.clientHeight;
+
+    const startTime = Date.now();
+
+    return rafInterval(() => {
+      const timeDelta = Date.now() - startTime;
+
+      scrollable.scrollTop =
+        (Math.sin(timeDelta / 1000) * (scrollHeight - clientHeight)) / 2 +
+        (scrollHeight - clientHeight) / 2;
+
+      const progress =
+        subject.parentElement?.getAnimations()?.[0]?.effect?.getComputedTiming()
+          ?.progress ?? 0;
+
+      const content = `${(progress * 100).toFixed(0)}%`;
+
+      if (subject.textContent !== content) {
+        subject.textContent = `${(progress * 100).toFixed(0)}%`;
+      }
+    });
+  }, []);
+
+  const rangeStart = props.rangeStart ?? [
+    "cover",
+    {
+      type: "unit",
+      value: 0,
+      unit: "%",
+    },
+  ];
+  const rangeEnd = props.rangeEnd ?? [
+    "cover",
+    {
+      type: "unit",
+      value: 100,
+      unit: "%",
+    },
+  ];
+
+  const insetSize = "34px";
+  const boxSize = "28px";
+  const borderColor = "#ccc";
+
+  const progressRadius = "4px";
+  const progressWidth = "2px";
+  const progressInactiveColor = "oklch(92.9% 0.013 255.508)";
+  const progressActiveColor = "oklch(54.6% 0.245 262.881)";
+
+  return (
+    <Wrapper>
+      <Scrollable ref={scrollableRef}>
+        <Box
+          css={{
+            height: `calc(100% - ${insetSize})`,
+          }}
+        />
+        <Box
+          css={{
+            height: boxSize,
+            animationName: `${bgKeyframes}`,
+            animationTimingFunction: "linear",
+            animationFillMode: "both",
+
+            animationRangeStart: `${rangeStart[0]} ${toValue(rangeStart[1])}`,
+            animationRangeEnd: `${rangeEnd[0]} ${toValue(rangeEnd[1])}`,
+            animationTimeline: `view(y ${insetSize})`,
+
+            position: "relative",
+            borderRadius: progressRadius,
+          }}
+        >
+          <Box
+            css={{
+              position: "absolute",
+              inset: 0,
+              borderRadius: progressRadius,
+
+              background: `conic-gradient(${progressActiveColor} calc(var(${progressVariable}, 0) * 1deg), ${progressInactiveColor} 0)`,
+            }}
+          />
+
+          <Box
+            ref={subjectRef}
+            css={{
+              position: "absolute",
+              inset: 0,
+              fontSize: "10px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              whiteSpace: "pre",
+              textAlign: "center",
+              fontFamily: theme.fonts.robotoMono,
+              background: `linear-gradient(-90deg, oklch(97% 0.014 254.604) calc(var(${progressVariable}, 0) * 100%/360), white calc(var(${progressVariable}, 0) * 100%/360) )`,
+              margin: progressWidth,
+              borderRadius: `calc(${progressRadius} - 3px)`,
+            }}
+          ></Box>
+        </Box>
+        <Box
+          css={{
+            height: `calc(100% - ${insetSize})`,
+          }}
+        />
+      </Scrollable>
+      <InsetLine
+        // @ts-expect-error inert
+        inert={""}
+        css={{
+          height: insetSize,
+          top: 0,
+          borderBottom: `1px solid ${borderColor}`,
+        }}
+      />
+      <InsetLine
+        // @ts-expect-error inert
+        inert={""}
+        css={{
+          bottom: 0,
+          borderTop: `1px solid ${borderColor}`,
+          height: insetSize,
+        }}
+      />
+    </Wrapper>
+  );
+};
diff --git a/packages/sdk/src/index.ts b/packages/sdk/src/index.ts
index 1d25fe2ca2ab..96009b2b3095 100644
--- a/packages/sdk/src/index.ts
+++ b/packages/sdk/src/index.ts
@@ -41,6 +41,8 @@ export type {
   InsetUnitValue,
   DurationUnitValue,
   TimeUnit,
+  ViewRangeOptionsSchema,
+  ScrollRangeOptionsSchema,
 } from "./schema/animation-schema";
 
 export {
diff --git a/packages/sdk/src/schema/animation-schema.ts b/packages/sdk/src/schema/animation-schema.ts
index 82d1c0036818..4c5c2d188872 100644
--- a/packages/sdk/src/schema/animation-schema.ts
+++ b/packages/sdk/src/schema/animation-schema.ts
@@ -248,3 +248,5 @@ export type AnimationAction = z.infer<typeof animationActionSchema>;
 export type ScrollAnimation = z.infer<typeof scrollAnimationSchema>;
 export type ViewAnimation = z.infer<typeof viewAnimationSchema>;
 export type InsetUnitValue = z.infer<typeof insetUnitValueSchema>;
+export type ViewRangeOptionsSchema = z.infer<typeof viewRangeOptionsSchema>;
+export type ScrollRangeOptionsSchema = z.infer<typeof scrollRangeOptionsSchema>;

From f2a99001b80e83741d8f65cd24d3c8f13aa6a441 Mon Sep 17 00:00:00 2001
From: istarkov <istarkov@gmail.com>
Date: Wed, 16 Apr 2025 15:32:10 +0400
Subject: [PATCH 2/2] Fix inset

---
 .../settings-panel/props-section/animation/animation-ranges.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/builder/app/builder/features/settings-panel/props-section/animation/animation-ranges.tsx b/apps/builder/app/builder/features/settings-panel/props-section/animation/animation-ranges.tsx
index 8dd7dc2e79ae..0dfffdac32ab 100644
--- a/apps/builder/app/builder/features/settings-panel/props-section/animation/animation-ranges.tsx
+++ b/apps/builder/app/builder/features/settings-panel/props-section/animation/animation-ranges.tsx
@@ -127,7 +127,7 @@ export const AnimationRanges = (props: {
     },
   ];
 
-  const insetSize = "34px";
+  const insetSize = "28px";
   const boxSize = "28px";
   const borderColor = "#ccc";