fix: css core

clip/clip.js

@@ -1,4 +1,9 @@
-import { HTMLClip, AudioPlayback, AudioEffect } from "@donkeyclip/motorcortex";
+import {
+  HTMLClip,
+  AudioPlayback,
+  AudioEffect,
+  setCSSCore,
+} from "@donkeyclip/motorcortex";
 import html from "./clip.html";
 import css from "!!raw-loader!./clip.css";
 import initParams from "./initParams";
@@ -11,8 +16,8 @@ import clip5 from "./scenes/scene-5";
 import clip6 from "./scenes/scene-6";
 import clip7 from "./scenes/scene-7";
 import clip8 from "./scenes/scene-8";
-
-
+import AnimePluginDefinition from "@donkeyclip/motorcortex-anime";
+setCSSCore(AnimePluginDefinition.CSSEffect);
 
 import { moveBottom } from "./library/moveBottom";
 import { moveRight } from "./library/moveRight";
@@ -61,19 +66,19 @@ const effect = new AudioEffect(
 
 clip.addIncident(effect, 37000);
 
-clip.addIncident(opacity(0.2,".texture",1000),1800)
+clip.addIncident(opacity(0.2, ".texture", 1000), 1800);
 clip.addIncident(scene1, 0);
-clip.addIncident(clip2,3000);
-clip.addIncident(moveRight("-20%",".texture",4500),3500)
-clip.addIncident(clip3,8000);
-clip.addIncident(moveRight("0%",".texture",4500),8500)
-clip.addIncident(clip4,13000);
-clip.addIncident(moveBottom("-30%",".texture",4500),13500)
-clip.addIncident(clip5,18000);
-clip.addIncident(moveBottom("0%",".texture",4500),18500)
-clip.addIncident(clip6,23000);
-clip.addIncident(moveRight("-20%",".texture",4500),23500)
-clip.addIncident(clip7,28000);
-clip.addIncident(moveBottom("-30%",".texture",4500),28500)
-clip.addIncident(clip8,33000);
-clip.addIncident(moveBottom("0%",".texture",4500),33500)
+clip.addIncident(clip2, 3000);
+clip.addIncident(moveRight("-20%", ".texture", 4500), 3500);
+clip.addIncident(clip3, 8000);
+clip.addIncident(moveRight("0%", ".texture", 4500), 8500);
+clip.addIncident(clip4, 13000);
+clip.addIncident(moveBottom("-30%", ".texture", 4500), 13500);
+clip.addIncident(clip5, 18000);
+clip.addIncident(moveBottom("0%", ".texture", 4500), 18500);
+clip.addIncident(clip6, 23000);
+clip.addIncident(moveRight("-20%", ".texture", 4500), 23500);
+clip.addIncident(clip7, 28000);
+clip.addIncident(moveBottom("-30%", ".texture", 4500), 28500);
+clip.addIncident(clip8, 33000);
+clip.addIncident(moveBottom("0%", ".texture", 4500), 33500);

clip/library/moveBottom.js

@@ -1,10 +1,18 @@
 import { CSSEffect } from "@donkeyclip/motorcortex";
-export const moveBottom = (bottom,selector, duration, delay = 0, easing = "linear") =>
+export const moveBottom = (
+  bottom,
+  selector,
+  duration,
+  delay = 0,
+  easing = "linear",
+  initialValues = undefined
+) =>
   new CSSEffect(
     {
       animatedAttrs: {
         bottom,
       },
+      ...(initialValues && { initialValues: { bottom: initialValues } }),
     },
     {
       selector,

clip/library/moveLeft.js

@@ -1,10 +1,18 @@
 import { CSSEffect } from "@donkeyclip/motorcortex";
-export const moveLeft = (left,selector, duration, delay = 0, easing = "linear") =>
+export const moveLeft = (
+  left,
+  selector,
+  duration,
+  delay = 0,
+  easing = "linear",
+  initialValues = undefined
+) =>
   new CSSEffect(
     {
       animatedAttrs: {
         left,
       },
+      ...(initialValues && { initialValues: { left: initialValues } }),
     },
     {
       selector,

clip/library/moveRight.js

@@ -1,10 +1,18 @@
 import { CSSEffect } from "@donkeyclip/motorcortex";
-export const moveRight = (right,selector, duration, delay = 0, easing = "linear") =>
+export const moveRight = (
+  right,
+  selector,
+  duration,
+  delay = 0,
+  easing = "linear",
+  initialValues = undefined
+) =>
   new CSSEffect(
     {
       animatedAttrs: {
         right,
       },
+      ...(initialValues && { initialValues: { right: initialValues } }),
     },
     {
       selector,

clip/library/moveTop.js

@@ -1,10 +1,18 @@
 import { CSSEffect } from "@donkeyclip/motorcortex";
-export const moveTop = (top,selector, duration, delay = 0, easing = "linear") =>
+export const moveTop = (
+  top,
+  selector,
+  duration,
+  delay = 0,
+  easing = "linear",
+  initialValues = undefined
+) =>
   new CSSEffect(
     {
       animatedAttrs: {
         top,
       },
+      ...(initialValues && { initialValues: { top: initialValues } }),
     },
     {
       selector,

clip/scenes/scene-1/index.js

@@ -1,10 +1,9 @@
 import { HTMLClip } from "@donkeyclip/motorcortex";
 import html from "./index.html";
 import css from "!!raw-loader!./index.css";
-import { moveRight } from './../../library/moveRight';
+import { moveRight } from "./../../library/moveRight";
 import { moveBottom } from "../../library/moveBottom";
 
-
 const clip = new HTMLClip({
   html,
   css,
@@ -24,9 +23,10 @@ const clip = new HTMLClip({
   ],
 });
 
-clip.addIncident(moveRight("-120%",".intro",2300),0);
-clip.addIncident(moveBottom("0%",".letter",300,"@stagger(0,600)"),2000);
-
+clip.addIncident(moveRight("-120%", ".intro", 2300), 0);
+clip.addIncident(
+  moveBottom("0%", ".letter", 300, "@stagger(0,600)", "linear", "102%"),
+  2000
+);
 
 export default clip;
-

clip/scenes/scene-2/index.js

@@ -2,8 +2,8 @@ import { HTMLClip } from "@donkeyclip/motorcortex";
 import html from "./index.html";
 import css from "!!raw-loader!./index.css";
 import { moveLeft } from "../../library/moveLeft";
-import { moveRight } from './../../library/moveRight';
-import { moveTop } from './../../library/moveTop';
+import { moveRight } from "./../../library/moveRight";
+import { moveTop } from "./../../library/moveTop";
 import { opacity } from "../../library/opacity";
 import { scale } from "../../library/scale";
 
@@ -16,7 +16,7 @@ const clip2 = new HTMLClip({
     height: "450px",
   },
   initParams: {
-    slide1: "@initParams.slide1"
+    slide1: "@initParams.slide1",
   },
   fonts: [
     {
@@ -26,17 +26,34 @@ const clip2 = new HTMLClip({
   ],
 });
 
-clip2.addIncident(moveLeft("0%",".background-container",2800,0,"easeInOutCubic"),0)
-clip2.addIncident(moveLeft("-40%",".face-container",3000,0,"easeInOutCubic"),400)
-clip2.addIncident(moveLeft("-30%",".face-container",3200),4800)
-clip2.addIncident(moveTop("0px",".letter",300,"@stagger(0,600)","easeOutSine"),2700)
-clip2.addIncident(opacity(1,".letter",300,"@stagger(0,600)"),2700)
-clip2.addIncident(moveTop("0px",".word",400,"@stagger(0,700)","easeOutSine"),3600)
-clip2.addIncident(opacity(1,".word",400,"@stagger(0,700)"),3600)
-clip2.addIncident(moveRight("30%",".bg-text-container",5300),500)
-clip2.addIncident(opacity(0.4,".text-effect",1000),1600)
-clip2.addIncident(moveLeft("10%",".text-effect",4500),2000)
-clip2.addIncident(scale(0.9,".text-container",2000),4800)
-clip2.addIncident(moveRight("0%",".text-container",2000),4800)
+clip2.addIncident(
+  moveLeft("0%", ".background-container", 2800, 0, "easeInOutCubic", "-120%"),
+  0
+);
+clip2.addIncident(
+  moveLeft("-40%", ".face-container", 3000, 0, "easeInOutCubic", "-100%"),
+  400
+);
+clip2.addIncident(moveLeft("-30%", ".face-container", 3200, 0, "linear"), 4800);
+clip2.addIncident(
+  moveTop("0px", ".letter", 300, "@stagger(0,600)", "easeOutSine"),
+  2700
+);
+clip2.addIncident(opacity(1, ".letter", 300, "@stagger(0,600)"), 2700);
+clip2.addIncident(
+  moveTop("0px", ".word", 400, "@stagger(0,700)", "easeOutSine"),
+  3600
+);
+clip2.addIncident(opacity(1, ".word", 400, "@stagger(0,700)"), 3600);
+clip2.addIncident(
+  moveRight("30%", ".bg-text-container", 5300, 0, "linear", "38px"),
+  500
+);
+clip2.addIncident(opacity(0.4, ".text-effect", 1000), 1600);
+clip2.addIncident(moveLeft("10%", ".text-effect", 4500), 2000);
+clip2.addIncident(scale(0.9, ".text-container", 2000), 4800);
+clip2.addIncident(
+  moveRight("0%", ".text-container", 2000, 0, "linear", "10%"),
+  4800
+);
 export default clip2;
-

clip/scenes/scene-3/index.js

@@ -2,8 +2,8 @@ import { HTMLClip } from "@donkeyclip/motorcortex";
 import html from "./index.html";
 import css from "!!raw-loader!./index.css";
 import { moveLeft } from "../../library/moveLeft";
-import { moveRight } from './../../library/moveRight';
-import { moveTop } from './../../library/moveTop';
+import { moveRight } from "./../../library/moveRight";
+import { moveTop } from "./../../library/moveTop";
 import { opacity } from "../../library/opacity";
 import { scale } from "../../library/scale";
 
@@ -16,7 +16,7 @@ const clip3 = new HTMLClip({
     height: "450px",
   },
   initParams: {
-    slide2: "@initParams.slide2"
+    slide2: "@initParams.slide2",
   },
   fonts: [
     {
@@ -26,17 +26,34 @@ const clip3 = new HTMLClip({
   ],
 });
 
-clip3.addIncident(moveRight("0%",".background-container",2800,0,"easeInOutCubic"),0)
-clip3.addIncident(moveRight("-40%",".face-container",2800,0,"easeInOutCubic"),400)
-clip3.addIncident(moveRight("-35%",".face-container",3500),4800)
-clip3.addIncident(moveTop("0px",".letter",300,"@stagger(0,600)","easeOutSine"),2700)
-clip3.addIncident(opacity(1,".letter",300,"@stagger(0,600)"),2700)
-clip3.addIncident(moveTop("0px",".word",400,"@stagger(0,700)","easeOutSine"),3600)
-clip3.addIncident(opacity(1,".word",400,"@stagger(0,700)"),3600)
-clip3.addIncident(moveLeft("30%",".bg-text-container",5300),500)
-clip3.addIncident(opacity(0.4,".text-effect",1000),1600)
-clip3.addIncident(moveRight("10%",".text-effect",5000),2000)
-clip3.addIncident(scale(0.9,".text-container",2000),4800)
-clip3.addIncident(moveLeft("0%",".text-container",2000),4800)
+clip3.addIncident(
+  moveRight("0%", ".background-container", 2800, 0, "easeInOutCubic", "-120%"),
+  0
+);
+clip3.addIncident(
+  moveRight("-40%", ".face-container", 2800, 0, "easeInOutCubic", "-100%"),
+  400
+);
+clip3.addIncident(moveRight("-35%", ".face-container", 3500), 4800);
+clip3.addIncident(
+  moveTop("0px", ".letter", 300, "@stagger(0,600)", "easeOutSine"),
+  2700
+);
+clip3.addIncident(opacity(1, ".letter", 300, "@stagger(0,600)"), 2700);
+clip3.addIncident(
+  moveTop("0px", ".word", 400, "@stagger(0,700)", "easeOutSine"),
+  3600
+);
+clip3.addIncident(opacity(1, ".word", 400, "@stagger(0,700)"), 3600);
+clip3.addIncident(
+  moveLeft("30%", ".bg-text-container", 5300, 0, "linear", "30%"),
+  500
+);
+clip3.addIncident(opacity(0.4, ".text-effect", 1000), 1600);
+clip3.addIncident(moveRight("10%", ".text-effect", 5000), 2000);
+clip3.addIncident(scale(0.9, ".text-container", 2000), 4800);
+clip3.addIncident(
+  moveLeft("0%", ".text-container", 2000, 0, "linear", "10%"),
+  4800
+);
 export default clip3;
-

clip/scenes/scene-4/index.js

@@ -1,9 +1,9 @@
 import { HTMLClip } from "@donkeyclip/motorcortex";
 import html from "./index.html";
 import css from "!!raw-loader!./index.css";
-import { moveTop } from './../../library/moveTop';
+import { moveTop } from "./../../library/moveTop";
 import { opacity } from "../../library/opacity";
-import { moveBottom } from './../../library/moveBottom';
+import { moveBottom } from "./../../library/moveBottom";
 import { scale } from "../../library/scale";
 import { moveRight } from "../../library/moveRight";
 
@@ -16,7 +16,7 @@ const clip4 = new HTMLClip({
     height: "450px",
   },
   initParams: {
-    slide3: "@initParams.slide3"
+    slide3: "@initParams.slide3",
   },
   fonts: [
     {
@@ -26,16 +26,30 @@ const clip4 = new HTMLClip({
   ],
 });
 
-clip4.addIncident(moveTop("0%",".background-container",2800,0,"easeInOutCubic"),0)
-clip4.addIncident(moveTop("-30%",".face-container",2800,0,"easeInOutCubic"),400)
-clip4.addIncident(moveTop("-20%",".face-container",3200),4800)
-clip4.addIncident(moveTop("0px",".letter",300,"@stagger(0,600)","easeOutSine"),2700)
-clip4.addIncident(opacity(1,".letter",300,"@stagger(0,600)"),2700)
-clip4.addIncident(moveTop("0px",".word",400,"@stagger(0,700)","easeOutSine"),3600)
-clip4.addIncident(opacity(1,".word",400,"@stagger(0,700)"),3600)
-clip4.addIncident(opacity(0.4,".text-effect",1000),1600)
-clip4.addIncident(moveRight("10%",".text-effect",4800),2000)
-clip4.addIncident(scale(0.9,".text-container",2000),4800)
-clip4.addIncident(moveBottom("-10%",".text-container",2000),4800)
+clip4.addIncident(
+  moveTop("0%", ".background-container", 2800, 0, "easeInOutCubic", "-190%"),
+  0
+);
+clip4.addIncident(
+  moveTop("-30%", ".face-container", 2800, 0, "easeInOutCubic", "-190%"),
+  400
+);
+clip4.addIncident(moveTop("-20%", ".face-container", 3200), 4800);
+clip4.addIncident(
+  moveTop("0px", ".letter", 300, "@stagger(0,600)", "easeOutSine"),
+  2700
+);
+clip4.addIncident(opacity(1, ".letter", 300, "@stagger(0,600)"), 2700);
+clip4.addIncident(
+  moveTop("0px", ".word", 400, "@stagger(0,700)", "easeOutSine"),
+  3600
+);
+clip4.addIncident(opacity(1, ".word", 400, "@stagger(0,700)"), 3600);
+clip4.addIncident(opacity(0.4, ".text-effect", 1000), 1600);
+clip4.addIncident(moveRight("10%", ".text-effect", 4800), 2000);
+clip4.addIncident(scale(0.9, ".text-container", 2000), 4800);
+clip4.addIncident(
+  moveBottom("-10%", ".text-container", 2000, 0, "linear", "5%"),
+  4800
+);
 export default clip4;
-