fix:remove anime plugin and fix demo

donkeyclip · Feb 2, 2022 · 7f58817 · 7f58817
1 parent 285210d
commit 7f58817
Show file tree

Hide file tree

Showing 8 changed files with 2,670 additions and 2,874 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -22,10 +22,8 @@
      }
       #clip {
         background-color: black;
-        width: 90%;
-        height: 90%;
-        margin:auto;
-        margin-top:2%;
+        width: 100%;
+        height: 100%;
       }
   </style>
   </head>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -70,8 +70,7 @@
     }
   },
   "peerDependencies": {
-    "@donkeyclip/motorcortex": "^7",
-    "@donkeyclip/motorcortex-anime": ">= 2.1.16 < 3"
+    "@donkeyclip/motorcortex": "^7"
   },
   "devDependencies": {
     "@babel/cli": "7.16.8",
@@ -83,7 +82,6 @@
     "@commitlint/cli": "16.1.0",
     "@commitlint/config-conventional": "16.0.0",
     "@donkeyclip/motorcortex": "7.8.0",
-    "@donkeyclip/motorcortex-anime": "2.1.17",
     "@donkeyclip/motorcortex-player": "2.5.0",
     "@rollup/plugin-babel": "5.3.0",
     "@rollup/plugin-commonjs": "21.0.1",

diff --git a/src/FontWeight.js b/src/FontWeight.js
@@ -1,8 +1,6 @@
-import MotorCortex from "@donkeyclip/motorcortex";
-import AnimeDefinition from "@donkeyclip/motorcortex-anime";
-const Anime = MotorCortex.loadPlugin(AnimeDefinition);
+import {CSSEffect,HTMLClip,Combo} from "@donkeyclip/motorcortex";
 
-export default class FontWeight extends MotorCortex.HTMLClip {
+export default class FontWeight extends HTMLClip {
   get fonts() {
     let wordlist = this.attrs.fontFamily.split(" ").join("+");
     wordlist += `:wght@${this.attrs.fontWeightList.join(";")}`;
@@ -54,11 +52,11 @@ export default class FontWeight extends MotorCortex.HTMLClip {
   }
 
   buildTree() {
-    const fontWeight = new MotorCortex.Combo(
+    const fontWeight = new Combo(
       {
         incidents: [
           {
-            incidentClass: Anime.Anime,
+            incidentClass: CSSEffect,
             attrs: {
               animatedAttrs: {
                 fontWeight: "900"
@@ -70,7 +68,7 @@ export default class FontWeight extends MotorCortex.HTMLClip {
             position: 0
           },
           {
-            incidentClass: Anime.Anime,
+            incidentClass: CSSEffect,
             attrs: {
               animatedAttrs: {
                 fontWeight: "100"

diff --git a/src/Shadow/IncidentTree.js b/src/Shadow/IncidentTree.js
@@ -1,5 +1,5 @@
-export default (Anime, colorsRGB, duration) => [
-  new Anime.Anime(
+export default (CSSEffect, colorsRGB, duration) => [
+  new CSSEffect(
     {
       animatedAttrs: {
         textShadow: ` 5px 5px 0px rgba(${colorsRGB[0]},1), 
@@ -30,7 +30,7 @@ export default (Anime, colorsRGB, duration) => [
     }
   ),
 
-  new Anime.Anime(
+  new CSSEffect(
     {
       animatedAttrs: {
         textShadow: ` 5px 5px 0px rgba(${colorsRGB[0]},1), 
@@ -60,7 +60,7 @@ export default (Anime, colorsRGB, duration) => [
       selector: `.text`
     }
   ),
-  new Anime.Anime(
+  new CSSEffect(
     {
       animatedAttrs: {
         textShadow: ` 5px 5px 0px rgba(${colorsRGB[0]},1), 
@@ -91,7 +91,7 @@ export default (Anime, colorsRGB, duration) => [
     }
   ),
 
-  new Anime.Anime(
+  new CSSEffect(
     {
       animatedAttrs: {
         textShadow: ` 5px 5px 0px rgba(${colorsRGB[0]},1), 
@@ -122,7 +122,7 @@ export default (Anime, colorsRGB, duration) => [
     }
   ),
 
-  new Anime.Anime(
+  new CSSEffect(
     {
       animatedAttrs: {
         textShadow: ` 5px 5px 0px rgba(${colorsRGB[0]},1), 
@@ -153,7 +153,7 @@ export default (Anime, colorsRGB, duration) => [
     }
   ),
 
-  new Anime.Anime(
+  new CSSEffect(
     {
       animatedAttrs: {
         textShadow: ` 5px 5px 0px rgba(${colorsRGB[0]},1), 
@@ -186,7 +186,7 @@ export default (Anime, colorsRGB, duration) => [
 
   ///REVERSE
 
-  new Anime.Anime(
+  new CSSEffect(
     {
       animatedAttrs: {
         textShadow: `5px 5px 0px rgba(${colorsRGB[0]},1), 
@@ -216,7 +216,7 @@ export default (Anime, colorsRGB, duration) => [
       selector: `.text`
     }
   ),
-  new Anime.Anime(
+  new CSSEffect(
     {
       animatedAttrs: {
         textShadow: `5px 5px 0px rgba(${colorsRGB[0]},1), 
@@ -246,7 +246,7 @@ export default (Anime, colorsRGB, duration) => [
       selector: `.text`
     }
   ),
-  new Anime.Anime(
+  new CSSEffect(
     {
       animatedAttrs: {
         textShadow: `5px 5px 0px rgba(${colorsRGB[0]},1), 
@@ -276,7 +276,7 @@ export default (Anime, colorsRGB, duration) => [
       selector: `.text`
     }
   ),
-  new Anime.Anime(
+  new CSSEffect(
     {
       animatedAttrs: {
         textShadow: `5px 5px 0px rgba(${colorsRGB[0]},1), 
@@ -306,7 +306,7 @@ export default (Anime, colorsRGB, duration) => [
       selector: `.text`
     }
   ),
-  new Anime.Anime(
+  new CSSEffect(
     {
       animatedAttrs: {
         textShadow: `5px 5px 0px rgba(${colorsRGB[0]},1), 
@@ -336,7 +336,7 @@ export default (Anime, colorsRGB, duration) => [
       selector: `.text`
     }
   ),
-  new Anime.Anime(
+  new CSSEffect(
     {
       animatedAttrs: {
         textShadow: `5px 5px 0px rgba(${colorsRGB[0]},0), 

diff --git a/src/Shadow/index.js b/src/Shadow/index.js
@@ -1,11 +1,9 @@
-import MotorCortex from "@donkeyclip/motorcortex";
-import AnimeDefinition from "@donkeyclip/motorcortex-anime";
+import {CSSEffect,HTMLClip} from "@donkeyclip/motorcortex";
 import { fontFamilyHelper } from "../helpers";
 import loadIncidents from "./IncidentTree";
 
-const Anime = MotorCortex.loadPlugin(AnimeDefinition);
 
-export default class Shadow extends MotorCortex.HTMLClip {
+export default class Shadow extends HTMLClip {
   get fonts() {
     const font = [
       {
@@ -78,7 +76,7 @@ export default class Shadow extends MotorCortex.HTMLClip {
   }
 
   buildTree() {
-    const incidents = loadIncidents(Anime, this.colorsRGB, 500);
+    const incidents = loadIncidents(CSSEffect, this.colorsRGB, 500);
     const length = this.attrs.reverse ? incidents.length : incidents.length / 2;
     for (let i = 0; i < length; i++) {
       this.addIncident(incidents[i], i * 500);

diff --git a/src/SvgExplosion.js b/src/SvgExplosion.js
@@ -1,9 +1,7 @@
-import MotorCortex from "@donkeyclip/motorcortex";
-import AnimeDefinition from "@donkeyclip/motorcortex-anime";
-const Anime = MotorCortex.loadPlugin(AnimeDefinition);
+import {CSSEffect,HTMLClip,Group} from "@donkeyclip/motorcortex";
 import { fontFamilyHelper } from "./helpers";
 
-export default class SvgExplosion extends MotorCortex.HTMLClip {
+export default class SvgExplosion extends HTMLClip {
   get fonts() {
     const family = fontFamilyHelper(
       this.attrs.fontFamily,
@@ -138,7 +136,7 @@ export default class SvgExplosion extends MotorCortex.HTMLClip {
     let polyPosition = (this.textSize * this.attrs.text.length) / 2;
     for (let i = 0; i < this.attrs.text.length; i++) {
       const rotation = -50 + Math.random() * 100;
-      const textAnimation = new Anime.Anime(
+      const textAnimation = new CSSEffect(
         {
           animatedAttrs: {
             width: `${this.textSize}px`,
@@ -164,7 +162,7 @@ export default class SvgExplosion extends MotorCortex.HTMLClip {
           easing: "easeOutExpo",
         }
       );
-      const polyMcGrou = new MotorCortex.Group();
+      const polyMcGrou = new Group();
       let waitTIme = 0;
       for (let j = 0; j < 8; j++) {
         const a = Math.random();
@@ -180,7 +178,7 @@ export default class SvgExplosion extends MotorCortex.HTMLClip {
         const offset = triSize * scale;
         const circSize = this.textSize * 0.05 * Math.random();
 
-        const polyAnimationOp = new Anime.Anime(
+        const polyAnimationOp = new CSSEffect(
           {
             animatedAttrs: {
               opacity: 1,
@@ -196,7 +194,7 @@ export default class SvgExplosion extends MotorCortex.HTMLClip {
           }
         );
 
-        const circAnimation = new Anime.Anime(
+        const circAnimation = new CSSEffect(
           {
             animatedAttrs: {
               transform: {
@@ -223,7 +221,7 @@ export default class SvgExplosion extends MotorCortex.HTMLClip {
           }
         );
 
-        const polyAnimation = new Anime.Anime(
+        const polyAnimation = new CSSEffect(
           {
             animatedAttrs: {
               transform: {
@@ -255,7 +253,7 @@ export default class SvgExplosion extends MotorCortex.HTMLClip {
       }
       polyPosition += this.textSize / 2;
 
-      const textAnimation2 = new Anime.Anime(
+      const textAnimation2 = new CSSEffect(
         {
           animatedAttrs: {
             transform: {

diff --git a/src/SvgLines.js b/src/SvgLines.js
@@ -1,10 +1,7 @@
-import MotorCortex from "@donkeyclip/motorcortex";
-import AnimeDefinition from "@donkeyclip/motorcortex-anime";
-
-const Anime = MotorCortex.loadPlugin(AnimeDefinition);
+import {CSSEffect,HTMLClip} from "@donkeyclip/motorcortex";
 import { fontFamilyHelper } from "./helpers";
 
-export default class SvgLines extends MotorCortex.HTMLClip {
+export default class SvgLines extends HTMLClip {
   get fonts() {
     const font = [
       {
@@ -91,7 +88,7 @@ export default class SvgLines extends MotorCortex.HTMLClip {
   }
 
   buildTree() {
-    const svgline = new Anime.Anime(
+    const svgline = new CSSEffect(
       {
         animatedAttrs: {
           strokeDashoffset: "35%",