first commit

.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": "defaults, not ie 11",
+        "corejs": "3.21"
+      }
+    ]
+  ]
+}

.eslintignore

@@ -0,0 +1 @@
+bundle.js

.eslintrc

@@ -0,0 +1,60 @@
+{
+  "parser": "@babel/eslint-parser",
+  "extends": [
+    "eslint:recommended",
+    "prettier"
+  ],
+  "plugins": [
+    "babel",
+    "prettier"
+  ],
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "globals": {
+    "document": false,
+    "escape": false,
+    "navigator": false,
+    "unescape": false,
+    "window": false,
+    "describe": true,
+    "before": true,
+    "it": true,
+    "expect": true,
+    "sinon": true
+  },
+  "rules": {
+    "prettier/prettier": [
+      "error"
+    ],
+    "linebreak-style": [
+      "error",
+      "unix"
+    ],
+    "semi": [
+      "error",
+      "always"
+    ],
+    "no-console": [
+      "error",
+      {
+        "allow": [
+          "warn",
+          "error",
+          "info"
+        ]
+      }
+    ],
+    "prefer-promise-reject-errors": "error",
+    "prefer-const": [
+      "error",
+      {
+        "destructuring": "any",
+        "ignoreReadBeforeAssign": false
+      }
+    ],
+    "no-var": "error",
+    "no-unused-vars": "error"
+  }
+}

.gitignore

@@ -0,0 +1,74 @@
+# Node modules
+node_modules
+
+bundle.js
+bundle.js.LICENSE.txt
+server/bundle.js
+server/bundle.js.LICENSE.txt
+
+
+# Coverage
+coverage
+
+# Output folders
+build
+compiled
+.nyc_output
+
+# Cachses
+.awcache
+.rpt2_cache
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+# VSCode
+.vscode
+
+# Cloud9
+.c9revisions
+.c9
+
+# Intelij
+.idea
+cmake-build-*/
+
+# Sublime text
+*.iws
+*.tmlanguage.cache
+*.tmPreferences.cache
+*.stTheme.cache
+*.sublime-workspace
+
+# OSX
+.DS_Store
+.AppleDouble
+.LSOverride
+._*
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+# Windows
+*.lnk
+Thumbs.db
+ehthumbs.db
+ehthumbs_vista.db
+$RECYCLE.BIN/
+[Dd]esktop.ini
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp

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)

clip/clip.css

