Merge pull request #50 from donkeyclip/square-bg2

create clip

clips/square-offers-bg1-banner/clip/clip.css

@@ -84,9 +84,9 @@ top: -100%;
 
 .pr-name-wrapper{
   height: 20px;
-  /* overflow: hidden; */
   position: relative;
   left: 7px;
+  color: var(--fontColor);
 }
 
 .pr-name{

clips/square-offers-bg2-banner/.eslintrc

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": ["custom"]
+}

clips/square-offers-bg2-banner/README.md

@@ -0,0 +1,33 @@
+# motorcortex-clip-starter
+
+## Purpose
+
+This repository is a starter boilerplate for creating MotorCortex Clips with DCode. Do not use this repo directly. Instead, use it from the **[Donkeyclip CLI](https://github.com/donkeyclip/cli)**
+
+## Structure and Contents
+
+It includes:
+
+- a pre-configured webpack so you don't have to care about setting up your project
+- pre-configured eslint and babel
+- a "clip" folder in order for you to use to define your Clip and Incidents. The folder
+  contains the `clip.js` file which is just a starting point for your Clip.
+- a "server" folder that is there just for the needs of viewing, debugging and creating
+  your Clip through DCode.
+
+## How to use
+
+Once you've created your new Clip you have the ability to publish it through the [donkeyclip](https://donkeyclip.com) page. You can then embed your clip in any site you want!.
+
+## Commands
+
+- `npm run build`: builds the demo
+- `npm start`: builds and starts the demo
+
+## Have fun
+
+## License
+
+[MIT License](https://opensource.org/licenses/MIT)
+
+[<img src="https://presskit.donkeyclip.com/logos/donkey%20clip%20logo.svg" width=250></img>](https://donkeyclip.com)

clips/square-offers-bg2-banner/clip/clip.css

@@ -0,0 +1,127 @@
+* {
+  --fontColor: {{ initParams.fontColor }};
+  --primaryColor: {{ initParams.primaryColor }};
+  --backgroundColor: {{ initParams.backgroundColor }};
+  /*
+    This is an example of how to use MotorCortex's init params in css, using a css variable
+      if you are unfamiliar with css variables here is a quick guide https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#basic_usage
+  */
+}
+
+.container {
+display: flex;
+justify-content: space-around;
+flex-direction: column;
+align-items: flex-start;
+height: 100%;
+background-color:var(--backgroundColor);
+font-family: 'Krona One', sans-serif;
+}
+
+.cta{
+
+  color: var(--fontColor);
+  padding: 6px 9px;
+  font-size: 16px;
+  line-height: 86%;
+  top: 224px;
+  left: 7px;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.offer-bg-wrapper{
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  height: fit-content;
+  gap: 7px;
+  -webkit-text-stroke: 0.5px var(--fontColor);
+  color: transparent;
+  text-transform: uppercase;
+  overflow: hidden;
+}
+
+.offer-bg{
+  white-space: nowrap;
+}
+
+.offer-bg1{
+position: relative;
+top: -100%;
+}
+
+.offer-bg2{
+  position: relative;
+  top: 100%;
+}
+
+.offer{
+  line-height: 17px;
+}
+
+.offer-bg2{
+  -webkit-text-stroke: 0.5px var(--primaryColor);
+}
+
+.image{
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+
+  width: 225px;
+  height: 149px;
+
+}
+
+.pr-image{
+  left: 50%;
+  transform: translateX(-50%);
+  top: 8%;
+  position: absolute;
+}
+
+.pr-name-wrapper{
+  height: 20px;
+  position: relative;
+  left: 7px;
+  color: var(--primaryColor);
+}
+
+.pr-name{
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+}
+
+.letter{
+  opacity: 0;
+}
+
+.bottom-line{
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-end;
+  position: relative;
+  width: 100%;
+
+}
+
+.description-wrapper{
+  position: relative;
+  width: 60%;
+  height: 60px;
+  overflow: hidden;
+}
+
+.pr-description{
+  position: absolute;
+  font-size: 11px;
+  line-height: 97%; 
+  top: 0;
+  padding: 0px 9px;
+}

clips/square-offers-bg2-banner/clip/clip.html

@@ -0,0 +1,52 @@
+<div class="container">
+  <div class="offer-bg-wrapper">
+    <div class="offer-bg offer-bg1">
+      <div class="offer">{{initParams.text}}</div>
+      <div class="offer">{{initParams.text}}</div>
+      <div class="offer">{{initParams.text}}</div>
+      <div class="offer">{{initParams.text}}</div>
+      <div class="offer">{{initParams.text}}</div>
+      <div class="offer">{{initParams.text}}</div>
+      <div class="offer">{{initParams.text}}</div>
+      <div class="offer">{{initParams.text}}</div>
+      <div class="offer">{{initParams.text}}</div>
+      <div class="offer">{{initParams.text}}</div>
+      <div class="offer">{{initParams.text}}</div>
+    </div>
+    <div class="offer-bg offer-bg2">
+      <div class="offer">{{initParams.offer[0]}}</div>
+      <div class="offer">{{initParams.offer[0]}}</div>
+      <div class="offer">{{initParams.offer[0]}}</div>
+      <div class="offer">{{initParams.offer[0]}}</div>
+      <div class="offer">{{initParams.offer[0]}}</div>
+      <div class="offer">{{initParams.offer[0]}}</div>
+      <div class="offer">{{initParams.offer[0]}}</div>
+      <div class="offer">{{initParams.offer[0]}}</div>
+      <div class="offer">{{initParams.offer[0]}}</div>
+      <div class="offer">{{initParams.offer[0]}}</div>
+      <div class="offer">{{initParams.offer[0]}}</div>
+    </div>
+  </div>
+  <div class="pr-name-wrapper">
+    <div class="pr-name" mc-for="key,item" mc-of="initParams.products">
+      <div class="letter" mc-for="key,letter" mc-of="item.name">
+        {{letter}}
+        <div mc-if="letter ===' '">&nbsp;</div>
+      </div>
+    </div>
+  </div>
+
+  <div class="pr-image" mc-for="key,item" mc-of="initParams.products">
+    <div class="image" style="background-image: url({{item.image}});"></div>
+  </div>
+
+  <div class="bottom-line">
+    <div class="description-wrapper">
+      <div class="pr-description" mc-for="key,item" mc-of="initParams.products">
+        {{item.description}}
+      </div>
+    </div>
+
+    <div class="cta">{{initParams.cta}}</div>
+  </div>
+</div>

clips/square-offers-bg2-banner/clip/clip.ts

@@ -0,0 +1,66 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import { letterOpacity, top } from "@donkeyclip/effects";
+import { HTMLClip } from "@donkeyclip/motorcortex";
+import { renderDonkeyclip } from "@donkeyclip/server";
+import pkg from "../package.json";
+import css from "./clip.css";
+import html from "./clip.html";
+import initParams from "./initParams";
+import { comboImage } from "./effects/comboImage";
+import { comboDescription } from "./effects/comboDescription";
+
+const host = document.getElementById("clip");
+
+if (!host)
+  throw new Error(
+    "No element with id 'clip' found, so can't show the clip! Please check your html",
+  );
+
+const clip = new HTMLClip({
+  html,
+  css,
+  host,
+  initParams: initParams[0].value,
+  containerParams: {
+    width: "300px",
+    height: "300px",
+  },
+  fonts: [
+    {
+      type: "google-font",
+      src: "https://fonts.googleapis.com/css2?family=Krona+One&display=swap",
+    },
+  ],
+  audio: "off",
+});
+
+clip.addIncident(
+  top({
+    value: "0%",
+    initValue: "-100%",
+    selector: ".offer-bg1",
+    duration: 800,
+    delay: 0,
+    easing: "easeOutQuart",
+  }),
+  0,
+);
+clip.addIncident(
+  top({
+    value: "0%",
+    initValue: "100%",
+    selector: ".offer-bg2",
+    duration: 800,
+    delay: 0,
+    easing: "easeOutQuart",
+  }),
+  0,
+);
+
+clip.addIncident(
+  letterOpacity(".pr-name", ".letter", 1, 0, 3000, 1700, 400),
+  500,
+);
+clip.addIncident(comboImage(".pr-image"), 500);
+clip.addIncident(comboDescription(".pr-description"), 500);
+export default renderDonkeyclip({ clipId: pkg.id, initParams, clip });

clips/square-offers-bg2-banner/clip/effects/comboDescription.ts

@@ -0,0 +1,44 @@
+import { CSSEffect, Combo } from "@donkeyclip/motorcortex";
+export const comboDescription = (selector: string) =>
+  new Combo(
+    {
+      incidents: [
+        {
+          incidentClass: CSSEffect,
+          attrs: {
+            animatedAttrs: {
+              top: "0%",
+            },
+            initialValues: {
+              top: "100%",
+            },
+          },
+          props: {
+            duration: 400,
+            easing: "easeOutCubic",
+          },
+          position: 0,
+        },
+        {
+          incidentClass: CSSEffect,
+          attrs: {
+            animatedAttrs: {
+              top: "100%",
+            },
+            initialValues: {
+              top: "0%",
+            },
+          },
+          props: {
+            duration: 400,
+            easing: "easeInCubic",
+          },
+          position: 2500,
+        },
+      ],
+    },
+    {
+      selector,
+      delay: "@expression(index *3000)",
+    },
+  );

clips/square-offers-bg2-banner/clip/effects/comboImage.ts

@@ -0,0 +1,44 @@
+import { CSSEffect, Combo } from "@donkeyclip/motorcortex";
+export const comboImage = (selector: string) =>
+  new Combo(
+    {
+      incidents: [
+        {
+          incidentClass: CSSEffect,
+          attrs: {
+            animatedAttrs: {
+              top: "8%",
+            },
+            initialValues: {
+              top: "-100%",
+            },
+          },
+          props: {
+            duration: 400,
+            easing: "easeOutCubic",
+          },
+          position: 0,
+        },
+        {
+          incidentClass: CSSEffect,
+          attrs: {
+            animatedAttrs: {
+              top: "-100%",
+            },
+            initialValues: {
+              top: "8%",
+            },
+          },
+          props: {
+            duration: 400,
+            easing: "easeInCubic",
+          },
+          position: 2600,
+        },
+      ],
+    },
+    {
+      selector,
+      delay: "@expression(index *3000)",
+    },
+  );