fix: fix css core

donkeyclip · Apr 18, 2023 · 613245b · 613245b
1 parent d41b53f
commit 613245b
Show file tree

Hide file tree

Showing 3 changed files with 179 additions and 91 deletions.
diff --git a/clip/clip.js b/clip/clip.js
@@ -1,11 +1,22 @@
-import { HTMLClip,loadPlugin } from "@donkeyclip/motorcortex";
+import { HTMLClip, loadPlugin, setCSSCore } from "@donkeyclip/motorcortex";
 import MapsDef from "@donkeyclip/motorcortex-ol";
 import html from "./clip.html";
 import css from "!!raw-loader!./clip.css";
 
-import { fontSize, fontWeight, height, left, draw,top, scale, GotoIncident } from "./incidents";
+import {
+  fontSize,
+  fontWeight,
+  height,
+  left,
+  draw,
+  top,
+  scale,
+  GotoIncident,
+} from "./incidents";
 import { initParams } from "./initParams";
 import initParamsValidationRules from "./initParamsValidationRules";
+// import AnimePluginDefinition from "@donkeyclip/motorcortex-anime";
+// setCSSCore(AnimePluginDefinition.CSSEffect);
 const Maps = loadPlugin(MapsDef);
 
 export const clip = new HTMLClip({
@@ -26,49 +37,96 @@ export const clip = new HTMLClip({
   ],
 });
 
-const base = MapsDef.utils.fromLonLat([0,46.95]);
+const base = MapsDef.utils.fromLonLat([0, 46.95]);
 const bern = MapsDef.utils.fromLonLat([360, 46.95]);
-const finish = MapsDef.utils.fromLonLat([720,46.95]);
+const finish = MapsDef.utils.fromLonLat([720, 46.95]);
 
 const mapClip = new Maps.Clip(
   {
     parameters: {
-      view: { center: base, zoom: 1 }
-    }
+      view: { center: base, zoom: 1 },
+    },
   },
   {
     selector: ".map",
     containerParams: { width: "400px", height: "400px" },
-    initParams: {color:"@initParams.color"},
+    initParams: { color: "@initParams.color" },
   }
 );
 
-
-mapClip.addIncident(GotoIncident(bern,1),8200)
-mapClip.addIncident(GotoIncident(finish,4,6000),12200)
-clip.addIncident(mapClip,0)
-clip.addIncident(top("0%",".welcome-later", 1000,"@stagger(0, 600)","easeInOutExpo"), 0);
-clip.addIncident(top("0%",".to-later", 1000,"@stagger(0, 600)","easeInOutExpo"), 0);
-clip.addIncident(top("0%",".motor-later", 1000,"@stagger(0, 600)","easeInOutExpo"), 0);
-clip.addIncident(top("0%",".open-later", 1000,"@stagger(0, 600)","easeInOutExpo"), 0);
-clip.addIncident(top("0%",".plugin-later", 1000,"@stagger(0, 600)","easeInOutExpo"), 0);
+mapClip.addIncident(GotoIncident(bern, 1), 8200);
+mapClip.addIncident(GotoIncident(finish, 4, 6000), 12200);
+clip.addIncident(mapClip, 0);
+clip.addIncident(
+  top("0%", ".welcome-later", 1000, "@stagger(0, 600)", "easeInOutExpo"),
+  0
+);
+clip.addIncident(
+  top("0%", ".to-later", 1000, "@stagger(0, 600)", "easeInOutExpo"),
+  0
+);
+clip.addIncident(
+  top("0%", ".motor-later", 1000, "@stagger(0, 600)", "easeInOutExpo"),
+  0
+);
+clip.addIncident(
+  top("0%", ".open-later", 1000, "@stagger(0, 600)", "easeInOutExpo"),
+  0
+);
+clip.addIncident(
+  top("0%", ".plugin-later", 1000, "@stagger(0, 600)", "easeInOutExpo"),
+  0
+);
 //text2
-clip.addIncident(top("0%",".in-later", 1000,"@stagger(0, 600)","easeInOutExpo"), 1600);
-clip.addIncident(top("0%",".clip-later", 1000,"@stagger(0, 600)","easeInOutExpo"), 1600);
-clip.addIncident(top("0%",".some-later", 1000,"@stagger(0, 600)","easeInOutExpo"), 1600);
-clip.addIncident(top("0%",".will-later", 1000,"@stagger(0, 600)","easeInOutExpo"), 1600);
-clip.addIncident(top("0%",".cap-later", 1000,"@stagger(0, 600)","easeInOutExpo"), 1600);
-clip.addIncident(top("0%",".of-later", 1000,"@stagger(0, 600)","easeInOutExpo"), 1600);
+clip.addIncident(
+  top("0%", ".in-later", 1000, "@stagger(0, 600)", "easeInOutExpo"),
+  1600
+);
+clip.addIncident(
+  top("0%", ".clip-later", 1000, "@stagger(0, 600)", "easeInOutExpo"),
+  1600
+);
+clip.addIncident(
+  top("0%", ".some-later", 1000, "@stagger(0, 600)", "easeInOutExpo"),
+  1600
+);
+clip.addIncident(
+  top("0%", ".will-later", 1000, "@stagger(0, 600)", "easeInOutExpo"),
+  1600
+);
+clip.addIncident(
+  top("0%", ".cap-later", 1000, "@stagger(0, 600)", "easeInOutExpo"),
+  1600
+);
+clip.addIncident(
+  top("0%", ".of-later", 1000, "@stagger(0, 600)", "easeInOutExpo"),
+  1600
+);
 
