Animate

Animate 2

Animation UI - Type Select

Subject selection

Create new Animation

New animation

Add

Add sort/delete

subject

Add Ranges Select

Fix scroll

Ranges Ready

Fix comments

Allow negative values

Add storybook

Add storie

Add error

Add offset

Add anim

Edit keyframes

Add Fill Mode

Add easing

Rename

Fix errors

Hide animate children

Add hook

upd

Fix

Fix hook

Allow calc

Add ability to play localy

isPinned

Add mutations to track

Support composition

Switch auto on add

Add animation-composition

Use default composite

Fix tests

Allow select self

Add kebab

Change private detection

refactor: output hyphenated properties from css parser (#4900)

We are going to switch to hyphenated properties in styles. Here
refactored css parser to output hyphenated property instead of camel
case and added camelCaseProperty utility which does the opposite of
hyphenateProperty.

fix my env

Author: istarkov

.devcontainer/postinstall.sh

@@ -14,17 +14,14 @@ sudo rm -rf /tmp/corepack-cache
 sudo rm -rf /usr/local/lib/node_modules/corepack # Manually remove global corepack
 
 # Reinstall corepack globally via npm
-npm install -g corepack@latest # Install latest corepack version
+npm install -g corepack@latest --force # Install latest corepack version
 sudo corepack enable # Re-enable corepack
 
 # Check corepack version after reinstall
-echo "--- Corepack version after reinstall ---"
 corepack --version
-echo "--- End corepack version check ---"
-
 
 # Prepare pnpm (again, after corepack reinstall)
-sudo corepack prepare [email protected] --activate
+corepack prepare [email protected] --activate
 
 # Go to workspace directory
 cd /workspaces/webstudio
@@ -42,7 +39,7 @@ find . -name '.pnpm-store' -type d -prune -exec rm -rf '{}' +
 
 # Install dependencies, build, and migrate
 pnpm install
-pnpm run build
+pnpm build
 pnpm migrations migrate
 
 # Add git aliases

apps/builder/app/builder/features/components/components.tsx

@@ -59,9 +59,15 @@ const $metas = computed(
     const availableComponents = new Set<string>();
     const metas: Meta[] = [];
     for (const [name, componentMeta] of componentMetas) {
+      if (
+        isFeatureEnabled("animation") === false &&
+        name.endsWith(":AnimateChildren")
+      ) {
+        continue;
+      }
+
       // only set available components from component meta
       availableComponents.add(name);
-
       if (
         isFeatureEnabled("headSlotComponent") === false &&
         name === "HeadSlot"

apps/builder/app/builder/features/pages/page-settings.tsx

@@ -1631,7 +1631,16 @@ export const PageSettings = ({
       onDuplicate={() => {
         const newPageId = duplicatePage(pageId);
         if (newPageId !== undefined) {
-          onDuplicate(newPageId);
+          // In `canvas.tsx`, within `subscribeStyles`, we use `requestAnimationFrame` (RAF) for style recalculation.
+          // After `duplicatePage`, styles are not yet recalculated.
+          // To ensure they are properly updated, we use double RAF.
+          requestAnimationFrame(() => {
+            // At this tick styles are updating
+            requestAnimationFrame(() => {
+              // At this tick styles are updated
+              onDuplicate(newPageId);
+            });
+          });
         }
       }}
     >

apps/builder/app/builder/features/settings-panel/controls/combined.tsx

@@ -216,6 +216,12 @@ export const renderControl = ({
       );
     }
 
+    if (prop.type === "animationAction") {
+      throw new Error(
+        `Cannot render a fallback control for prop "${rest.propName}" with type animationAction`
+      );
+    }
+
     prop satisfies never;
   }
 

apps/builder/app/builder/features/settings-panel/props-section/animation/animation-keyframes.tsx

@@ -0,0 +1,218 @@
+import { parseCss } from "@webstudio-is/css-data";
+import { StyleValue, toValue } from "@webstudio-is/css-engine";
+import {
+  Text,
+  Grid,
+  IconButton,
+  Label,
+  Separator,
+  Tooltip,
+} from "@webstudio-is/design-system";
+import { MinusIcon, PlusIcon } from "@webstudio-is/icons";
+import type { AnimationKeyframe } from "@webstudio-is/sdk";
+import { Fragment, useMemo, useState } from "react";
+import {
+  CssValueInput,
+  type IntermediateStyleValue,
+} from "~/builder/features/style-panel/shared/css-value-input";
+import { toKebabCase } from "~/builder/features/style-panel/shared/keyword-utils";
+import { CodeEditor } from "~/builder/shared/code-editor";
+import { useIds } from "~/shared/form-utils";
+
+const unitOptions = [
+  {
+    id: "%" as const,
+    label: "%",
+    type: "unit" as const,
+  },
+];
+
+const OffsetInput = ({
+  id,
+  value,
+  onChange,
+}: {
+  id: string;
+  value: number | undefined;
+  onChange: (value: number | undefined) => void;
+}) => {
+  const [intermediateValue, setIntermediateValue] = useState<
+    StyleValue | IntermediateStyleValue
+  >();
+
+  return (
+    <CssValueInput
+      id={id}
+      placeholder="auto"
+      getOptions={() => []}
+      unitOptions={unitOptions}
+      intermediateValue={intermediateValue}
+      styleSource="default"
+      /* same as offset has 0 - 100% */
+      property={"fontStretch"}
+      value={
+        value !== undefined
+          ? {
+              type: "unit",
+              value: Math.round(value * 1000) / 10,
+              unit: "%",
+            }
+          : undefined
+      }
+      onChange={(styleValue) => {
+        if (styleValue === undefined) {
+          setIntermediateValue(styleValue);
+          return;
+        }
+
+        const clampedStyleValue = { ...styleValue };
+        if (
+          clampedStyleValue.type === "unit" &&
+          clampedStyleValue.unit === "%"
+        ) {
+          clampedStyleValue.value = Math.min(
+            100,
+            Math.max(0, clampedStyleValue.value)
+          );
+        }
+
+        setIntermediateValue(clampedStyleValue);
+      }}
+      onHighlight={(_styleValue) => {
+        /* @todo: think about preview */
+      }}
+      onChangeComplete={(event) => {
+        setIntermediateValue(undefined);
+
+        if (event.value.type === "unit" && event.value.unit === "%") {
+          onChange(Math.min(100, Math.max(0, event.value.value)) / 100);
+          return;
+        }
+
+        setIntermediateValue({
+          type: "invalid",
+          value: toValue(event.value),
+        });
+      }}
+      onAbort={() => {
+        /* @todo: allow to change some ephemeral property to see the result in action */
+      }}
+      onReset={() => {
+        setIntermediateValue(undefined);
+        onChange(undefined);
+      }}
+    />
+  );
+};
+
+const Keyframe = ({
+  value,
+  onChange,
+}: {
+  value: AnimationKeyframe;
+  onChange: (value: AnimationKeyframe | undefined) => void;
+}) => {
+  const ids = useIds(["offset"]);
+
+  const cssProperties = useMemo(() => {
+    let result = ``;
+    for (const [property, style] of Object.entries(value.styles)) {
+      result = `${result}${toKebabCase(property)}: ${toValue(style)};\n`;
+    }
+    return result;
+  }, [value.styles]);
+
+  return (
+    <>
+      <Grid
+        gap={1}
+        align={"center"}
+        css={{ gridTemplateColumns: "1fr 1fr auto" }}
+      >
+        <Label htmlFor={ids.offset}>Offset</Label>
+        <OffsetInput
+          id={ids.offset}
+          value={value.offset}
+          onChange={(offset) => {
+            onChange({ ...value, offset });
+          }}
+        />
+        <Tooltip content="Remove keyframe">
+          <IconButton onClick={() => onChange(undefined)}>
+            <MinusIcon />
+          </IconButton>
+        </Tooltip>
+      </Grid>
+      <Grid>
+        <CodeEditor
+          lang="css-properties"
+          size="keyframe"
+          value={cssProperties}
+          onChange={() => {
+            /* do nothing */
+          }}
+          onChangeComplete={(cssText) => {
+            const parsedStyles = parseCss(`selector{${cssText}}`);
+            onChange({
+              ...value,
+              styles: parsedStyles.reduce(
+                (r, { property, value }) => ({ ...r, [property]: value }),
+                {}
+              ),
+            });
+          }}
+        />
+      </Grid>
+    </>
+  );
+};
+
+export const Keyframes = ({
+  value: keyframes,
+  onChange,
+}: {
+  value: AnimationKeyframe[];
+  onChange: (value: AnimationKeyframe[]) => void;
+}) => {
+  const ids = useIds(["addKeyframe"]);
+
+  return (
+    <Grid gap={2}>
+      <Grid gap={1} align={"center"} css={{ gridTemplateColumns: "1fr auto" }}>
+        <Label htmlFor={ids.addKeyframe}>
+          <Text variant={"titles"}>Keyframes</Text>
+        </Label>
+        <IconButton
+          id={ids.addKeyframe}
+          onClick={() =>
+            onChange([...keyframes, { offset: undefined, styles: {} }])
+          }
+        >
+          <PlusIcon />
+        </IconButton>
+      </Grid>
+
+      {keyframes.map((value, index) => (
+        <Fragment key={index}>
+          <Separator />
+          <Keyframe
+            key={index}
+            value={value}
+            onChange={(newValue) => {
+              if (newValue === undefined) {
+                const newValues = [...keyframes];
+                newValues.splice(index, 1);
+                onChange(newValues);
+                return;
+              }
+
+              const newValues = [...keyframes];
+              newValues[index] = newValue;
+              onChange(newValues);
+            }}
+          />
+        </Fragment>
+      ))}
+    </Grid>
+  );
+};

apps/builder/app/builder/features/settings-panel/props-section/animation/animation-panel-content.stories.tsx

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AnimationPanelContent } from "./animation-panel-content";
+import { theme } from "@webstudio-is/design-system";
+import { useState } from "react";
+import type { ScrollAnimation, ViewAnimation } from "@webstudio-is/sdk";
+
+const meta = {
+  title: "Builder/Settings Panel/Animation Panel Content",
+  component: AnimationPanelContent,
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ background: theme.colors.backgroundPanel, padding: 16 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof AnimationPanelContent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const ScrollAnimationTemplate: Story["render"] = ({ value: initialValue }) => {
+  const [value, setValue] = useState(initialValue);
+
+  return (
+    <AnimationPanelContent
+      type="scroll"
+      value={value}
+      onChange={(newValue) => {
+        setValue(newValue as ScrollAnimation);
+      }}
+    />
+  );
+};
+
+const ViewAnimationTemplate: Story["render"] = ({ value: initialValue }) => {
+  const [value, setValue] = useState(initialValue);
+
+  return (
+    <AnimationPanelContent
+      type="view"
+      value={value}
+      onChange={(newValue) => {
+        setValue(newValue as ViewAnimation);
+      }}
+    />
+  );
+};
+
+export const ScrollAnimationStory: Story = {
+  render: ScrollAnimationTemplate,
+  args: {
+    type: "scroll",
+    value: {
+      name: "scroll-animation",
+      timing: {
+        rangeStart: ["start", { type: "unit", value: 0, unit: "%" }],
+        rangeEnd: ["end", { type: "unit", value: 100, unit: "%" }],
+      },
+      keyframes: [
+        {
+          offset: 0,
+          styles: {
+            opacity: { type: "unit", value: 0, unit: "%" },
+            color: { type: "rgb", r: 255, g: 0, b: 0, alpha: 1 },
+          },
+        },
+      ],
+    },
+    onChange: () => {},
+  },
+};
+
+export const ViewAnimationStory: Story = {
+  render: ViewAnimationTemplate,
+  args: {
+    type: "view",
+    value: {
+      name: "view-animation",
+      timing: {
+        rangeStart: ["entry", { type: "unit", value: 0, unit: "%" }],
+        rangeEnd: ["exit", { type: "unit", value: 100, unit: "%" }],
+      },
+      keyframes: [
+        {
+          offset: 0,
+          styles: {
+            opacity: { type: "unit", value: 0, unit: "%" },
+            color: { type: "rgb", r: 255, g: 0, b: 0, alpha: 1 },
+          },
+        },
+      ],
+    },
+    onChange: () => {},
+  },
+};