@social-mail/social-mail-client 1.8.76 → 1.8.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social-mail/social-mail-client",
-  "version": "1.8.76",
+  "version": "1.8.78",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/site-editor/editor/CssParser.ts

@@ -5,6 +5,32 @@ import { AtomBinder } from "@web-atoms/core/dist/core/AtomBinder";
 import { UMD } from "@web-atoms/core/dist/core/types";
 import { editorSuggestions } from "../suggestions/editorSuggestions";
 
+const timelineAttributes = [
+    'styler-on-scroll',
+    'styler-on-scroll-effect-1',
+    'styler-on-scroll-effect-2',
+    'styler-on-scroll-above',
+    'styler-on-scroll-above-effect-1',
+    'styler-on-scroll-above-effect-2',
+    'styler-on-scroll-top-half',
+    'styler-on-scroll-top-half-effect-1',
+    'styler-on-scroll-top-half-effect-2',
+];
+
+const keyFrameAttributes = [
+    'styler-on-enter',
+    'styler-on-enter-effect-1',
+    'styler-on-enter-effect-2',
+    'styler-on-hover',
+    'styler-on-hover-effect-1',
+    'styler-on-hover-effect-2',
+    'styler-on-leave',
+    'styler-on-leave-effect-1',
+    'styler-on-leave-effect-2',
+    ... timelineAttributes
+];
+
+
 export default class CssParser {
 
     static async parse(editor: HtmlPageEditor) {
@@ -52,7 +78,18 @@ export default class CssParser {
             const cssRules = css.cssRules;
             // eslint-disable-next-line @typescript-eslint/prefer-for-of
             for (let i = 0; i < cssRules.length;i++) {
-                const rule = cssRules[i] as CSSStyleRule;
+                const r1 = cssRules[i] as CSSRule;
+                const kr = (r1 as CSSKeyframesRule).name;
+
+                if (kr) {
+                    for (const a of keyFrameAttributes) {
+                        this.parseRule(suggestions, a, kr);
+                    }
+                    continue;
+                }
+
+                const rule = r1 as CSSStyleRule;
+
                 const match = /\[(styler\-[^=\]]+)=([^\]]+)\]/g.exec(rule.selectorText);
                 if (!match) {
                     continue;

package/src/site-editor/suggestions/properties/animations/animations.ts

@@ -1,39 +1,45 @@
 import pair, { jsonPair } from "../../pair";
 import { blurIns } from "./key-frames/blur/blur-in";
 import { blurOuts } from "./key-frames/blur/blur-out";
-import { bounces } from "./key-frames/bounce/bounce-in";
+import { bounceIns } from "./key-frames/bounce/bounce-in";
+import { bounceOuts } from "./key-frames/bounce/bounce-out";
 import { IAnimation } from "./key-frames/css";
-import { cssTranslate } from "./key-frames/cssTranslate";
-import { fadeIn } from "./key-frames/fade/fade-in";
-import { fadeOut } from "./key-frames/fade/fade-out";
-import { rotateIn } from "./key-frames/rotate/rotate-in";
-import { rotateOut } from "./key-frames/rotate/rotate-out";
-import { scaleIn } from "./key-frames/scale/scale-in";
-import { scaleOut } from "./key-frames/scale/scale-out";
-import { zoomIn } from "./key-frames/zoom/zoom-in";
-import { zoomOut } from "./key-frames/zoom/zoom-out";
-
-const jsonKeyframe = (x: IAnimation) => jsonPair(x.title, x);
-
-const animations = [
-    jsonPair("fade-in", fadeIn),
-    jsonPair("fade-out", fadeOut),
-
-    ... blurIns.map(jsonKeyframe),
-    ... blurOuts.map(jsonKeyframe),
-
-    jsonPair("zoom-in", zoomIn),
-    jsonPair("zoom-out", zoomOut),
-    jsonPair("scale-in", scaleIn),
-    jsonPair("scale-out", scaleOut),
-    jsonPair("rotate-in", rotateIn),
-    jsonPair("rotate-out", rotateOut),
-
-    ... cssTranslate({ title: "slide", keyframes: [{}, {}] }).map((x) => jsonPair(x.title, x)),
-    ... bounces.map((x) => jsonPair(x.title, x))
-
+import { fadeIns } from "./key-frames/fade/fade-in";
+import { fadeOuts } from "./key-frames/fade/fade-out";
+import { rotateIns } from "./key-frames/rotate/rotate-in";
+import { rotateOuts } from "./key-frames/rotate/rotate-out";
+import { scaleIns } from "./key-frames/scale/scale-in";
+import { scaleOuts } from "./key-frames/scale/scale-out";
+import { slideIns } from "./key-frames/slide/slide-in";
+import { slideOuts } from "./key-frames/slide/slide-out";
+import { zoomIns } from "./key-frames/zoom/zoom-in";
+import { zoomOuts } from "./key-frames/zoom/zoom-out";
+
+export const generatedAnimations = [
+    ... blurIns,
+    ... blurOuts,
+
+    ... bounceIns,
+    ... bounceOuts,
+
+    ... fadeIns,
+    ... fadeOuts,
+
+    ... rotateIns,
+    ... rotateOuts,
+
+    ... scaleIns,
+    ... scaleOuts,
+
+    ... zoomIns,
+    ... zoomOuts,
+
+    ... slideIns,
+    ... slideOuts
 ];
 
+const animations = generatedAnimations.map((x) => pair(x.title, x.title));
+
 export const animationSuggestions = {
     "styler-on-enter": animations,
     "styler-on-enter-effect-1": animations,

package/src/site-editor/suggestions/properties/animations/key-frames/blur/blur-in.ts

@@ -2,15 +2,16 @@ import { CSSBuilder } from "../css";
 
 const { animation, keyFrame, backdropFilter, blur, opacity, transform, translate3d, px, move } = CSSBuilder;
 
-export const blurIns = move("blur-in", (title, x, y, z) => animation(title,
-    keyFrame(0,
-        opacity(0),
-        transform(translate3d(x, y, z)),
-        backdropFilter(blur(px(10)))
-    ),
-    keyFrame(100,
-        opacity(1),
-        transform(),
-        backdropFilter(blur(px(0)))
-    )
-));
+export const blurIns = move("blur-in", "from", (title, d,  x, y, z) => animation(title,
+        keyFrame(0,
+            opacity(0),
+            d && translate3d(x, y, z),
+            backdropFilter(blur(px(10)))
+        ),
+        keyFrame(100,
+            opacity(1),
+            d && translate3d(),
+            backdropFilter(blur(px(0)))
+        )
+    ))
+;

package/src/site-editor/suggestions/properties/animations/key-frames/blur/blur-out.ts

@@ -2,15 +2,16 @@ import { CSSBuilder } from "../css";
 
 const { animation, keyFrame, backdropFilter, blur, opacity, transform, translate3d, px, move } = CSSBuilder;
 
-export const blurOuts = move("blur-out", (title, x, y, z) => animation(title,
-    keyFrame(0,
-        opacity(1),
-        transform(translate3d(x, y, z)),
-        backdropFilter(blur(px(0)))
-    ),
-    keyFrame(100,
-        opacity(0),
-        transform(),
-        backdropFilter(blur(px(10)))
-    )
-));
+export const blurOuts = move("blur-out", "to", (title, d,  x, y, z) => animation(title,
+        keyFrame(0,
+            opacity(1),
+            d && translate3d(),
+            backdropFilter(blur(px(10)))
+        ),
+        keyFrame(100,
+            opacity(0),
+            d && translate3d(x, y, z),
+            backdropFilter(blur(px(0)))
+        )
+    ))
+;

package/src/site-editor/suggestions/properties/animations/key-frames/bounce/bounce-in.ts

@@ -1,8 +1,12 @@
 import { CSSBuilder } from "../css";
 
-const { animation, keyFrame, transitionTimingFunction, opacity, transform, translate3d, perc, vh, vw, px } = CSSBuilder;
+const { move, animation, keyFrame, transitionTimingFunction, opacity, translate3d, perc, vh, vw, px } = CSSBuilder;
 
-const bounce = (title: string, x = 0 as string | number, y = 0 as string | number, z = 0 as string | number) => {
+const bounce = (title: string, direction?: string, x = 0 as string | number, y = 0 as string | number, z = 0 as string | number) => {
+
+    if (!direction) {
+        return void 0;
+    }
 
     const mx = (typeof x === "string" ? parseInt(x, 10) : x) > 0 ? 1 : -1;
     const my = (typeof y === "string" ? parseInt(y, 10) : y) > 0 ? 1 : -1;
@@ -20,42 +24,22 @@ const bounce = (title: string, x = 0 as string | number, y = 0 as string | numbe
             ),
             keyFrame(0,
                 opacity(0),
-                transform(translate3d(x, y, z))
+                translate3d(x, y, z)
             ),
             keyFrame(60,
                 opacity(1),
-                transform(translate3d(px(-25 * cx), px(-25 * cy), px(-25 * cz)))
+                translate3d(px(-25 * cx), px(-25 * cy), px(-25 * cz))
             ),
             keyFrame(75,
-                transform(translate3d(px(10 * cx), px(10 * cy), px(10 * cz)))
+                translate3d(px(10 * cx), px(10 * cy), px(10 * cz))
             ),
             keyFrame(90,
-                transform(translate3d(px(-5 * cx), px(-5 * cy), px(-5 * cz)))
+                translate3d(px(-5 * cx), px(-5 * cy), px(-5 * cz))
             ),
             keyFrame(100,
-                transform()
+                translate3d()
             )
     );
 };
 
-export const bounces = [
-    bounce("bounce-from-left", perc(-100), 0, 0),
-    bounce("bounce-from-right", perc(100), 0, 0),
-    bounce("bounce-from-top", 0, perc(-100), 0),
-    bounce("bounce-from-bottom", 0, perc(100), 0),
-
-    bounce("bounce-from-far-left", vw(-100), 0, 0),
-    bounce("bounce-from-far-right", vw(100), 0, 0),
-    bounce("bounce-from-far-top", 0, vh(-100), 0),
-    bounce("bounce-from-far-bottom", 0, vh(100), 0),
-
-    bounce("bounce-from-top-left", perc(-100), perc(-100), 0),
-    bounce("bounce-from-top-right", perc(100), perc(-100), 0),
-    bounce("bounce-from-bottom-left", perc(-100), perc(100), 0),
-    bounce("bounce-from-bottom-right", perc(100), perc(100), 0),
-
-    bounce("bounce-from-far-top-left", vw(-100), vh(-100), 0),
-    bounce("bounce-from-far-top-right", vw(100), vh(-100), 0),
-    bounce("bounce-from-far-bottom-left", vw(-100), vh(100), 0),
-    bounce("bounce-from-far-bottom-right", vw(100), vh(100), 0),
-];
+export const bounceIns = move("bounce-in", "from", bounce);

package/src/site-editor/suggestions/properties/animations/key-frames/bounce/bounce-out.ts

@@ -0,0 +1,45 @@
+import { CSSBuilder } from "../css";
+
+const { move, animation, keyFrame, transitionTimingFunction, opacity, translate3d, perc, vh, vw, px } = CSSBuilder;
+
+const bounce = (title: string, direction?: string, x = 0 as string | number, y = 0 as string | number, z = 0 as string | number) => {
+
+    if(!direction) {
+        return void 0;
+    }
+
+    const mx = (typeof x === "string" ? parseInt(x, 10) : x) > 0 ? 1 : -1;
+    const my = (typeof y === "string" ? parseInt(y, 10) : y) > 0 ? 1 : -1;
+    const mz = (typeof z === "string" ? parseInt(z, 10) : z) > 0 ? 1 : -1;
+
+    const cx = x ? mx : 0;
+    const cy = y ? my : 0;
+    const cz = z ? mz : 0;
+
+    return animation(
+        title,
+            keyFrame(
+                "0%, 100%, 60%, 75%, 90%",
+                transitionTimingFunction("cubic-bezier(0.215, .61, .355, 1)"),
+            ),
+            keyFrame(0,
+                opacity(1),
+                translate3d()
+            ),
+            keyFrame(60,
+                translate3d(px(-5 * cx), px(-5 * cy), px(-5 * cz))
+            ),
+            keyFrame(75,
+                translate3d(px(10 * cx), px(10 * cy), px(10 * cz))
+            ),
+            keyFrame(90,
+                translate3d(px(-25 * cx), px(-25 * cy), px(-25 * cz))
+            ),
+            keyFrame(100,
+                opacity(0),
+                translate3d(x, y, z)
+            ),
+    );
+};
+
+export const bounceOuts = move("bounce-out", "to", bounce);

package/src/site-editor/suggestions/properties/animations/key-frames/css.ts

@@ -9,11 +9,40 @@ const px = (n: number | string) => n === 0
     ? 0
     : (typeof n === "string" ? n : `${n}px`);
 
+const deg = (n: number | string) => typeof n === "string" ? n : `${n}deg`;
+
+
 const translate3d = (x=0 as number | string, y=0 as number | string, z=0 as number | string) => (x || y || z)
-    ? `translate3d(${px(x)}, ${px(y)}, ${px(z)})`
-    : "none";
+    ? { translate: `${px(x)} ${px(y)} ${px(z)}`, toString: () => `translate3d(${px(x)}, ${px(y)}, ${px(z)})` }
+    : { translate: "none", toString: () => "none" };
+
+const rotate = (n?) => n
+    ? { rotate: deg(n), toString: () =>`rotate(${n})`}
+    : { rotate: "none", toString: () => `rotate(0deg)` };
+
+const skew = (n?) => n
+    ? { rotate: deg(n), toString: () =>`skew(${n})`}
+    : { rotate: "none", toString: () => `skew(0deg)` };
+
+const skewX = (n?) => n
+    ? { rotate: deg(n), toString: () =>`skewX(${n})`}
+    : { rotate: "none", toString: () => `skewX(0deg)` };
+
+const skewY = (n?) => n
+    ? { rotate: deg(n), toString: () =>`skewY(${n})`}
+    : { rotate: "none", toString: () => `skewY(0deg)` };
+
+const skewZ = (n?) => n
+    ? { rotate: deg(n), toString: () =>`skewZ(${n})`}
+    : { rotate: "none", toString: () => `skewZ(0deg)` };
+
+const scale = (... x: any[]) => x.length
+    ? { scale: `${x.join(" ")}`, toString: () => `scale(${x.join(",")})` }
+    : { scale: "none", toString: () => `scale(1)` };
 
-const transform = (... n: string[]) => ({ transform: n.length ? n.join(" ") : "none"});
+
+
+const transform = (... n: any[]) => ({ transform: n.length ? n.join(" ") : "none"});
 
 const transitionTimingFunction = (n: string) => ({ ["transition-timing-function"]: n });
 
@@ -29,6 +58,8 @@ export interface IProperties {
     ["backdrop-filter"]?: string;
     opacity?: string;
     scale?: string;
+    rotate?: string;
+    translate?: string;
 }
 
 export interface IKeyframe extends IProperties {
@@ -36,13 +67,15 @@ export interface IKeyframe extends IProperties {
 }
 
 const keyFrame = (offset: number | string, ... a: IProperties[]): IKeyframe => typeof offset === "string"
-    ? { offset, ... Object.assign({}, ... a)}
+    ? { offset, ... Object.assign({}, ... a.filter((x) => x))}
     : {
         offset: offset > 1 ? `${offset}%` : `${Math.floor(offset * 100)}%`,
-        ... Object.assign({}, ... a)};
+        ... Object.assign({}, ... a.filter((x) => x))};
 
 const opacity = (n: number) => ({ opacity: `${n}` });
 
+
+
 export interface IAnimation {
     title: string,
     keyframes: IKeyframe[];
@@ -51,28 +84,33 @@ export interface IAnimation {
 const vh = (n) => `${n}vh`;
 const vw = (n) => `${n}vw`;
 
-const move = (title, fx: (t: string, x?: string | number, y?: string | number, z? : string | number) => IAnimation) => {
+const move = (title, direction, fx: (t: string, d?: string, x?: string | number, y?: string | number, z? : string | number) => IAnimation) => {
+
+    const first = [fx(title)].filter((x) => x);
+
     return [
 
-        fx(`${title}-from-left`, perc(-100)),
-        fx(`${title}-from-right`, perc(100)),
-        fx(`${title}-from-top`, 0, perc(-100)),
-        fx(`${title}-from-bottom`, perc(100)),
+        ... first,
+
+        fx(`${title}-${direction}-left`, direction, perc(-100)),
+        fx(`${title}-${direction}-right`, direction, perc(100)),
+        fx(`${title}-${direction}-top`, direction, 0, perc(-100)),
+        fx(`${title}-${direction}-bottom`, direction, perc(100)),
 
-        fx(`${title}-from-far-left`, vw(-100)),
-        fx(`${title}-from-far-right`, vw(100)),
-        fx(`${title}-from-far-top`, 0, vh(-100)),
-        fx(`${title}-from-far-bottom`, vh(100)),
+        fx(`${title}-${direction}-far-left`, direction, vw(-100)),
+        fx(`${title}-${direction}-far-right`, direction, vw(100)),
+        fx(`${title}-${direction}-far-top`, direction, 0, vh(-100)),
+        fx(`${title}-${direction}-far-bottom`, direction, vh(100)),
 
-        fx(`${title}-from-top-left`, perc(-100), perc(-100)),
-        fx(`${title}-from-top-right`, perc(100), perc(-100)),
-        fx(`${title}-from-bottom-left`, perc(-100), perc(100)),
-        fx(`${title}-from-bottom-right`, perc(100), perc(100)),
+        fx(`${title}-${direction}-top-left`, direction, perc(-100), perc(-100)),
+        fx(`${title}-${direction}-top-right`, direction, perc(100), perc(-100)),
+        fx(`${title}-${direction}-bottom-left`, direction, perc(-100), perc(100)),
+        fx(`${title}-${direction}-bottom-right`, direction, perc(100), perc(100)),
 
-        fx(`${title}-from-far-top-left`, vw(-100), vh(-100)),
-        fx(`${title}-from-far-top-right`, vw(100), vh(-100)),
-        fx(`${title}-from-far-bottom-left`, vw(-100), vh(100)),
-        fx(`${title}-from-far-bottom-right`, vw(100), vh(100)),
+        fx(`${title}-${direction}-far-top-left`, direction, vw(-100), vh(-100)),
+        fx(`${title}-${direction}-far-top-right`, direction, vw(100), vh(-100)),
+        fx(`${title}-${direction}-far-bottom-left`, direction, vw(-100), vh(100)),
+        fx(`${title}-${direction}-far-bottom-right`, direction, vw(100), vh(100)),
 
     ];
 };
@@ -89,6 +127,13 @@ export const CSSBuilder = {
     transform,
     keyFrame,
     opacity,
+    rotate,
+    scale,
+    skew,
+    skewX,
+    skewY,
+    skewZ,
+    deg,
     animation: (title: string, ... keyframes: IKeyframe[]) => ({
         title,
         keyframes

package/src/site-editor/suggestions/properties/animations/key-frames/fade/fade-in.ts

@@ -1,3 +1,7 @@
+import { CSSBuilder } from "../css";
+
+const { move, animation, keyFrame, transitionTimingFunction, opacity, transform, translate3d, perc, vh, vw, px } = CSSBuilder;
+
 export const fadeIn = {
     title: "fade-in",
     keyFrames: [
@@ -8,4 +12,17 @@ export const fadeIn = {
             opacity: 1
         }
     ]
-};
+};
+
+export const fadeIns = move("fade-in", "from", (title, direction, x, y, z) =>
+    animation(title,
+        keyFrame(0,
+            opacity(0.3),
+            direction && translate3d(x, y, z)
+        ),
+        keyFrame(100,
+            opacity(1),
+            direction && translate3d()
+        )
+    )
+);

package/src/site-editor/suggestions/properties/animations/key-frames/fade/fade-out.ts

@@ -1,11 +1,16 @@
-export const fadeOut = {
-    title: "fade-out",
-    keyFrames: [
-        {
-            opacity: 1
-        },
-        {
-            opacity: 0.3
-        },
-    ]
-};
+import { CSSBuilder } from "../css";
+
+const { move, animation, keyFrame, transitionTimingFunction, opacity, transform, translate3d, perc, vh, vw, px } = CSSBuilder;
+
+export const fadeOuts = move("fade-out", "to", (title, direction, x, y, z) =>
+    animation(title,
+        keyFrame(0,
+            opacity(1),
+            direction && translate3d()
+        ),
+        keyFrame(100,
+            opacity(0.3),
+            direction && translate3d(x, y, z)
+        )
+    )
+);

package/src/site-editor/suggestions/properties/animations/key-frames/rotate/rotate-in.ts

@@ -1,11 +1,16 @@
-export const rotateIn = {
-    title: "rotate-in",
-    keyFrames: [
-        {
-            rotate: "180deg"
-        },
-        {
-            rotate: "0deg"
-        }
-    ]
-};
+import { CSSBuilder } from "../css";
+
+const { move, animation, keyFrame, rotate, deg, opacity, transform, translate3d, perc, vh, vw, px } = CSSBuilder;
+
+export const rotateIns = move("rotate-in", "from", (title, direction, x, y, z) =>
+    animation(title,
+        keyFrame(0,
+            rotate(deg(180)),
+            direction && translate3d(x, y, z)
+        ),
+        keyFrame(100,
+            rotate(),
+            direction && translate3d(x, y, z)
+        )
+    )
+);

package/src/site-editor/suggestions/properties/animations/key-frames/rotate/rotate-out.ts

@@ -1,11 +1,16 @@
-export const rotateOut = {
-    title: "rotate-out",
-    keyFrames: [
-        {
-            rotate: "0deg"
-        },
-        {
-            rotate: "180deg"
-        }
-    ]
-};
+import { CSSBuilder } from "../css";
+
+const { move, animation, keyFrame, rotate, deg, opacity, transform, translate3d, perc, vh, vw, px } = CSSBuilder;
+
+export const rotateOuts = move("rotate-out", "to", (title, direction, x, y, z) =>
+    animation(title,
+        keyFrame(0,
+            rotate(),
+            direction && transform()
+        ),
+        keyFrame(100,
+            rotate(180),
+            direction && translate3d(x, y, z)
+        )
+    )
+);

package/src/site-editor/suggestions/properties/animations/key-frames/scale/scale-in.ts

@@ -1,11 +1,16 @@
-export const scaleIn = {
-    title: "scale-in",
-    keyFrames: [
-        {
-            scale: 2
-        },
-        {
-            scale: 1
-        }
-    ]
-};
+import { CSSBuilder } from "../css";
+
+const { move, animation, keyFrame, rotate, deg, scale, transform, translate3d, perc, vh, vw, px } = CSSBuilder;
+
+export const scaleIns = move("scale-in", "from", (title, direction, x, y, z) =>
+    animation(title,
+        keyFrame(0,
+            scale(2),
+            direction && translate3d(x, y, z)
+        ),
+        keyFrame(100,
+            scale(1),
+            direction && translate3d()
+        )
+    )
+);

package/src/site-editor/suggestions/properties/animations/key-frames/scale/scale-out.ts

@@ -1,11 +1,16 @@
-export const scaleOut = {
-    title: "scale-out",
-    keyFrames: [
-        {
-            scale: 1
-        },
-        {
-            scale: 2
-        }
-    ]
-};
+import { CSSBuilder } from "../css";
+
+const { move, animation, keyFrame, rotate, deg, scale, transform, translate3d, perc, vh, vw, px } = CSSBuilder;
+
+export const scaleOuts = move("scale-out", "to", (title, direction, x, y, z) =>
+    animation(title,
+        keyFrame(0,
+            scale(1),
+            direction && transform()
+        ),
+        keyFrame(100,
+            scale(2),
+            direction && translate3d(x, y, z)
+        ),
+    )
+);

package/src/site-editor/suggestions/properties/animations/key-frames/slide/slide-in.ts

@@ -0,0 +1,14 @@
+import { CSSBuilder } from "../css";
+
+const { move, animation, keyFrame, rotate, deg, scale, transform, translate3d, perc, vh, vw, px } = CSSBuilder;
+
+export const slideIns = move("slide-in", "from", (title, direction, x, y, z) =>
+    animation(title,
+        keyFrame(0,
+            direction && translate3d(x, y, z)
+        ),
+        keyFrame(100,
+            direction && translate3d()
+        )
+    )
+);

package/src/site-editor/suggestions/properties/animations/key-frames/slide/slide-out.ts

@@ -0,0 +1,14 @@
+import { CSSBuilder } from "../css";
+
+const { move, animation, keyFrame, rotate, deg, scale, transform, translate3d, perc, vh, vw, px } = CSSBuilder;
+
+export const slideOuts = move("slide-out", "to", (title, direction, x, y, z) =>
+    animation(title,
+        keyFrame(0,
+            direction && transform()
+        ),
+        keyFrame(100,
+            direction && translate3d(x, y, z)
+        ),
+    )
+);