-clip.addIncident(top("69%",".text",1000,0,"easeInOutExpo"),5200);
-clip.addIncident(top("5%",".text2",1000,0,"easeInOutExpo"),5200);
-clip.addIncident(fontWeight("100",".later",1000,0,"easeInOutExpo"),5200)
-clip.addIncident(fontSize("50px",".later",1000,0,"easeInOutExpo"),5200)
-clip.addIncident(height("54px",".welcome-text,.description-text",1000,0,"easeInOutExpo"),5200)
-clip.addIncident(left("72%",".text2",1000,0,"easeInOutExpo"),5200)
-clip.addIncident(draw(),6200)
-clip.addIncident(scale(0,1.4,".map-wrapper",1000,0,"easeInOutExpo"),7200)
-clip.addIncident(scale(1.4,2.4,".map-wrapper",4000,0),12200)
-clip.addIncident(top("100%",".later",1000,0,"easeInOutExpo"),8200)
-clip.addIncident(left("-258%",".big-text-wrapper",8000,0),9200)
-clip.addIncident(top("50%",".news-letter",500,0,"easeInOutExpo"),18200)
+clip.addIncident(
+  top("69%", ".text", 1000, 0, "easeInOutExpo", { top: "10%" }),
+  5200
+);
+clip.addIncident(
+  top("5%", ".text2", 1000, 0, "easeInOutExpo", { top: "40%" }),
+  5200
+);
+clip.addIncident(fontWeight("100", ".later", 1000, 0, "easeInOutExpo"), 5200);
+clip.addIncident(fontSize("50px", ".later", 1000, 0, "easeInOutExpo"), 5200);
+clip.addIncident(
+  height("54px", ".welcome-text,.description-text", 1000, 0, "easeInOutExpo"),
+  5200
+);
+clip.addIncident(
+  left("72%", ".text2", 1000, 0, "easeInOutExpo", { left: "53%" }),
+  5200
+);
+clip.addIncident(draw(), 6200);
+clip.addIncident(scale(0, 1.4, ".map-wrapper", 1000, 0, "easeInOutExpo"), 7200);
+clip.addIncident(scale(1.4, 2.4, ".map-wrapper", 4000, 0), 12200);
+clip.addIncident(top("100%", ".later", 1000, 0, "easeInOutExpo"), 8200);
+clip.addIncident(
+  left("-258%", ".big-text-wrapper", 8000, 0, "linear", { left: "108%" }),
+  9200
+);
+clip.addIncident(top("50%", ".news-letter", 500, 0, "easeInOutExpo"), 18200);
diff --git a/clip/incidents.js b/clip/incidents.js
@@ -1,11 +1,10 @@
-import { CSSEffect,loadPlugin } from "@donkeyclip/motorcortex";
+import { CSSEffect, loadPlugin } from "@donkeyclip/motorcortex";
 import SVGDDef from "@donkeyclip/motorcortex-svgdraw";
 import MapsDef from "@donkeyclip/motorcortex-ol";
 const SVGD = loadPlugin(SVGDDef);
 const Maps = loadPlugin(MapsDef);
 
