Fixed pixelate-fade text effect synchronization issues ...

by switching from SMIL and CSS animation to particles.

Author: stevenvachon

package-lock.json

@@ -2,7 +2,7 @@
   "private": true,
   "name": "website-frontend",
   "description": "My website's frontend.",
-  "version": "3.2.2",
+  "version": "3.2.3",
   "license": "UNLICENSED",
   "author": "Steven Vachon <[email protected]> (https://svachon.com)",
   "repository": "github:stevenvachon/website-frontend",
@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "splitting": "^1.1.0",
+    "tween-functions": "^1.2.0",
     "typed.js": "^2.1.0",
     "ua-parser-js": "^2.0.3",
     "website-projectile-pixels": "github:stevenvachon/website-projectile-pixels#v1.0.1"

package.json

@@ -14,6 +14,10 @@ let sessionTimeout;
 
 const isActiveSession = () => sessionStorage.getItem(SESSION_ID_KEY) !== null;
 
+/**
+ * @param {string} eventName
+ * @param {{}} data
+ */
 const send = (eventName, data) =>
   Promise.try(() => {
     const type = 'application/json';

src/scripts/analytics.js

@@ -1,8 +1,5 @@
-import {
-  numberError,
-  stringError,
-  watchForReadyElements,
-} from './util/index.js';
+import { numberError, stringError } from './logging/index.js';
+import { watchForReadyElements } from './util/index.js';
 
 export const EFFECT_ATTR = 'data-effect';
 export const EFFECT_DELAY_ATTR = 'data-effect-delay';
@@ -11,6 +8,12 @@ export const EFFECT_DURATION_ATTR = 'data-effect-duration';
 export const BLUR_FADE_EFFECT = 'blur-fade';
 export const FADE_EFFECT = 'fade';
 
+/**
+ * @param {Object} config
+ * @param {number} config.delay Seconds before starting
+ * @param {number} config.duration In seconds (excluding the delay)
+ * @param {number} config.target
+ */
 const blurFadeEffect = async ({ delay, duration, target }) => {
   target.style.filter = 'blur(10px) saturate(0%)';
   target.style.opacity = 0;
@@ -31,6 +34,12 @@ const blurFadeEffect = async ({ delay, duration, target }) => {
   target.style.opacity = '';
 };
 
+/**
+ * @param {Object} config
+ * @param {number} config.delay Seconds before starting
+ * @param {number} config.duration In seconds (excluding the delay)
+ * @param {number} config.target
+ */
 const fadeEffect = async ({ delay, duration, target }) => {
   target.style.opacity = 0;
 

src/scripts/effects.js

@@ -1,6 +1,6 @@
 import analytics from './analytics.js';
 import effects from './effects.js';
-import textEffects from './textEffects.js';
+import textEffects from './textEffects/index.js';
 import 'website-projectile-pixels';
 
 analytics();

src/scripts/index.js

@@ -1,7 +1,7 @@
 import { beforeAll, beforeEach, expect, test as it, vi } from 'vitest';
 import analytics from './analytics.js';
 import effects from './effects.js';
-import textEffects from './textEffects.js';
+import textEffects from './textEffects/index.js';
 
 vi.mock('./analytics.js', async () => ({
   default: vi
@@ -15,10 +15,12 @@ vi.mock('./effects.js', async () => ({
     .mockImplementation((await vi.importActual('./effects.js')).default),
 }));
 
-vi.mock('./textEffects.js', async () => ({
+vi.mock('./textEffects/index.js', async () => ({
   default: vi
     .fn()
-    .mockImplementation((await vi.importActual('./textEffects.js')).default),
+    .mockImplementation(
+      (await vi.importActual('./textEffects/index.js')).default
+    ),
 }));
 
 beforeAll(() => vi.stubGlobal('fetch', vi.fn()));

src/scripts/index.test.js

@@ -0,0 +1,3 @@
+export { default as ignoredWarning } from './ignoredWarning.js';
+export { default as numberError } from './numberError.js';
+export { default as stringError } from './stringError.js';