experimental: New predefined animations

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

@@ -35,29 +35,17 @@ import type {
 } from "@webstudio-is/sdk";
 
 import { animationActionSchema } from "@webstudio-is/sdk";
-import {
-  newFadeInScrollAnimation,
-  newFadeOutScrollAnimation,
-  newScrollAnimation,
-} from "./new-scroll-animations";
-import {
-  newFadeInViewAnimation,
-  newFadeOutViewAnimation,
-  newViewAnimation,
-} from "./new-view-animations";
+import { newScrollAnimations } from "./new-scroll-animations";
+import { newViewAnimations } from "./new-view-animations";
 import { useIds } from "~/shared/form-utils";
 import { AnimationPanelContent } from "./animation-panel-content";
 
 const newAnimationsPerType: {
   scroll: ScrollAnimation[];
   view: ViewAnimation[];
 } = {
-  scroll: [
-    newScrollAnimation,
-    newFadeInScrollAnimation,
-    newFadeOutScrollAnimation,
-  ],
-  view: [newViewAnimation, newFadeInViewAnimation, newFadeOutViewAnimation],
+  scroll: newScrollAnimations,
+  view: newViewAnimations,
 };
 
 type Props = {

apps/builder/app/builder/features/settings-panel/props-section/animation/new-scroll-animations.ts

@@ -1,7 +1,7 @@
 import { parseCssValue } from "@webstudio-is/css-data";
 import type { ScrollAnimation } from "@webstudio-is/sdk";
 
-export const newScrollAnimation: ScrollAnimation = {
+const newScrollAnimation: ScrollAnimation = {
   name: "New Animation",
   description: "Create a new animation.",
 
@@ -20,7 +20,7 @@ export const newScrollAnimation: ScrollAnimation = {
 };
 
 // @todo: visit https://github.com/argyleink/open-props/blob/main/src/props.animations.css
-export const newFadeInScrollAnimation: ScrollAnimation = {
+const newFadeInScrollAnimation: ScrollAnimation = {
   name: "Fade In",
   description: "Fade in the element as it scrolls into view.",
 
@@ -40,7 +40,7 @@ export const newFadeInScrollAnimation: ScrollAnimation = {
   ],
 };
 
-export const newFadeOutScrollAnimation: ScrollAnimation = {
+const newFadeOutScrollAnimation: ScrollAnimation = {
   name: "Fade Out",
   description: "Fade out the element as it scrolls out of view.",
 
@@ -59,3 +59,9 @@ export const newFadeOutScrollAnimation: ScrollAnimation = {
     },
   ],
 };
+
+export const newScrollAnimations = [
+  newScrollAnimation,
+  newFadeInScrollAnimation,
+  newFadeOutScrollAnimation,
+];

apps/builder/app/builder/features/settings-panel/props-section/animation/new-view-animations.ts

@@ -1,7 +1,7 @@
 import { parseCssValue } from "@webstudio-is/css-data";
 import type { ViewAnimation } from "@webstudio-is/sdk";
 
-export const newViewAnimation: ViewAnimation = {
+const newViewAnimation: ViewAnimation = {
   name: "New Animation",
   description: "Create a new animation.",
 
@@ -20,7 +20,7 @@ export const newViewAnimation: ViewAnimation = {
 };
 
 // @todo: visit https://github.com/argyleink/open-props/blob/main/src/props.animations.css
-export const newFadeInViewAnimation: ViewAnimation = {
+const newFadeInViewAnimation: ViewAnimation = {
   name: "Fade In",
   description: "Fade in the element as it scrolls into view.",
 
@@ -40,7 +40,7 @@ export const newFadeInViewAnimation: ViewAnimation = {
   ],
 };
 
-export const newFadeOutViewAnimation: ViewAnimation = {
+const newFadeOutViewAnimation: ViewAnimation = {
   name: "Fade Out",
   description: "Fade out the element as it scrolls out of view.",
 
@@ -59,3 +59,148 @@ export const newFadeOutViewAnimation: ViewAnimation = {
     },
   ],
 };
+
+const newFlyInViewAnimation: ViewAnimation = {
+  name: "Fly In",
+  description: "Fly in the element as it scrolls into view.",
+
+  timing: {
+    rangeStart: ["entry", { type: "unit", value: 0, unit: "%" }],
+    rangeEnd: ["entry", { type: "unit", value: 100, unit: "%" }],
+    fill: "backwards",
+    easing: "linear",
+  },
+  keyframes: [
+    {
+      offset: 0,
+      styles: {
+        translate: parseCssValue("translate", "0 100px"),
+      },
+    },
+  ],
+};
+
+const newFlyOutViewAnimation: ViewAnimation = {
+  name: "Fly Out",
+  description: "Fly out the element as it scrolls out of view.",
+
+  timing: {
+    rangeStart: ["exit", { type: "unit", value: 0, unit: "%" }],
+    rangeEnd: ["exit", { type: "unit", value: 100, unit: "%" }],
+    fill: "forwards",
+    easing: "linear",
+  },
+  keyframes: [
+    {
+      offset: 1,
+      styles: {
+        translate: parseCssValue("translate", "0 -100px"),
+      },
+    },
+  ],
+};
+
+const newWipeInViewAnimation: ViewAnimation = {
+  name: "Wipe In",
+  description: "Wipe in the element as it scrolls into view.",
+
+  timing: {
+    rangeStart: ["contain", { type: "unit", value: 0, unit: "%" }],
+    rangeEnd: ["contain", { type: "unit", value: 50, unit: "%" }],
+    fill: "backwards",
+    easing: "linear",
+  },
+  keyframes: [
+    {
+      offset: 0,
+      styles: {
+        "clip-path": parseCssValue("clipPath", "inset(0 100% 0 0)"),
+      },
+    },
+    {
+      offset: 1,
+      styles: {
+        "clip-path": parseCssValue("clipPath", "inset(0 0 0 0)"),
+      },
+    },
+  ],
+};
+
+const newWipeOutViewAnimation: ViewAnimation = {
+  name: "Wipe Out",
+  description: "Wipe out the element as it scrolls out of view.",
+
+  timing: {
+    rangeStart: ["contain", { type: "unit", value: 50, unit: "%" }],
+    rangeEnd: ["contain", { type: "unit", value: 100, unit: "%" }],
+    fill: "forwards",
+    easing: "linear",
+  },
+  keyframes: [
+    {
+      offset: 0,
+      styles: {
+        "clip-path": parseCssValue("clipPath", "inset(0 0 0 0)"),
+      },
+    },
+
+    {
+      offset: 1,
+      styles: {
+        "clip-path": parseCssValue("clipPath", "inset(0 0 0 100%)"),
+      },
+    },
+  ],
+};
+
+const newParallaxInAnimation: ViewAnimation = {
+  name: "Parallax In",
+  description: "Parallax the element as it scrolls out of view.",
+
+  timing: {
+    rangeStart: ["cover", { type: "unit", value: 0, unit: "%" }],
+    rangeEnd: ["cover", { type: "unit", value: 50, unit: "%" }],
+    fill: "backwards",
+    easing: "linear",
+  },
+  keyframes: [
+    {
+      offset: 0,
+      styles: {
+        translate: parseCssValue("translate", "0 100px"),
+      },
+    },
+  ],
+};
+
+const newParallaxOutAnimation: ViewAnimation = {
+  name: "Parallax Out",
+  description: "Parallax the element as it scrolls out of view.",
+
+  timing: {
+    rangeStart: ["cover", { type: "unit", value: 50, unit: "%" }],
+    rangeEnd: ["cover", { type: "unit", value: 100, unit: "%" }],
+    fill: "forwards",
+    easing: "linear",
+  },
+  keyframes: [
+    {
+      offset: 1,
+      styles: {
+        translate: parseCssValue("translate", "0 -100px"),
+      },
+    },
+  ],
+};
+
+export const newViewAnimations = [
+  newViewAnimation,
+  newFadeInViewAnimation,
+  newFadeOutViewAnimation,
+  newFlyInViewAnimation,
+  newFlyOutViewAnimation,
+  newWipeInViewAnimation,
+  newWipeOutViewAnimation,
+  newParallaxInAnimation,
+  newParallaxOutAnimation,
+];