feat(Interactions): Added possibility to mix 'on-show' with all base …

…interaction types
samuelOsborne · Jun 20, 2021 · ce701b9 · ce701b9
1 parent dc1649f
commit ce701b9
Show file tree

Hide file tree

Showing 17 changed files with 484 additions and 5 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -21,6 +21,12 @@ <h1>Examples</h1>
   <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="./multiple-interactions/show-and-click.html">Show and click</a></li>
+  <li><a href="./multiple-interactions/show-and-hover.html">Show and hover</a></li>
+  <li><a href="./multiple-interactions/show-and-freeze-click.html">Show and freeze click</a></li>
+  <li><a href="./multiple-interactions/show-and-morph.html">Show and morph</a></li>
+  <li><a href="./multiple-interactions/show-and-morph-lock.html">Show and morph-lock</a></li>
+  <li><a href="./multiple-interactions/show-and-switch.html">Show and switch</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>

diff --git a/examples/multiple-interactions/show-and-click.html b/examples/multiple-interactions/show-and-click.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Show-and-click example</title>
+  <script type="module" src="../../dist/lottie-interactive.js"></script>
+</head>
+
+<body>
+<h1>
+  Interaction: 'Show-and-click'
+</h1>
+<div class="filler">
+  <h1>Scroll down!</h1>
+</div>
+<h1>Interaction: 'show-and-click'</h1>
+<div class="animation-container">
+  <lottie-interactive path="../animations/lottie-interactive.json"
+                      interaction="show-and-click">
+  </lottie-interactive>
+</div>
+</body>
+</html>
+
+<style>
+	h1 {
+		text-align: center;
+		font-family: 'Verdana', serif;
+		margin: 0;
+		background-color: palevioletred;
+		color: white;
+	}
+
+	.filler {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		height: 100vh;
+		background-color: palevioletred;
+		color: #ffffff;
+		text-align: center;
+		font-family: "Verdana", serif;
+	}
+
+	.animation-container {
+		width: 100%;
+		height: 100%;
+		background-color: #ADFF9E;
+		text-align: center;
+	}
+</style>
diff --git a/examples/multiple-interactions/show-and-freeze-click.html b/examples/multiple-interactions/show-and-freeze-click.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Show-and-click example</title>
+  <script type="module" src="../../dist/lottie-interactive.js"></script>
+</head>
+
+<body>
+<h1>
+  Interaction: 'show-and-freeze-click'
+</h1>
+<div class="filler">
+  <h1>Scroll down!</h1>
+</div>
+<h1>Interaction: 'show-and-freeze-click'</h1>
+<div class="animation-container">
+  <lottie-interactive path="../animations/lottie-interactive.json"
+                      interaction="show-and-freeze-click">
+  </lottie-interactive>
+</div>
+</body>
+</html>
+
+<style>
+	h1 {
+		text-align: center;
+		font-family: 'Verdana', serif;
+		margin: 0;
+		background-color: palevioletred;
+		color: white;
+	}
+
+	.filler {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		height: 100vh;
+		background-color: palevioletred;
+		color: #ffffff;
+		text-align: center;
+		font-family: "Verdana", serif;
+	}
+
+	.animation-container {
+		width: 100%;
+		height: 100%;
+		background-color: #ADFF9E;
+		text-align: center;
+	}
+</style>
diff --git a/examples/multiple-interactions/show-and-hover.html b/examples/multiple-interactions/show-and-hover.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Show-and-click example</title>
+  <script type="module" src="../../dist/lottie-interactive.js"></script>
+</head>
+
+<body>
+<h1>
+  Interaction: 'show-and-hover'
+</h1>
+<div class="filler">
+  <h1>Scroll down!</h1>
+</div>
+<h1>Interaction: 'show-and-hover'</h1>
+<div class="animation-container">
+  <lottie-interactive path="../animations/lottie-interactive.json"
+                      interaction="show-and-hover">
+  </lottie-interactive>
+</div>
+</body>
+</html>
+
+<style>
+	h1 {
+		text-align: center;
+		font-family: 'Verdana', serif;
+		margin: 0;
+		background-color: palevioletred;
+		color: white;
+	}
+
+	.filler {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		height: 100vh;
+		background-color: palevioletred;
+		color: #ffffff;
+		text-align: center;
+		font-family: "Verdana", serif;
+	}
+
+	.animation-container {
+		width: 100%;
+		height: 100%;
+		background-color: #ADFF9E;
+		text-align: center;
+	}
+</style>
diff --git a/examples/multiple-interactions/show-and-morph-lock.html b/examples/multiple-interactions/show-and-morph-lock.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Show-and-click example</title>
+  <script type="module" src="../../dist/lottie-interactive.js"></script>
+</head>
+
+<body>
+<h1>
+  Interaction: 'show-and-morph-lock'
+</h1>
+<div class="filler">
+  <h1>Scroll down!</h1>
+</div>
+<h1>Interaction: 'show-and-morph-lock'</h1>
+<div class="animation-container">
+  <lottie-interactive path="../animations/sun-moon.json"
+                      interaction="show-and-morph-lock">
+  </lottie-interactive>
+</div>
+</body>
+</html>
+
+<style>
+	h1 {
+		text-align: center;
+		font-family: 'Verdana', serif;
+		margin: 0;
+		background-color: palevioletred;
+		color: white;
+	}
+
+	.filler {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		height: 100vh;
+		background-color: palevioletred;
+		color: #ffffff;
+		text-align: center;
+		font-family: "Verdana", serif;
+	}
+
+	.animation-container {
+		width: 100%;
+		height: 100%;
+		background-color: #ADFF9E;
+		text-align: center;
+	}
+</style>
diff --git a/examples/multiple-interactions/show-and-morph.html b/examples/multiple-interactions/show-and-morph.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Show-and-click example</title>
+  <script type="module" src="../../dist/lottie-interactive.js"></script>
+</head>
+
+<body>
+<h1>
+  Interaction: 'show-and-morph'
+</h1>
+<div class="filler">
+  <h1>Scroll down!</h1>
+</div>
+<h1>Interaction: 'show-and-morph'</h1>
+<div class="animation-container">
+  <lottie-interactive path="../animations/lottie-interactive.json"
+                      interaction="show-and-morph">
+  </lottie-interactive>
+</div>
+</body>
+</html>
+
+<style>
+	h1 {
+		text-align: center;
+		font-family: 'Verdana', serif;
+		margin: 0;
+		background-color: palevioletred;
+		color: white;
+	}
+
+	.filler {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		height: 100vh;
+		background-color: palevioletred;
+		color: #ffffff;
+		text-align: center;
+		font-family: "Verdana", serif;
+	}
+
+	.animation-container {
+		width: 100%;
+		height: 100%;
+		background-color: #ADFF9E;
+		text-align: center;
+	}
+</style>
diff --git a/examples/multiple-interactions/show-and-switch.html b/examples/multiple-interactions/show-and-switch.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Show-and-click example</title>
+  <script type="module" src="../../dist/lottie-interactive.js"></script>
+</head>
+
+<body>
+<h1>
+  Interaction: 'show-and-switch'
+</h1>
+<div class="filler">
+  <h1>Scroll down!</h1>
+</div>
+<h1>Interaction: 'show-and-switch'</h1>
+<div class="animation-container">
+  <lottie-interactive path="../animations/lottie-interactive.json"
+                      interaction="show-and-switch">
+  </lottie-interactive>
+</div>
+</body>
+</html>
+
+<style>
+	h1 {
+		text-align: center;
+		font-family: 'Verdana', serif;
+		margin: 0;
+		background-color: palevioletred;
+		color: white;
+	}
+
+	.filler {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		height: 100vh;
+		background-color: palevioletred;
+		color: #ffffff;
+		text-align: center;
+		font-family: "Verdana", serif;
+	}
+
+	.animation-container {
+		width: 100%;
+		height: 100%;
+		background-color: #ADFF9E;
+		text-align: center;
+	}
+</style>
diff --git a/src/index.ts b/src/index.ts
@@ -9,7 +9,13 @@ import {MorphLock} from "./interactions/morph-lock";
 import {Switch} from "./interactions/switch";
 import {PlayOnShow} from "./interactions/play-on-show";
 import {PlayOnce} from "./interactions/play-once";
