+ New interactions: "freeze-click" and "morph-lock"

+ New attributes: "view-box" and "speed" + Newly observed attributes: "path", "interaction", "speed" and "view-box"
samuelOsborne · Mar 7, 2021 · 5103573 · 5103573
1 parent 0435ae9
commit 5103573
Show file tree

Hide file tree

Showing 17 changed files with 6,274 additions and 49 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,4 @@
-![alt Lottie-interactive](https://github.com/samuelOsborne/Lottie-interactive/blob/master/lottie-interactive.png?raw=true)
-
-# Lottie-interactive
+![alt Lottie-interactive](assets/lottie-interactive.png?raw=true)
 
 Lottie interactive is custom web element adding multiple types of interactivity to Lottie animations.
 
@@ -47,20 +45,32 @@ Plays animation when user clicks on animation container
 <lottie-interactive path="button.json" interaction="click"></lottie-interactive>
 ```
 
+##### freeze click
+Freezes animation when user clicks on animation container
+```HTML
+<lottie-interactive path="button.json" interaction="freeze-click" autoplay loop></lottie-interactive>
+```
+
 ##### hover
 Plays animation when user hovers on animation container
 ```HTML
 <lottie-interactive path="button.json" interaction="hover"></lottie-interactive>
 ```
 
 ##### morph
-plays animation when user hovers on animation container, plays in reverse on 'mouseexit' event
+Plays animation when user hovers on animation container, plays in reverse on 'mouseexit' event
 ```HTML
 <lottie-interactive path="button.json" interaction="morph"></lottie-interactive>
 ```
 
+##### morph-lock
+Plays animation when user hovers on animation container. Locks animation at the end if user clicks. Plays in reverse on 'mouseexit' event.
+```HTML
+<lottie-interactive path="button.json" interaction="morph-lock"></lottie-interactive>
+```
+
 ##### switch
-plays animation when user clicks on animation container, plays again in reverse on second click
+Plays animation when user clicks on animation container, plays again in reverse on second click
 ```HTML
 <lottie-interactive path="button.json" interaction="switch"></lottie-interactive>
 ```

diff --git a/assets/lottie-interactive.png b/assets/lottie-interactive.png
diff --git a/dist/lottie-interactive.js b/dist/lottie-interactive.js
diff --git a/examples/animations/running-pigeon.json b/examples/animations/running-pigeon.json
diff --git a/examples/freezeClick/freeze-click.html b/examples/freezeClick/freeze-click.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Freeze click example</title>
+  <script type="module" src="../../dist/lottie-interactive.js"></script>
+</head>
+
+<body>
+<h1>
+  Interaction: 'freeze-click'
+</h1>
+<div style="text-align: center">
+  <lottie-interactive path="../animations/running-pigeon.json"
+                      interaction="freeze-click"
+                      autoplay
+                      loop>
+  </lottie-interactive>
+</div>
+</body>
+</html>
+
+<style>
+  h1 {
+    text-align: center;
+    font-family: 'Verdana', serif;
+  }
+</style>
diff --git a/examples/index.html b/examples/index.html
@@ -16,11 +16,14 @@ <h1>Examples</h1>
 <ul>
   <li><a href="./all/all.html">All attributes</a></li>
   <li><a href="./click/click.html">Interaction: Click</a></li>
+  <li><a href="./freezeClick/freeze-click.html">Interaction: Freeze click</a></li>
   <li><a href="./hover/hover.html">Interaction: Hover</a></li>
   <li><a href="./morph/morph.html">Interaction: Morph</a></li>
+  <li><a href="./morphLock/morph-lock.html">Interaction: Morph lock</a></li>
   <li><a href="./play-on-show/play-on-show.html">Interaction: Play-on-show</a></li>
   <li><a href="./play-once/play-once.html">Interaction: Play-once</a></li>
   <li><a href="./switch/switch.html">Interaction: Switch</a></li>
+  <li><a href="./viewbox/viewbox.html">Attribute: view-box</a></li>
   <li><a href="./loop/loop.html">Attribute: Loop</a></li>
   <li><a href="./reset/reset.html">Attribute: Reset</a></li>
   <li><a href="./autoplay/autoplay.html">Attribute: Autoplay</a></li>

diff --git a/examples/morphLock/morph-lock.html b/examples/morphLock/morph-lock.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Morph lock example</title>
+  <script type="module" src="../../dist/lottie-interactive.js"></script>
+</head>
+
+<body>
+<h1>
+  Interaction: 'morph-lock'
+</h1>
+<div style="text-align: center">
+  <lottie-interactive path="../animations/sun-moon.json"
+                      interaction="morph-lock">
+  </lottie-interactive>
+</div>
+</body>
+</html>
+
+<style>
+  h1 {
+    text-align: center;
+    font-family: 'Verdana', serif;
+  }
+</style>
diff --git a/examples/speed/speed.html b/examples/speed/speed.html
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Speed example</title>
+  <script type="module" src="../../dist/lottie-interactive.js"></script>
+</head>
+
+<body>
+
+<div style="text-align: center">
+  <lottie-interactive path="../animations/running-pigeon.json"
+                      speed="0.1"
+                      autoplay
+                      loop>
+  </lottie-interactive>
+</div>
+<h1>
+  Speed: 0.1
+</h1>
+
+<div style="text-align: center">
+  <lottie-interactive path="../animations/running-pigeon.json"
+                      speed="0.5"
+                      autoplay
+                      loop>
+  </lottie-interactive>
+</div>
+<h1>
+  Speed: 0.5
+</h1>
+
+<div style="text-align: center">
+  <lottie-interactive path="../animations/running-pigeon.json"
+                      speed="1"
+                      autoplay
+                      loop>
+  </lottie-interactive>
+</div>
+<h1>
+  Speed: 1
+</h1>
+
+<div style="text-align: center">
+  <lottie-interactive path="../animations/running-pigeon.json"
+                      speed="2"
+                      autoplay
+                      loop>
+  </lottie-interactive>
+</div>
+<h1>
+  Speed: 2
+</h1>
+
+<div style="text-align: center">
+  <lottie-interactive path="../animations/running-pigeon.json"
+                      speed="3"
+                      autoplay
+                      loop>
+  </lottie-interactive>
+</div>
+
+<h1>
+  Speed: 3
+</h1>
+
+<div style="text-align: center">
+  <lottie-interactive path="../animations/running-pigeon.json"
+                      speed="4"
+                      autoplay
+                      loop>
+  </lottie-interactive>
+</div>
+<h1>
+  Speed: 4
+</h1>
+
+<div style="text-align: center">
+  <lottie-interactive path="../animations/running-pigeon.json"
+                      speed="5"
+                      autoplay
+                      loop>
+  </lottie-interactive>
+  <h1>
+    Speed: 5
+  </h1></div>
+</body>
+</html>
+
+<style>
+  h1 {
+    text-align: center;
+    font-family: 'Verdana', serif;
+  }
+</style>
diff --git a/examples/viewbox/viewbox.html b/examples/viewbox/viewbox.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Viewbox example</title>
+  <script type="module" src="../../dist/lottie-interactive.js"></script>
+</head>
+
+<body>
+
+<div style="text-align: center">
+  <lottie-interactive path="../animations/running-pigeon.json"
+                      speed="0.1"
+                      autoplay
+                      loop
+                      view-box="0 0 600 600">
+  </lottie-interactive>
+</div>
+<h1>
+  view-box: "0 0 600 600" (original)
+</h1>
+
+<div style="text-align: center">
+  <lottie-interactive path="../animations/running-pigeon.json"
+                      speed="0.1"
+                      autoplay
+                      loop
+                      view-box="0 0 300 300">
+  </lottie-interactive>
+</div>
+<h1>
+  view-box: "0 0 300 300"
+</h1>
+
+<div style="text-align: center">
+  <lottie-interactive path="../animations/running-pigeon.json"
+                      speed="0.1"
+                      autoplay
+                      loop
+                      view-box="300 300 300 300">
+  </lottie-interactive>
+</div>
+<h1>
+  view-box: "300 300 300 300"
+</h1>
+
+<div style="text-align: center">
+  <lottie-interactive path="../animations/running-pigeon.json"
+                      speed="0.1"
+                      autoplay
+                      loop
+                      view-box="0 300 300 300">
+  </lottie-interactive>
+</div>
+<h1>
+  view-box: "0 300 300 300"
+</h1>
+
+<div style="text-align: center">
+  <lottie-interactive path="../animations/running-pigeon.json"
+                      speed="0.1"
+                      autoplay
+                      loop
+                      view-box="150 150 300 300">
+  </lottie-interactive>
+</div>
+<h1>
+  view-box: "150 150 300 300"
+</h1>
+
+<div style="text-align: center">
+  <lottie-interactive path="../animations/running-pigeon.json"
+                      speed="0.1"
+                      autoplay
+                      loop
+                      view-box="-300 -300 1200 1200">
+  </lottie-interactive>
+</div>
+<h1>
+  view-box: "-300 -300 1200 1200"
+</h1>
+</body>
+</html>
+
+<style>
+  h1 {
+    text-align: center;
+    font-family: 'Verdana', serif;
+  }
+</style>
diff --git a/lottie-interactive.png b/lottie-interactive.png