@hortonstudio/main 1.1.9 → 1.1.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/animations/hero.js +45 -2
- package/package.json +1 -1
package/animations/hero.js
CHANGED
|
@@ -244,6 +244,35 @@ export async function init() {
|
|
|
244
244
|
// Animation timeline
|
|
245
245
|
document.fonts.ready.then(() => {
|
|
246
246
|
|
|
247
|
+
// Helper function to extract span mappings
|
|
248
|
+
function extractSpanMappings(element) {
|
|
249
|
+
const spanMappings = new Map();
|
|
250
|
+
const spans = element.querySelectorAll('span');
|
|
251
|
+
|
|
252
|
+
spans.forEach(span => {
|
|
253
|
+
const text = span.textContent.trim();
|
|
254
|
+
const classes = Array.from(span.classList);
|
|
255
|
+
if (text && classes.length > 0) {
|
|
256
|
+
spanMappings.set(text, classes);
|
|
257
|
+
}
|
|
258
|
+
});
|
|
259
|
+
|
|
260
|
+
return spanMappings;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
// Helper function to apply span classes to matching words
|
|
264
|
+
function applySpanClasses(splitInstance, spanMappings) {
|
|
265
|
+
if (!splitInstance.words || spanMappings.size === 0) return;
|
|
266
|
+
|
|
267
|
+
splitInstance.words.forEach(wordElement => {
|
|
268
|
+
const wordText = wordElement.textContent.trim();
|
|
269
|
+
if (spanMappings.has(wordText)) {
|
|
270
|
+
const classes = spanMappings.get(wordText);
|
|
271
|
+
wordElement.classList.add(...classes);
|
|
272
|
+
}
|
|
273
|
+
});
|
|
274
|
+
}
|
|
275
|
+
|
|
247
276
|
// Split text setup (after fonts are loaded)
|
|
248
277
|
headingSplits = [];
|
|
249
278
|
|
|
@@ -252,6 +281,9 @@ export async function init() {
|
|
|
252
281
|
const textElement = heading[index];
|
|
253
282
|
const splitType = parent.getAttribute('data-hs-heroconfig') || 'word';
|
|
254
283
|
|
|
284
|
+
// Extract span mappings before splitting
|
|
285
|
+
const spanMappings = extractSpanMappings(textElement);
|
|
286
|
+
|
|
255
287
|
let splitConfig = {};
|
|
256
288
|
let elementsClass = '';
|
|
257
289
|
|
|
@@ -265,9 +297,10 @@ export async function init() {
|
|
|
265
297
|
elementsClass = 'chars';
|
|
266
298
|
} else if (splitType === 'line') {
|
|
267
299
|
splitConfig = {
|
|
268
|
-
type: "lines",
|
|
300
|
+
type: "lines,words",
|
|
269
301
|
mask: "lines",
|
|
270
302
|
linesClass: "line",
|
|
303
|
+
wordsClass: "word",
|
|
271
304
|
reduceWhiteSpace: false
|
|
272
305
|
};
|
|
273
306
|
elementsClass = 'lines';
|
|
@@ -285,6 +318,9 @@ export async function init() {
|
|
|
285
318
|
split.elementsClass = elementsClass;
|
|
286
319
|
headingSplits.push(split);
|
|
287
320
|
|
|
321
|
+
// Apply span classes to matching words
|
|
322
|
+
applySpanClasses(split, spanMappings);
|
|
323
|
+
|
|
288
324
|
gsap.set(split[elementsClass], { yPercent: config.headingSplit.yPercent });
|
|
289
325
|
gsap.set(textElement, { autoAlpha: 1 });
|
|
290
326
|
});
|
|
@@ -296,6 +332,9 @@ export async function init() {
|
|
|
296
332
|
const textElement = subheading[index];
|
|
297
333
|
const splitType = parent.getAttribute('data-hs-heroconfig') || 'word';
|
|
298
334
|
|
|
335
|
+
// Extract span mappings before splitting
|
|
336
|
+
const spanMappings = extractSpanMappings(textElement);
|
|
337
|
+
|
|
299
338
|
let splitConfig = {};
|
|
300
339
|
let elementsClass = '';
|
|
301
340
|
|
|
@@ -309,9 +348,10 @@ export async function init() {
|
|
|
309
348
|
elementsClass = 'chars';
|
|
310
349
|
} else if (splitType === 'line') {
|
|
311
350
|
splitConfig = {
|
|
312
|
-
type: "lines",
|
|
351
|
+
type: "lines,words",
|
|
313
352
|
mask: "lines",
|
|
314
353
|
linesClass: "line",
|
|
354
|
+
wordsClass: "word",
|
|
315
355
|
reduceWhiteSpace: false
|
|
316
356
|
};
|
|
317
357
|
elementsClass = 'lines';
|
|
@@ -329,6 +369,9 @@ export async function init() {
|
|
|
329
369
|
split.elementsClass = elementsClass;
|
|
330
370
|
subheadingSplits.push(split);
|
|
331
371
|
|
|
372
|
+
// Apply span classes to matching words
|
|
373
|
+
applySpanClasses(split, spanMappings);
|
|
374
|
+
|
|
332
375
|
gsap.set(split[elementsClass], { yPercent: config.subheadingSplit.yPercent });
|
|
333
376
|
gsap.set(textElement, { autoAlpha: 1 });
|
|
334
377
|
});
|