fix last buble

donkeyclip · Mar 23, 2023 · 75311ae · 75311ae
1 parent 2c68b61
commit 75311ae
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 8 deletions.
diff --git a/clip/clip.css b/clip/clip.css
@@ -161,6 +161,10 @@
   overflow: hidden;
 }
 
+.text-bg-last-child{
+  top: -360px;
+  left: -893px
+}
 
 .tr-center{
   left: 50%;

diff --git a/clip/clip.html b/clip/clip.html
diff --git a/clip/clip.ts b/clip/clip.ts
@@ -12,6 +12,7 @@ setCSSCore(AnimePluginDefinition.CSSEffect);
 
 import initParams from "./initParams";
 import initParamsValidationRules from "./initParamsValidationRules";
+import { Top } from "./effects/Top";
 
 const clip = new HTMLClip({
   html,
@@ -62,7 +63,45 @@ clip.addIncident(
   ),
   0
 );
-
+clip.addIncident(
+  Top(
+    ".text-bg-last",
+    600,
+    "-640px",
+    "@expression(ceil(initParams.products.length * 4240))"
+  ),
+  0
+);
+clip.addIncident(
+  Left(
+    ".text-bg-last",
+    600,
+    "-106px",
+    "@expression(ceil(initParams.products.length * 4240))"
+  ),
+  0
+);
+clip.addIncident(
+  Top(
+    ".text-bg-last-child",
+    600,
+    "640px",
+    "@expression(ceil(initParams.products.length * 4240))"
+  ),
+  0
+);
+clip.addIncident(
+  Left(
+    ".text-bg-last-child",
+    600,
+    "106px",
+    "@expression(ceil(initParams.products.length * 4240))"
+  ),
+  0
+);
+//.text-bg-last-child
+// top: "640px",
+// left: "107px",
 clip.addIncident(
   Opacity(
     ".text-bg-last",

diff --git a/clip/effects/Combo.ts b/clip/effects/Combo.ts
@@ -28,7 +28,7 @@ export const comboinc = (selector) =>
               width: "2000px",
               height: "2000px",
               top: "-640px",
-              left: "-106px",
+              left: "-107px",
             },
             initialValues: {
               width: "0px",
@@ -53,7 +53,7 @@ export const comboinc = (selector) =>
             },
             initialValues: {
               top: "-360px",
-              left: "-893px",
+              left: "-894px",
             },
           },
           props: {

diff --git a/clip/effects/Top.ts b/clip/effects/Top.ts
@@ -0,0 +1,17 @@
+/*This incident is export as function so you can use it more than one times*/
+
+import { CSSEffect } from "@donkeyclip/motorcortex";
+export const Top = (selector, duration, value, delay, easing = "linear") =>
+  new CSSEffect(
+    {
+      animatedAttrs: {
+        top: value,
+      },
+    },
+    {
+      selector,
+      duration,
+      easing,
+      delay,
+    }
+  );