diff --git a/examples/index.html b/examples/index.html
index 0c3fcca..96bba77 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -21,6 +21,12 @@ Examples
Interaction: Morph
Interaction: Morph lock
Interaction: Play-on-show
+ Show and click
+ Show and hover
+ Show and freeze click
+ Show and morph
+ Show and morph-lock
+ Show and switch
Interaction: Play-once
Interaction: Switch
Attribute: view-box
diff --git a/examples/multiple-interactions/show-and-click.html b/examples/multiple-interactions/show-and-click.html
new file mode 100644
index 0000000..da2c6f2
--- /dev/null
+++ b/examples/multiple-interactions/show-and-click.html
@@ -0,0 +1,52 @@
+
+
+
+
+ Show-and-click example
+
+
+
+
+
+ Interaction: 'Show-and-click'
+
+
+
Scroll down!
+
+Interaction: 'show-and-click'
+
+
+
+
+
+
+
+
diff --git a/examples/multiple-interactions/show-and-freeze-click.html b/examples/multiple-interactions/show-and-freeze-click.html
new file mode 100644
index 0000000..e1e3d55
--- /dev/null
+++ b/examples/multiple-interactions/show-and-freeze-click.html
@@ -0,0 +1,52 @@
+
+
+
+
+ Show-and-click example
+
+
+
+
+
+ Interaction: 'show-and-freeze-click'
+
+
+
Scroll down!
+
+Interaction: 'show-and-freeze-click'
+
+
+
+
+
+
+
+
diff --git a/examples/multiple-interactions/show-and-hover.html b/examples/multiple-interactions/show-and-hover.html
new file mode 100644
index 0000000..9f8822e
--- /dev/null
+++ b/examples/multiple-interactions/show-and-hover.html
@@ -0,0 +1,52 @@
+
+
+
+
+ Show-and-click example
+
+
+
+
+
+ Interaction: 'show-and-hover'
+
+
+
Scroll down!
+
+Interaction: 'show-and-hover'
+
+
+
+
+
+
+
+
diff --git a/examples/multiple-interactions/show-and-morph-lock.html b/examples/multiple-interactions/show-and-morph-lock.html
new file mode 100644
index 0000000..d42e92b
--- /dev/null
+++ b/examples/multiple-interactions/show-and-morph-lock.html
@@ -0,0 +1,52 @@
+
+
+
+
+ Show-and-click example
+
+
+
+
+
+ Interaction: 'show-and-morph-lock'
+
+
+
Scroll down!
+
+Interaction: 'show-and-morph-lock'
+
+
+
+
+
+
+
+
diff --git a/examples/multiple-interactions/show-and-morph.html b/examples/multiple-interactions/show-and-morph.html
new file mode 100644
index 0000000..44b37a2
--- /dev/null
+++ b/examples/multiple-interactions/show-and-morph.html
@@ -0,0 +1,52 @@
+
+
+
+
+ Show-and-click example
+
+
+
+
+
+ Interaction: 'show-and-morph'
+
+
+
Scroll down!
+
+Interaction: 'show-and-morph'
+
+
+
+
+
+
+
+
diff --git a/examples/multiple-interactions/show-and-switch.html b/examples/multiple-interactions/show-and-switch.html
new file mode 100644
index 0000000..880303d
--- /dev/null
+++ b/examples/multiple-interactions/show-and-switch.html
@@ -0,0 +1,52 @@
+
+
+
+
+ Show-and-click example
+
+
+
+
+
+ Interaction: 'show-and-switch'
+
+
+
Scroll down!
+
+Interaction: 'show-and-switch'
+
+
+
+
+
+
+
+
diff --git a/src/index.ts b/src/index.ts
index e1bb18e..603c68d 100644
--- 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 b/src/interactions/freeze-click.ts
similarity index 100%
rename from src/interactions/FreezeClick.ts
rename to src/interactions/freeze-click.ts
diff --git a/src/interactions/interaction-type.ts b/src/interactions/interaction-type.ts
index 22cc4a0..4ce7e9e 100644
--- 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"
}
diff --git a/src/interactions/show-and-click.ts b/src/interactions/show-and-click.ts
new file mode 100644
index 0000000..a9373f5
--- /dev/null
+++ b/src/interactions/show-and-click.ts
@@ -0,0 +1,22 @@
+import {LottiePlayer} from "Lottie-web";
+import {BaseInteraction} from "./base-interaction";
+import {InteractionType} from "./interaction-type";
+import {FASTElement} from "@microsoft/fast-element";
+import {PlayOnShow} from "./play-on-show";
+import {Click} from "./click";
+
+export class ShowAndClick extends BaseInteraction {
+ private playOnShow: PlayOnShow;
+ private playOnClick: Click;
+
+ constructor(player: LottiePlayer, element: HTMLElement, fastElement: FASTElement) {
+ super(player, element, fastElement);
+
+ this.interactionType = InteractionType.ShowAndClick;
+ this.playOnShow = new PlayOnShow(player, element, fastElement);
+ this.playOnClick = new Click(player, element, fastElement);
+ }
+
+ removeListener(): void {
+ }
+}
diff --git a/src/interactions/show-and-freeze-click.ts b/src/interactions/show-and-freeze-click.ts
new file mode 100644
index 0000000..9e2fe67
--- /dev/null
+++ b/src/interactions/show-and-freeze-click.ts
@@ -0,0 +1,22 @@
+import {LottiePlayer} from "Lottie-web";
+import {BaseInteraction} from "./base-interaction";
+import {InteractionType} from "./interaction-type";
+import {FASTElement} from "@microsoft/fast-element";
+import {PlayOnShow} from "./play-on-show";
+import {FreezeClick} from "./freeze-click";
+
+export class ShowAndFreezeClick extends BaseInteraction {
+ private playOnShow: PlayOnShow;
+ private playOnFreezeClick: FreezeClick;
+
+ constructor(player: LottiePlayer, element: HTMLElement, fastElement: FASTElement) {
+ super(player, element, fastElement);
+
+ this.interactionType = InteractionType.ShowAndClick;
+ this.playOnShow = new PlayOnShow(player, element, fastElement);
+ this.playOnFreezeClick = new FreezeClick(player, element, fastElement);
+ }
+
+ removeListener(): void {
+ }
+}
diff --git a/src/interactions/show-and-hover.ts b/src/interactions/show-and-hover.ts
new file mode 100644
index 0000000..0efc9bd
--- /dev/null
+++ b/src/interactions/show-and-hover.ts
@@ -0,0 +1,22 @@
+import {LottiePlayer} from "Lottie-web";
+import {BaseInteraction} from "./base-interaction";
+import {InteractionType} from "./interaction-type";
+import {FASTElement} from "@microsoft/fast-element";
+import {PlayOnShow} from "./play-on-show";
+import {Hover} from "./hover";
+
+export class ShowAndHover extends BaseInteraction {
+ private playOnShow: PlayOnShow;
+ private playOnHover: Hover;
+
+ constructor(player: LottiePlayer, element: HTMLElement, fastElement: FASTElement) {
+ super(player, element, fastElement);
+
+ this.interactionType = InteractionType.ShowAndClick;
+ this.playOnShow = new PlayOnShow(player, element, fastElement);
+ this.playOnHover = new Hover(player, element, fastElement);
+ }
+
+ removeListener(): void {
+ }
+}
diff --git a/src/interactions/show-and-morph-lock.ts b/src/interactions/show-and-morph-lock.ts
new file mode 100644
index 0000000..ebbd322
--- /dev/null
+++ b/src/interactions/show-and-morph-lock.ts
@@ -0,0 +1,22 @@
+import {LottiePlayer} from "Lottie-web";
+import {BaseInteraction} from "./base-interaction";
+import {InteractionType} from "./interaction-type";
+import {FASTElement} from "@microsoft/fast-element";
+import {PlayOnShow} from "./play-on-show";
+import {MorphLock} from "./morph-lock";
+
+export class ShowAndMorphLock extends BaseInteraction {
+ private playOnShow: PlayOnShow;
+ private playOnMorphLock: MorphLock;
+
+ constructor(player: LottiePlayer, element: HTMLElement, fastElement: FASTElement) {
+ super(player, element, fastElement);
+
+ this.interactionType = InteractionType.ShowAndClick;
+ this.playOnShow = new PlayOnShow(player, element, fastElement);
+ this.playOnMorphLock = new MorphLock(player, element, fastElement);
+ }
+
+ removeListener(): void {
+ }
+}
diff --git a/src/interactions/show-and-morph.ts b/src/interactions/show-and-morph.ts
new file mode 100644
index 0000000..1ffd51d
--- /dev/null
+++ b/src/interactions/show-and-morph.ts
@@ -0,0 +1,22 @@
+import {LottiePlayer} from "Lottie-web";
+import {BaseInteraction} from "./base-interaction";
+import {InteractionType} from "./interaction-type";
+import {FASTElement} from "@microsoft/fast-element";
+import {PlayOnShow} from "./play-on-show";
+import {Morph} from "./morph";
+
+export class ShowAndMorph extends BaseInteraction {
+ private playOnShow: PlayOnShow;
+ private playOnMorph: Morph;
+
+ constructor(player: LottiePlayer, element: HTMLElement, fastElement: FASTElement) {
+ super(player, element, fastElement);
+
+ this.interactionType = InteractionType.ShowAndMorph;
+ this.playOnShow = new PlayOnShow(player, element, fastElement);
+ this.playOnMorph = new Morph(player, element, fastElement);
+ }
+
+ removeListener(): void {
+ }
+}
diff --git a/src/interactions/show-and-switch.ts b/src/interactions/show-and-switch.ts
new file mode 100644
index 0000000..567ed17
--- /dev/null
+++ b/src/interactions/show-and-switch.ts
@@ -0,0 +1,22 @@
+import {LottiePlayer} from "Lottie-web";
+import {BaseInteraction} from "./base-interaction";
+import {InteractionType} from "./interaction-type";
+import {FASTElement} from "@microsoft/fast-element";
+import {PlayOnShow} from "./play-on-show";
+import {Switch} from "./switch";
+
+export class ShowAndSwitch extends BaseInteraction {
+ private playOnShow: PlayOnShow;
+ private playOnSwitch: Switch;
+
+ constructor(player: LottiePlayer, element: HTMLElement, fastElement: FASTElement) {
+ super(player, element, fastElement);
+
+ this.interactionType = InteractionType.ShowAndClick;
+ this.playOnShow = new PlayOnShow(player, element, fastElement);
+ this.playOnSwitch = new Switch(player, element, fastElement);
+ }
+
+ removeListener(): void {
+ }
+}
diff --git a/src/interactions/switch.ts b/src/interactions/switch.ts
index fe60329..0321e3a 100644
--- a/src/interactions/switch.ts
+++ b/src/interactions/switch.ts
@@ -29,13 +29,12 @@ export class Switch extends BaseInteraction {
this.direction = 1;
this.playing = true;
this.lottiePlayer.setDirection(this.direction);
- this.lottiePlayer.goToAndPlay(0, true);
} else if (this.direction === 1) {
this.direction = -1;
this.playing = true;
this.lottiePlayer.setDirection(this.direction);
- this.lottiePlayer.play();
}
+ this.lottiePlayer.play();
}
public playOnClick(): void {