fix: css core

donkeyclip · Apr 19, 2023 · 6baebeb · 6baebeb
1 parent 45d40bf
commit 6baebeb
Show file tree

Hide file tree

Showing 9 changed files with 150 additions and 58 deletions.
diff --git a/clip/clip.js b/clip/clip.js
@@ -1,11 +1,13 @@
-import { HTMLClip } from "@donkeyclip/motorcortex";
+import { HTMLClip, setCSSCore } from "@donkeyclip/motorcortex";
 import html from "./clip.html";
 import css from "!!raw-loader!./clip.css";
 import initParams from "./initParams";
 import scene1 from "./scenes/scene-1";
 import scene2 from "./scenes/scene-2";
 import scene3 from "./scenes/scene-3";
 import initParamsValidationRules from "./initParamsValidationRules";
+import AnimePluginDefinition from "@donkeyclip/motorcortex-anime";
+setCSSCore(AnimePluginDefinition.CSSEffect);
 
 export const clip = new HTMLClip({
   html,

diff --git a/clip/library/leftMove.js b/clip/library/leftMove.js
@@ -1,10 +1,17 @@
 import { CSSEffect } from "@donkeyclip/motorcortex";
-export const leftMove = (value, selector, duration, easing = "linear") =>
+export const leftMove = (
+  value,
+  selector,
+  duration,
+  easing = "linear",
+  initialValues = undefined
+) =>
   new CSSEffect(
     {
       animatedAttrs: {
         left: value,
       },
+      ...(initialValues && { initialValues: { left: initialValues } }),
     },
     {
       selector,

diff --git a/clip/library/rightMove.js b/clip/library/rightMove.js
@@ -1,10 +1,17 @@
 import { CSSEffect } from "@donkeyclip/motorcortex";
-export const rightMove = (value, selector, duration, easing = "linear") =>
+export const rightMove = (
+  value,
+  selector,
+  duration,
+  easing = "linear",
+  initialValues
+) =>
   new CSSEffect(
     {
       animatedAttrs: {
         rightMove: value,
       },
+      ...(initialValues && { initialValues: { left: initialValues } }),
     },
     {
       selector,

diff --git a/clip/library/scaleBig.js b/clip/library/scaleBig.js
@@ -7,6 +7,11 @@ export const scaleBig = (selector, duration, easing = "linear") =>
           scale: 1,
         },
       },
+      initialValues: {
+        transform: {
+          scale: 0,
+        },
+      },
     },
     {
       selector,

diff --git a/clip/library/topMove.js b/clip/library/topMove.js
@@ -1,10 +1,17 @@
 import { CSSEffect } from "@donkeyclip/motorcortex";
-export const topMove = (value, selector, duration, easing = "linear") =>
+export const topMove = (
+  value,
+  selector,
+  duration,
+  easing = "linear",
+  initialValues
+) =>
   new CSSEffect(
     {
       animatedAttrs: {
         top: value,
       },
+      ...(initialValues && { initialValues: { left: initialValues } }),
     },
     {
       selector,

diff --git a/clip/scenes/scene-1/index.js b/clip/scenes/scene-1/index.js
@@ -18,10 +18,23 @@ const template = (index) => {
   });
 
   clip.addIncident(opacity(1, ".root", 1), 0);
-  clip.addIncident(topMove("5%", ".title", 1000, "easeInOutQuint"), 0);
-  clip.addIncident(leftMove("0%", ".bg", 3500), 0);
-  clip.addIncident(leftMove("0%", ".hightlight", 1500, "easeInOutQuint"), 0);
-  clip.addIncident(leftMove("5%", ".image", 1500, "easeInOutQuint"), 500);
+  clip.addIncident(topMove("5%", ".title", 1000, "easeInOutQuint", "-100%"), 0);
+  clip.addIncident(
+    leftMove("0%", ".bg:nth-of-type(odd)", 3500, "linear", "120%"),
+    0
+  );
+  clip.addIncident(
+    leftMove("0%", ".bg:nth-of-type(even)", 3500, "linear", "-200%"),
+    0
+  );
+  clip.addIncident(
+    leftMove("0%", ".hightlight", 1500, "easeInOutQuint", "-100%"),
+    0
+  );
+  clip.addIncident(
+    leftMove("5%", ".image", 1500, "easeInOutQuint", "-100%"),
+    500
+  );
   clip.addIncident(scaleBig(".logo", 500, [0.86, 0, 0.07, 1]), 1500);
   clip.addIncident(opacity(0, ".root", 1), 4000);
   return clip;

diff --git a/clip/scenes/scene-2/index.js b/clip/scenes/scene-2/index.js
@@ -19,13 +19,28 @@ const template = (index) => {
   });
 
   clip.addIncident(opacity(1, ".root", 1), 0);
-  clip.addIncident(topMove("5%", ".title", 1000, "easeInOutQuint"), 0);
+  clip.addIncident(topMove("5%", ".title", 1000, "easeInOutQuint", "-100%"), 0);
   clip.addIncident(leftMove("0%", ".bg", 3500), 0);
-  clip.addIncident(leftMove("0%", ".hightlight", 1500, "easeInOutQuint"), 0);
-  clip.addIncident(leftMove("50%", ".image", 1500, "easeInOutQuint"), 500);
-  clip.addIncident(topMove("90%", ".logo", 1000, [0.86, 0, 0.07, 1]), 700);
-  clip.addIncident(leftMove("78%", ".subtitle", 1500, "easeInOutQuint"), 0);
-  clip.addIncident(topMove("68%", ".subtitle", 1500, "easeInOutQuint"), 0);
+  clip.addIncident(
+    leftMove("0%", ".hightlight", 1500, "easeInOutQuint", "-100%"),
+    0
+  );
+  clip.addIncident(
+    leftMove("50%", ".image", 1500, "easeInOutQuint", "-100%"),
+    500
+  );
+  clip.addIncident(
+    topMove("90%", ".logo", 1000, [0.86, 0, 0.07, 1], "-150%"),
+    700
+  );
+  clip.addIncident(
+    leftMove("78%", ".subtitle", 1500, "easeInOutQuint", "100%"),
+    0
+  );
+  clip.addIncident(
+    topMove("68%", ".subtitle", 1500, "easeInOutQuint", "100%"),
+    0
+  );
   clip.addIncident(opacity(0, ".root", 1), 4000);
   return clip;
 };