sparkbox · aspencer116 · Jun 4, 2018 · Jun 1, 2018
diff --git a/examples/lottie/data.json b/examples/lottie/data.json
@@ -0,0 +1,117 @@
+{
+  "v": "5.1.16",
+  "fr": 60,
+  "ip": 0,
+  "op": 69,
+  "w": 50,
+  "h": 210,
+  "nm": "bouncyBall_v1",
+  "ddd": 0,
+  "assets": [],
+  "layers": [
+    {
+      "ddd": 0,
+      "ind": 1,
+      "ty": 4,
+      "nm": "Shape Layer 1",
+      "sr": 1,
+      "ks": {
+        "o": { "a": 0, "k": 100, "ix": 11 },
+        "r": { "a": 0, "k": 0, "ix": 10 },
+        "p": {
+          "a": 1,
+          "k": [
+            {
+              "i": { "x": 0.667, "y": 0.199 },
+              "o": { "x": 0.349, "y": 0 },
+              "n": "0p667_0p199_0p349_0",
+              "t": 0,
+              "s": [27, 82.375, 0],
+              "e": [27, 242, 0],
+              "to": [0, 26.6041660308838, 0],
+              "ti": [0, 0, 0]
+            },
+            {
+              "i": { "x": 0.667, "y": 1 },
+              "o": { "x": 0.333, "y": 0.911 },
+              "n": "0p667_1_0p333_0p911",
+              "t": 35.092,
+              "s": [27, 242, 0],
+              "e": [27, 82.375, 0],
+              "to": [0, 0, 0],
+              "ti": [0, 26.6041660308838, 0]
+            },
+            { "t": 75 }
+          ],
+          "ix": 2
+        },
+        "a": { "a": 0, "k": [0, 0, 0], "ix": 1 },
+        "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }
+      },
+      "ao": 0,
+      "shapes": [
+        {
+          "ty": "gr",
+          "it": [
+            {
+              "d": 1,
+              "ty": "el",
+              "s": { "a": 0, "k": [50, 50], "ix": 2 },
+              "p": { "a": 0, "k": [0, 0], "ix": 3 },
+              "nm": "Ellipse Path 1",
+              "mn": "ADBE Vector Shape - Ellipse",
+              "hd": false
+            },
+            {
+              "ty": "st",
+              "c": { "a": 0, "k": [1, 1, 1, 1], "ix": 3 },
+              "o": { "a": 0, "k": 100, "ix": 4 },
+              "w": { "a": 0, "k": 0, "ix": 5 },
+              "lc": 1,
+              "lj": 1,
+              "ml": 4,
+              "nm": "Stroke 1",
+              "mn": "ADBE Vector Graphic - Stroke",
+              "hd": false
+            },
+            {
+              "ty": "fl",
+              "c": {
+                "a": 0,
+                "k": [0, 0.890196078431, 0.780392156863, 1],
+                "ix": 4
+              },
+              "o": { "a": 0, "k": 100, "ix": 5 },
+              "r": 1,
+              "nm": "Fill 1",
+              "mn": "ADBE Vector Graphic - Fill",
+              "hd": false
+            },
+            {
+              "ty": "tr",
+              "p": { "a": 0, "k": [-1.854, -57.354], "ix": 2 },
+              "a": { "a": 0, "k": [0, 0], "ix": 1 },
+              "s": { "a": 0, "k": [100, 100], "ix": 3 },
+              "r": { "a": 0, "k": 0, "ix": 6 },
+              "o": { "a": 0, "k": 100, "ix": 7 },
+              "sk": { "a": 0, "k": 0, "ix": 4 },
+              "sa": { "a": 0, "k": 0, "ix": 5 },
+              "nm": "Transform"
+            }
+          ],
+          "nm": "Ellipse 1",
+          "np": 3,
+          "cix": 2,
+          "ix": 1,
+          "mn": "ADBE Vector Group",
+          "hd": false
+        }
+      ],
+      "ip": 0,
+      "op": 69,
+      "st": 0,
+      "bm": 0
+    }
+  ],
+  "markers": []
+}
diff --git a/examples/lottie/index.html b/examples/lottie/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Bouncy Ball - Comparing Web Animation Techniques - Lottie / Bodymovin</title>
+  <link rel="stylesheet" href="../shared-styles.css">
+</head>
+<body>
+  <ball></ball>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/4.13.0/bodymovin_light.min.js"></script>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/examples/lottie/readme.md b/examples/lottie/readme.md
@@ -0,0 +1,16 @@
+# Lottie / Bodymovin
+
+Lottie is suite of libraries that allows you to render After Effects animations across various web and mobile platforms. These animations can be designed in [Adobe After Effects](https://www.adobe.com/products/aftereffects.html), exported as JSON files (using an After Effects extension called [Bodymovin](https://www.adobeexchange.com/creativecloud.details.12557.html)), and rendered with Lottie, which has libraries available for Android, iOS, web, and React Native.
+
+## Project Links
+- [Documentation Site](https://airbnb.design/lottie/)
+- [Lottie iOS](https://github.com/airbnb/lottie-ios)
+- [Lottie Android](https://github.com/airbnb/lottie-android)
+- [Lottie React Native](https://github.com/airbnb/lottie-react-native)
+- [Lottie Web](https://github.com/airbnb/lottie-web)
+- [Bodymovin Plugin](https://www.adobeexchange.com/creativecloud.details.12557.html)
+
+## Resources
+- [Introducing Lottie (article)](https://airbnb.design/introducing-lottie/)
+- [Codepen Examples using Lottie / Bodymovin](https://codepen.io/collection/nVYWZR/)
+- [Lottie / Bodymovin Github Documentation Wiki](https://github.com/airbnb/lottie-web/wiki)
diff --git a/examples/lottie/script.js b/examples/lottie/script.js
@@ -0,0 +1,9 @@
+// You can see the data that was exported from After Effects at
+// https://sparkbox.github.io/bouncy-ball/examples/lottie/data.json
+bodymovin.loadAnimation({
+  container: document.querySelector('ball'),
+  renderer: 'svg',
+  loop: true,
+  autoplay: true,
+  path: 'data.json'
+});
diff --git a/index.html b/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <title>Bouncy Ball - Compare Web Animation Techniques</title>
@@ -8,19 +9,24 @@
   <link rel="shortcut icon" href="site/favicon.ico" type="image/x-icon">
   <link rel="icon" href="site/favicon.ico" type="image/x-icon">
   <meta property="og:title" content="Bouncy Ball - Compare Web Animation Techniques" />
-  <meta property="og:description" content="Bouncy Ball compares web animation techniques by recreating a simple animation (a bouncing ball) with each one. It's kind of like TodoMVC, but for web animation." />
+  <meta property="og:description" content="Bouncy Ball compares web animation techniques by recreating a simple animation (a bouncing ball) with each one. It's kind of like TodoMVC, but for web animation."
+  />
   <meta property="og:type" content="website" />
   <meta property="og:url" content="https://sparkbox.github.io/bouncy-ball" />
   <meta property="og:image" content="https://sparkbox.github.io/bouncy-ball/site/assets/images/graphic.png" />
 
   <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400|Source+Code+Pro|Ubuntu:500" rel="stylesheet">
   <link rel="stylesheet" href="site/assets/styles.css">
 </head>
+
 <body>
   <header class="header">
     <h1 class="title">Bouncy Ball</h1>
     <p class="description">Comparing web animation techniques by showing how to bounce a ball with each one.</p>
-    <a href="https://github.com/sparkbox/bouncy-ball"><img class="ribbon" style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
+    <a href="https://github.com/sparkbox/bouncy-ball">
+      <img class="ribbon" style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67"
+        alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png">
+    </a>
   </header>
   <form class="selection-bar">
     <input type="radio" id="vanilla-js" name="approaches" checked="true" />
@@ -61,25 +67,32 @@ <h1 class="title">Bouncy Ball</h1>
     <label for="flash" class="label label-flash">Flash</label>
     <input type="radio" id="popmotion" name="approaches" />
     <label for="popmotion" class="label label-popmotion">Popmotion</label>
+    <input type="radio" id="lottie" name="approaches" />
+    <label for="lottie" class="label label-lottie">Lottie</label>
   </form>
   <div class="panes">
     <div class="docs-toggle">
-      <button class="docs-toggle-link button-link" id="toggle">about <span class="demo-name">Vanilla JS</span></button>
+      <button class="docs-toggle-link button-link" id="toggle">about
+        <span class="demo-name">Vanilla JS</span>
+      </button>
     </div>
     <div class="pane docs-pane">
       <div class="docs-pane-content"></div>
     </div>
     <div class="pane preview-pane">
-      <p class="unsupported" style="display: none">This technique is not supported in your browser. <a href="#" id="learn" class="unsupported-details">Learn more</a>.</p>
+      <p class="unsupported" style="display: none">This technique is not supported in your browser.
+        <a href="#" id="learn" class="unsupported-details">Learn more</a>.</p>
       <iframe class="demo-frame" src="examples/vanilla-js/index.html" name="bouncy ball demo" frameborder="1" scrolling="no"></iframe>
     </div>
     <div class="pane source-pane">
       <pre><code class="language-javascript"></code></pre>
     </div>
   </div>
   <div class="credit">
-    <span>Made by your friends at <a class="credit-link" href="https://twitter.com/hearsparkbox">@hearsparkbox</a>.</span>
+    <span>Made by your friends at
+      <a class="credit-link" href="https://twitter.com/hearsparkbox">@hearsparkbox</a>.</span>
   </div>
   <script src="site/assets/bundle.js"></script>
 </body>
+
 </html>
diff --git a/site/assets/styles.css b/site/assets/styles.css
@@ -301,6 +301,9 @@ iframe[scrolling='no'] {
 .selection-bar input[type="radio"]:checked + .label-popmotion {
 	color: #FF1C68;
 }
+.selection-bar input[type="radio"]:checked + .label-lottie {
+	color: #00E3C7;
+}
 .demo-frame {
   width: 66px; /* 50px ball + 8px margin left/right */
   height: 226px; /* 160px range + 50px ball + 8px margin top/bottom */

diff --git a/site/css/styles.css b/site/css/styles.css
@@ -166,6 +166,7 @@ iframe[scrolling='no'] {
       & + .label-webgl         { color: #AAAAAA; }
       & + .label-flash         { color: #FF00FF; }
       & + .label-popmotion     { color: #FF1C68; }
+      & + .label-lottie        { color: #00E3C7; }
       /* stylelint-enable */
     }
   }