-import {FreezeClick} from "./interactions/FreezeClick";
+import {FreezeClick} from "./interactions/freeze-click";
+import {ShowAndClick} from "./interactions/show-and-click";
+import {ShowAndHover} from "./interactions/show-and-hover";
+import {ShowAndMorph} from "./interactions/show-and-morph";
+import {ShowAndMorphLock} from "./interactions/show-and-morph-lock";
+import {ShowAndFreezeClick} from "./interactions/show-and-freeze-click";
+import {ShowAndSwitch} from "./interactions/show-and-switch";
 
 import {Stroke} from "./modifiers/stroke";
 import {InteractionType} from "./interactions/interaction-type";
@@ -65,7 +71,7 @@ export class LottieInteractive extends FASTElement {
         this.playOnce = newValue;
     }
     /**
-     * Path to the animation
+     * Path or URL to the animation
      * @public
      */
     @attr path: string;
@@ -304,6 +310,24 @@ export class LottieInteractive extends FASTElement {
             case InteractionType.PlayOnShow:
                 this.currentInteraction = new PlayOnShow(this.lottie, this.animationContainer, this);
                 break;
+            case InteractionType.ShowAndClick:
+                this.currentInteraction = new ShowAndClick(this.lottie, this.animationContainer, this);
+                break;
+            case InteractionType.ShowAndHover:
+                this.currentInteraction = new ShowAndHover(this.lottie, this.animationContainer, this);
+                break;
+            case InteractionType.ShowAndMorph:
+                this.currentInteraction = new ShowAndMorph(this.lottie, this.animationContainer, this);
+                break;
+            case InteractionType.ShowAndMorphLock:
+                this.currentInteraction = new ShowAndMorphLock(this.lottie, this.animationContainer, this);
+                break;
+            case InteractionType.ShowAndFreezeClick:
+                this.currentInteraction = new ShowAndFreezeClick(this.lottie, this.animationContainer, this);
+                break;
+            case InteractionType.ShowAndSwitch:
+                this.currentInteraction = new ShowAndSwitch(this.lottie, this.animationContainer, this);
+                break;
             case InteractionType.PlayOnce:
                 this.currentInteraction = new PlayOnce(this.lottie, this.animationContainer, this);
                 break;

diff --git a/src/interactions/FreezeClick.ts → src/interactions/freeze-click.ts b/src/interactions/FreezeClick.ts → src/interactions/freeze-click.ts
diff --git a/src/interactions/interaction-type.ts b/src/interactions/interaction-type.ts
@@ -6,5 +6,11 @@ export enum InteractionType {
     PlayOnce = "play-once",
     Switch = "switch",
     MorphLock = "morph-lock",
-    FreezeClick = "freeze-click"
+    FreezeClick = "freeze-click",
+    ShowAndClick = "show-and-click",
+    ShowAndHover = "show-and-hover",
+    ShowAndMorph = "show-and-morph",
+    ShowAndMorphLock = "show-and-morph-lock",
+    ShowAndFreezeClick = "show-and-freeze-click",
+    ShowAndSwitch = "show-and-switch"
 }