feat: added play on show and play on scroll

dotlottie · Aug 9, 2023 · d862d2c · d862d2c
1 parent 35bd9af
commit d862d2c
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 18 deletions.
diff --git a/.changeset/poor-beans-unite.md b/.changeset/poor-beans-unite.md
@@ -0,0 +1,5 @@
+---
+"@dotlottie/dotlottie-js": minor
+---
+
+added scroll and play on show types for state
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -19,6 +19,7 @@
     "neat-humans-worry",
     "old-ghosts-explain",
     "orange-bobcats-allow",
+    "poor-beans-unite",
     "proud-goats-turn",
     "quick-emus-occur",
     "shy-laws-taste",

diff --git a/apps/node/lf-interactivity-page-generator.mjs b/apps/node/lf-interactivity-page-generator.mjs
@@ -450,19 +450,17 @@ async function createSingles() {
       url: 'https://assets2.lottiefiles.com/packages/lf20_4fET62.json',
     })
     .addStateMachine({
-      state: {
-        descriptor: {
-          id: 'state_segments',
-          initial: 'loopState',
-        },
-        states: {
-          animationId: 'segments',
-          loopState: {
-            statePlaybackSettings: {
-              autoplay: true,
-              loop: true,
-              segments: [70, 500],
-            },
+      descriptor: {
+        id: 'state_segments',
+        initial: 'loopState',
+      },
+      states: {
+        animationId: 'segments',
+        loopState: {
+          statePlaybackSettings: {
+            autoplay: true,
+            loop: true,
+            segments: [70, 500],
           },
         },
       },
@@ -1044,7 +1042,7 @@ async function createSingles() {
       fs.writeFileSync(filename, Buffer.from(value));
     });
 
-  const inheritAttributes = await new DotLottie();
+  const inheritAttributes = new DotLottie();
 
   await inheritAttributes
     .addAnimation({
@@ -1110,6 +1108,66 @@ async function createSingles() {
       fs.writeFileSync(filename, Buffer.from(value));
     });
 
+  const lighthouseOnScroll = new DotLottie();
+
+  await lighthouseOnScroll
+    .addAnimation({
+      id: 'lighthouse',
+      url: 'https://lottie.host/3bc6c6e9-36f0-4e1b-9a22-beb871207737/5pVAM4rz72.json',
+    })
+    .addStateMachine({
+      descriptor: {
+        id: 'onScrollZero',
+        initial: 'onScrollState',
+      },
+      states: {
+        onScrollState: {
+          animationId: 'lighthouse',
+          statePlaybackSettings: {
+            playOnScroll: [0, 1.0],
+          },
+        },
+      },
+    })
+    .addStateMachine({
+      descriptor: {
+        id: 'onScrollOne',
+        initial: 'onScrollState',
+      },
+      states: {
+        onScrollState: {
+          animationId: 'lighthouse',
+          statePlaybackSettings: {
+            playOnScroll: [0.5, 1],
+          },
+        },
+      },
+    })
+    .addStateMachine({
+      descriptor: {
+        id: 'onScrollTwo',
+        initial: 'onScrollState',
+      },
+      states: {
+        onScrollState: {
+          animationId: 'lighthouse',
+          statePlaybackSettings: {
+            playOnScroll: [0, 1],
+            segments: [0, 100],
+          },
+        },
+      },
+    })
+    .build()
+    .then((value) => {
+      return value.toArrayBuffer();
+    })
+    .then(async (value) => {
+      const filename = 'lighthouseOnScroll.lottie';
+
+      console.log('> Writing to file: ' + filename);
+      fs.writeFileSync(filename, Buffer.from(value));
+    });
   // const errorDotLottie = await new DotLottie().fromURL(
   //   'https://lottie.host/d76e204a-35eb-4258-ab86-1473a6966765/WUvJ2K6yO0.lottie',
   // );
@@ -1127,5 +1185,5 @@ async function createSingles() {
   // );
 }
 
-createDotLottie();
-// createSingles();
+// createDotLottie();
+createSingles();
diff --git a/packages/dotlottie-js/CHANGELOG.md b/packages/dotlottie-js/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @dotlottie/dotlottie-js
 
+## 0.4.0-beta.22
+
+### Minor Changes
+
+- added scroll and play on show types for state
+
 ## 0.4.0-beta.21
 
 ### Patch Changes

diff --git a/packages/dotlottie-js/package.json b/packages/dotlottie-js/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@dotlottie/dotlottie-js",
-  "version": "0.4.0-beta.21",
+  "version": "0.4.0-beta.22",
   "type": "module",
   "description": "This library helps in creating and modifying .lottie files.",
   "repository": {

diff --git a/packages/dotlottie-js/src/common/dotlottie-state-machine-common.ts b/packages/dotlottie-js/src/common/dotlottie-state-machine-common.ts
@@ -9,7 +9,6 @@ import { createError } from './utils';
 
 export interface DotLottieStateMachineCommonOptions {
   descriptor: StateInfo;
-  // state: DotLottieState;
   states: DotLottieStates;
   zipOptions?: ZipOptions;
 }

diff --git a/packages/dotlottie-js/src/common/dotlottie-state.ts b/packages/dotlottie-js/src/common/dotlottie-state.ts
@@ -7,6 +7,8 @@ import type { ManifestAnimation } from './manifest';
 export type PlaybackOptions = Omit<ManifestAnimation, 'id'>;
 
 export interface StateAnimationSettings extends PlaybackOptions {
+  // Scroll takes a visbility threshold between 0 and 1.
+  playOnScroll?: [number, number];
   segments?: [number, number] | string;
 }
 
@@ -30,6 +32,8 @@ export interface StateTransitionOnMouseLeave extends Transitionable {}
 
 export interface StateTransitionOnComplete extends Transitionable {}
 
+export interface StateTransitionOnShow extends Transitionable {}
+
 export interface StateInfo {
   id: string;
   initial: string;
@@ -42,6 +46,7 @@ export const EVENT_MAP = {
   complete: 'onComplete',
   after: 'onAfter',
   enter: 'onEnter',
+  show: 'onShow',
 };
 
 export const DotLottieStateEvents = Object.values(EVENT_MAP);
@@ -57,6 +62,7 @@ export interface StateTransitionEvents {
   onEnter?: StateTransitionOnEnter;
   onMouseEnter?: StateTransitionOnMouseEnter;
   onMouseLeave?: StateTransitionOnMouseLeave;
+  onShow?: StateTransitionOnShow;
 }
 
 export interface StateSettings extends StateTransitionEvents {