@@ -0,0 +1,78 @@
+#root {
+  height: 100%;
+  background-color: rgb(36, 34, 34);
+  color: white;
+  font-family: Roboto,sans-serif;
+}
+.title{
+  text-align: center;
+  text-transform: uppercase;
+  font-size: 25px;
+  position: absolute;
+  top: -50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  color:#945B96;
+  font-weight: 600;
+}
+.content{
+  position: absolute;
+  left:7%;
+  top:50%;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+  font-size: 18px;
+}
+
+.note2{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+.box-container{
+  position: absolute;
+  left:55%;
+  top:30%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.box{
+  opacity: 0;
+  width: 5px;
+  height: 20px;
+  border-radius: 3px;
+  background-color: #2F4858;
+}
+
+.first-box{
+  background-color: #E95F74;
+}
+
+.last-box{
+  background-color: #945B96;
+}
+
+.note1{
+  opacity:0;
+}
+
+.note2{
+  display: flex;
+  flex-direction: column;
+}
+.note2-part{
+  opacity: 0;
+}
+
+svg{
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+

clip/clip.html

@@ -0,0 +1,45 @@
+<div id="root">
+  <div class="title">Change width of the boxes with stagger</div>
+        <div class="content content1">
+          <div class="note1">
+            width -> @stagger(<span style="color:#E95F74;font-weight: bold;">100px</span>,<span style="color:#945B96;font-weight: bold;">300px</span>)
+          </div>
+          <div class="note2">
+            <div class="note2-part">the <span style="color:#E95F74;font-weight: bold;">first</span> box incident -> 100px</div>
+            <div class="note2-part">the <span style="color:#945B96;font-weight: bold;">last</span> box incident -> 300px</div>
+            <div class="note2-part">the others <span style="color:#2F4858;font-weight: bold;">autocalculated</span></div>
+          </div>
+        </div>
+        <div class="content content2">
+          <div class="note1">
+            width -> @stagger(<span style="color:#E95F74;font-weight: bold;">100px</span>,<span style="color:#945B96;font-weight: bold;">300px</span>,0,<span style="color:#2F4858;font-weight: bold;">easeInCirc</span>)
+          </div>
+          <div class="note2">
+            <div class="note2-part">the <span style="color:#E95F74;font-weight: bold;">first</span> box incident -> 100px</div>
+            <div class="note2-part">the <span style="color:#945B96;font-weight: bold;">last</span> box incident -> 300px</div>
+            <div class="note2-part">the others <span style="color:#2F4858;font-weight: bold;">autocalculated</span></div>
+          </div>
+        </div>
+    <div class="box-container">
+        <div class="box first-box"></div>
+        <div class="box"></div>
+        <div class="box"></div>
+        <div class="box"></div>
+        <div class="box"></div>
+        <div class="box"></div>
+        <div class="box last-box"></div>
+    </div>
+
+
+    <svg id="line" width="800" height="450" xmlns="http://www.w3.org/2000/svg">
+
+      <g>
+       <title>Layer 1</title>
+       <line id="svg_20" y2="303" x2="744" y1="134" x1="541" stroke="#2F4858" fill="none" stroke-width="3"/>
+      </g>
+     </svg>
+
+<svg id="curve" xmlns="http://www.w3.org/2000/svg" width="800" height="450" style="position: absolute; left: 541px;top:133px;">
+  <path d="M 1.848 0.929 C 2.777 10.5263 3.706 20.1237 4.635 29.721 C 7.421 38.854 10.207 47.987 12.993 57.12 C 18.1013 66.4077 23.2097 75.6953 28.318 84.983 C 36.522 94.2707 44.726 103.5583 52.93 112.846 C 65.778 122.2883 78.626 131.7307 91.474 141.173 C 128.315 150.4607 165.156 159.7483 201.997 169.036" stroke="#2F4858" stroke-width="3" fill="none"/>
+</svg>
+</div>

clip/clip.js

@@ -0,0 +1,56 @@
+import { HTMLClip } from "@donkeyclip/motorcortex";
+import html from "./clip.html";
+import css from "./clip.css";
+import initParams from "./initParams";
+import initParamsValidationRules from "./initParamsValidationRules";
+import { widthMove } from "./library/widthMove";
+import { opacity } from "./library/opacity";
+import { svgCover } from "./library/svgCover";
+import { blur } from "./library/blur";
+import { topMove } from "./library/topMove";
+
+export const clip = new HTMLClip({
+  html,
+  css,
+  host: document.getElementById("clip"),
+  initParamsValidationRules,
+  initParams: initParams[0].value,
+  fonts: [
+    {
+      type: "google-font",
+      src: "https://fonts.googleapis.com/css2?family=Roboto&display=swap"
+    },
+  ],
+  containerParams: {
+    width: "800px",
+    height: "450px",
+  },
+});
+clip.addIncident(topMove("50%",".title", 1000), 500);
+clip.addIncident(topMove("150%",".title", 1000), 4000);
+clip.addIncident(opacity(1,".content1 .note1", 500), 6000);
+clip.addIncident(opacity(1,".box", 500), 8000);
+clip.addIncident(opacity(1,".content1 .note2-part", 200,"@stagger(0,5000)"), 10000);
+clip.addIncident(widthMove("100px",".first-box",1000), 10000);
+clip.addIncident(widthMove("300px",".last-box",1000), 12500);
+clip.addIncident(svgCover(1,"#line line",1500),15000);
+clip.addIncident(widthMove("@stagger(100px,300px)",".box",1000), 17500);
+clip.addIncident(svgCover(0,"#line line",1000),23000);
+clip.addIncident(widthMove("5px",".box",1000), 23000);
+clip.addIncident(blur("blur(1rem)",".content1",1000), 23000);
+clip.addIncident(opacity(0,".content1",1000), 23000);
+
+// /////the second part
+clip.addIncident(opacity(1,".content2 .note1", 500), 25000);
+clip.addIncident(opacity(1,".content2 .note2-part", 200,"@stagger(0,5000)"), 26000);
+clip.addIncident(widthMove("100px",".first-box",1000), 26000);
+clip.addIncident(widthMove("300px",".last-box",1000), 28500);
+clip.addIncident(svgCover(1,"#curve path",1500),31000);
+clip.addIncident(widthMove("@stagger(100px,300px,0,easeInCirc)",".box",1000), 33500);
+clip.addIncident(svgCover(0,"#curve path",1000),39000);
+clip.addIncident(widthMove("0px",".box",1000), 39000);
+clip.addIncident(blur("blur(1rem)",".content2",1000), 39000);
+clip.addIncident(opacity(0,".content2",1000), 39000);
+
+
+

clip/initParams.js

@@ -0,0 +1,23 @@
+export default [
+  {
+    name: "Blue medium",
+    value: {
+      color: "blue",
+      fontSize: "30px",
+    },
+  },
+  {
+    name: "Red big",
+    value: {
+      color: "red",
+      fontSize: "60px",
+    },
+  },
+  {
+    name: "Green small",
+    value: {
+      color: "red",
+      fontSize: "10px",
+    },
+  },
+];