feat(settings): duration

Seldszar · Jun 10, 2021 · 76fe187 · 76fe187
1 parent c04ead9
commit 76fe187
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 2 deletions.
diff --git a/public/settings.js b/public/settings.js
@@ -40,4 +40,10 @@ window.settings = {
    * @type {Number}
    */
   maxSize: 400,
+
+  /**
+   * Duration, in seconds, the image will remain displayed.
+   * @type {Number}
+   */
+  duration: 8,
 };
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -46,8 +46,24 @@ const App: FC = () => {
       opacity: 0,
     });
 
-    tl.to(pictureRef.current, { [propertyKey]: 0, opacity: 1, rotate: endAngle }, "+=1");
-    tl.to(pictureRef.current, { [propertyKey]: propertyValue, opacity: 0 }, "+=8");
+    tl.to(
+      pictureRef.current,
+      {
+        [propertyKey]: 0,
+        rotate: endAngle,
+        opacity: 1,
+      },
+      "+=1"
+    );
+
+    tl.to(
+      pictureRef.current,
+      {
+        [propertyKey]: propertyValue,
+        opacity: 0,
+      },
+      `+=${settings.duration}`
+    );
 
     mainTimeline.add(tl);
   };

diff --git a/src/types/settings.d.ts b/src/types/settings.d.ts
@@ -28,6 +28,11 @@ export interface Settings {
    * Maximum size, in pixels, of the displayed image.
    */
   maxSize: number;
+
+  /**
+   * Duration, in seconds, the image will remain displayed.
+   */
+  duration: number;
 }
 
 declare global {