-
-export const opacity = (selector, duration,delay, easing = "linear") =>
+export const opacity = (selector, duration, delay, easing = "linear") =>
   new CSSEffect(
     {
       animatedAttrs: {
@@ -16,27 +15,40 @@ export const opacity = (selector, duration,delay, easing = "linear") =>
       selector,
       duration,
       easing,
-      delay
+      delay,
     }
   );
 
-  export const top = (value,selector, duration,delay, easing = "linear") =>
+export const top = (
+  value,
+  selector,
+  duration,
+  delay,
+  easing = "linear",
+  initialValues = {}
+) =>
   new CSSEffect(
     {
       animatedAttrs: {
         top: value,
       },
+      initialValues,
     },
     {
       selector,
       duration,
       easing,
-      delay
+      delay,
     }
   );
 
-
-  export const fontWeight = (value,selector, duration,delay, easing = "linear") =>
+export const fontWeight = (
+  value,
+  selector,
+  duration,
+  delay,
+  easing = "linear"
+) =>
   new CSSEffect(
     {
       animatedAttrs: {
@@ -47,11 +59,11 @@ export const opacity = (selector, duration,delay, easing = "linear") =>
       selector,
       duration,
       easing,
-      delay
+      delay,
     }
   );
 
-  export const fontSize = (value,selector, duration,delay, easing = "linear") =>
+export const fontSize = (value, selector, duration, delay, easing = "linear") =>
   new CSSEffect(
     {
       animatedAttrs: {
@@ -62,10 +74,10 @@ export const opacity = (selector, duration,delay, easing = "linear") =>
       selector,
       duration,
       easing,
-      delay
+      delay,
     }
   );
-  export const height = (value,selector, duration,delay, easing = "linear") =>
+export const height = (value, selector, duration, delay, easing = "linear") =>
   new CSSEffect(
     {
       animatedAttrs: {
@@ -76,60 +88,78 @@ export const opacity = (selector, duration,delay, easing = "linear") =>
       selector,
       duration,
       easing,
-      delay
+      delay,
     }
   );
-  export const left = (value,selector, duration,delay, easing = "linear") =>
+export const left = (
+  value,
+  selector,
+  duration,
+  delay,
+  easing = "linear",
+  initialValues = {}
+) =>
   new CSSEffect(
     {
       animatedAttrs: {
         left: value,
       },
+      initialValues,
     },
     {
       selector,
       duration,
       easing,
-      delay
+      delay,
     }
   );
 
-export const  draw = ()=> new SVGD.Draw({
-  animatedAttrs: {
-      cover: 1
-  },
-}, {
-  selector: '.st1',
-  duration: 1000
-});
-
-export const scale = (start,end,selector, duration,delay, easing = "linear") =>
-new CSSEffect(
-  {
-    animatedAttrs: {
-      transform: {scale:end},
+export const draw = () =>
+  new SVGD.Draw(
+    {
+      animatedAttrs: {
+        cover: 1,
+      },
     },
-    initialValues:{
-      transform:{scale:start}
-    }
-  },
-  {
-    selector,
-    duration,
-    easing,
-    delay
-  }
-);
-export const GotoIncident = (valeu,zoom,duration=4000) =>
- new Maps.GoTo(
-  {
-    animatedAttrs: {
-      goto: {
-        zoom: zoom,
-        center: valeu
-      }
+    {
+      selector: ".st1",
+      duration: 1000,
     }
-  },
-  { duration, selector: "!#olmap" }
-);
+  );
 
+export const scale = (
+  start,
+  end,
+  selector,
+  duration,
+  delay,
+  easing = "linear"
+) =>
+  new CSSEffect(
+    {
+      animatedAttrs: {
+        transform: { scale: end },
+      },
+      initialValues: {
+        transform: { scale: start },
+      },
+    },
+    {
+      selector,
+      duration,
+      easing,
+      delay,
+    }
+  );
+export const GotoIncident = (valeu, zoom, duration = 4000) =>
+  new Maps.GoTo(
+    {
+      animatedAttrs: {
+        goto: {
+          zoom: zoom,
+          center: valeu,
+        },
+      },
+    },
+    { duration, selector: "!#olmap" }
+  );
diff --git a/package.json b/package.json
@@ -29,9 +29,10 @@
     }
   },
   "dependencies": {
-    "@donkeyclip/motorcortex": "8.0.4",
-    "@donkeyclip/motorcortex-ol": "3.0.1",
-    "@donkeyclip/motorcortex-svgdraw": "1.0.0",
+    "@donkeyclip/motorcortex": "9.5.7",
+    "@donkeyclip/motorcortex-anime": "^3.1.1",
+    "@donkeyclip/motorcortex-ol": "3.1.0",
+    "@donkeyclip/motorcortex-svgdraw": "1.2.0",
     "html-loader": "3.1.0",
     "raw-loader": "4.0.2"
   },
@@ -41,8 +42,7 @@
     "@babel/plugin-syntax-jsx": "7.16.7",
     "@babel/plugin-transform-react-jsx": "7.16.7",
     "@babel/preset-env": "7.16.11",
-    "@donkeyclip/motorcortex-player": "2.6.1",
-    "@donkeyclip/video-renderer": "1.4.2",
+    "@donkeyclip/motorcortex-player": "2.10.8",
     "@rollup/plugin-babel": "5.3.0",
     "@rollup/plugin-commonjs": "21.0.1",
     "@rollup/plugin-json": "4.1.0",
@@ -68,4 +68,4 @@
     "webpack-cli": "4.9.1",
     "webpack-dev-server": "4.7.3"
   }
-}
+}