feat(settings): duration

Author: Seldszar

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,
 };

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);
   };

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 {