From 0048d9b73ccf3a306e41a54c37680cc4772d5ba8 Mon Sep 17 00:00:00 2001 From: istarkov Date: Wed, 26 Feb 2025 11:04:48 +0000 Subject: [PATCH 1/2] experimental: Add predefined animations --- .../animation/animations-select.tsx | 20 +--- .../animation/new-scroll-animations.ts | 12 +- .../animation/new-view-animations.ts | 109 +++++++++++++++++- packages/sdk-components-animation/private-src | 2 +- 4 files changed, 120 insertions(+), 23 deletions(-) diff --git a/apps/builder/app/builder/features/settings-panel/props-section/animation/animations-select.tsx b/apps/builder/app/builder/features/settings-panel/props-section/animation/animations-select.tsx index bfca765f19d7..1a56cb610436 100644 --- a/apps/builder/app/builder/features/settings-panel/props-section/animation/animations-select.tsx +++ b/apps/builder/app/builder/features/settings-panel/props-section/animation/animations-select.tsx @@ -35,16 +35,8 @@ 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"; @@ -52,12 +44,8 @@ const newAnimationsPerType: { scroll: ScrollAnimation[]; view: ViewAnimation[]; } = { - scroll: [ - newScrollAnimation, - newFadeInScrollAnimation, - newFadeOutScrollAnimation, - ], - view: [newViewAnimation, newFadeInViewAnimation, newFadeOutViewAnimation], + scroll: newScrollAnimations, + view: newViewAnimations, }; type Props = { diff --git a/apps/builder/app/builder/features/settings-panel/props-section/animation/new-scroll-animations.ts b/apps/builder/app/builder/features/settings-panel/props-section/animation/new-scroll-animations.ts index 24747039cd25..d2f23f9e92ee 100644 --- a/apps/builder/app/builder/features/settings-panel/props-section/animation/new-scroll-animations.ts +++ b/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, +]; diff --git a/apps/builder/app/builder/features/settings-panel/props-section/animation/new-view-animations.ts b/apps/builder/app/builder/features/settings-panel/props-section/animation/new-view-animations.ts index 277f19302ab7..4b9ddf84d5c9 100644 --- a/apps/builder/app/builder/features/settings-panel/props-section/animation/new-view-animations.ts +++ b/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,106 @@ 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("translate", "inset(0 100% 0 0)"), + }, + }, + { + offset: 1, + styles: { + "clip-path": parseCssValue("translate", "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("translate", "inset(0 0 0 0)"), + }, + }, + + { + offset: 1, + styles: { + "clip-path": parseCssValue("translate", "inset(0 0 0 100%)"), + }, + }, + ], +}; + +export const newViewAnimations = [ + newViewAnimation, + newFadeInViewAnimation, + newFlyInViewAnimation, + newWipeInViewAnimation, + newFadeOutViewAnimation, + newFlyOutViewAnimation, + newWipeOutViewAnimation, +]; diff --git a/packages/sdk-components-animation/private-src b/packages/sdk-components-animation/private-src index 5a0db5b45e28..1a3a51888890 160000 --- a/packages/sdk-components-animation/private-src +++ b/packages/sdk-components-animation/private-src @@ -1 +1 @@ -Subproject commit 5a0db5b45e2845d6b38127d79e298896da522507 +Subproject commit 1a3a5188889046f8d0755e1b9894204872503ce6 From 9040cf2979c7bb9f9e24e302dd53209ea702c990 Mon Sep 17 00:00:00 2001 From: istarkov Date: Wed, 26 Feb 2025 11:24:43 +0000 Subject: [PATCH 2/2] Add parallax --- .../animation/new-view-animations.ts | 54 ++++++++++++++++--- 1 file changed, 48 insertions(+), 6 deletions(-) diff --git a/apps/builder/app/builder/features/settings-panel/props-section/animation/new-view-animations.ts b/apps/builder/app/builder/features/settings-panel/props-section/animation/new-view-animations.ts index 4b9ddf84d5c9..76cd77ddb00d 100644 --- a/apps/builder/app/builder/features/settings-panel/props-section/animation/new-view-animations.ts +++ b/apps/builder/app/builder/features/settings-panel/props-section/animation/new-view-animations.ts @@ -114,13 +114,13 @@ const newWipeInViewAnimation: ViewAnimation = { { offset: 0, styles: { - "clip-path": parseCssValue("translate", "inset(0 100% 0 0)"), + "clip-path": parseCssValue("clipPath", "inset(0 100% 0 0)"), }, }, { offset: 1, styles: { - "clip-path": parseCssValue("translate", "inset(0 0 0 0)"), + "clip-path": parseCssValue("clipPath", "inset(0 0 0 0)"), }, }, ], @@ -140,14 +140,54 @@ const newWipeOutViewAnimation: ViewAnimation = { { offset: 0, styles: { - "clip-path": parseCssValue("translate", "inset(0 0 0 0)"), + "clip-path": parseCssValue("clipPath", "inset(0 0 0 0)"), }, }, { offset: 1, styles: { - "clip-path": parseCssValue("translate", "inset(0 0 0 100%)"), + "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"), }, }, ], @@ -156,9 +196,11 @@ const newWipeOutViewAnimation: ViewAnimation = { export const newViewAnimations = [ newViewAnimation, newFadeInViewAnimation, - newFlyInViewAnimation, - newWipeInViewAnimation, newFadeOutViewAnimation, + newFlyInViewAnimation, newFlyOutViewAnimation, + newWipeInViewAnimation, newWipeOutViewAnimation, + newParallaxInAnimation, + newParallaxOutAnimation, ];