@hortonstudio/main 1.1.10 → 1.1.12
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 +44 -0
- package/package.json +1 -1
package/animations/hero.js
CHANGED
|
@@ -244,6 +244,38 @@ export async function init() {
|
|
|
244
244
|
// Animation timeline
|
|
245
245
|
document.fonts.ready.then(() => {
|
|
246
246
|
|
|
247
|
+
// Helper function to extract span mappings and flatten HTML
|
|
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
|
+
// Replace span with its text content to flatten HTML
|
|
260
|
+
span.replaceWith(document.createTextNode(span.textContent));
|
|
261
|
+
});
|
|
262
|
+
|
|
263
|
+
return spanMappings;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
// Helper function to apply span classes to matching words
|
|
267
|
+
function applySpanClasses(splitInstance, spanMappings) {
|
|
268
|
+
if (!splitInstance.words || spanMappings.size === 0) return;
|
|
269
|
+
|
|
270
|
+
splitInstance.words.forEach(wordElement => {
|
|
271
|
+
const wordText = wordElement.textContent.trim();
|
|
272
|
+
if (spanMappings.has(wordText)) {
|
|
273
|
+
const classes = spanMappings.get(wordText);
|
|
274
|
+
wordElement.classList.add(...classes);
|
|
275
|
+
}
|
|
276
|
+
});
|
|
277
|
+
}
|
|
278
|
+
|
|
247
279
|
// Split text setup (after fonts are loaded)
|
|
248
280
|
headingSplits = [];
|
|
249
281
|
|
|
@@ -252,6 +284,9 @@ export async function init() {
|
|
|
252
284
|
const textElement = heading[index];
|
|
253
285
|
const splitType = parent.getAttribute('data-hs-heroconfig') || 'word';
|
|
254
286
|
|
|
287
|
+
// Extract span mappings before splitting
|
|
288
|
+
const spanMappings = extractSpanMappings(textElement);
|
|
289
|
+
|
|
255
290
|
let splitConfig = {};
|
|
256
291
|
let elementsClass = '';
|
|
257
292
|
|
|
@@ -286,6 +321,9 @@ export async function init() {
|
|
|
286
321
|
split.elementsClass = elementsClass;
|
|
287
322
|
headingSplits.push(split);
|
|
288
323
|
|
|
324
|
+
// Apply span classes to matching words
|
|
325
|
+
applySpanClasses(split, spanMappings);
|
|
326
|
+
|
|
289
327
|
gsap.set(split[elementsClass], { yPercent: config.headingSplit.yPercent });
|
|
290
328
|
gsap.set(textElement, { autoAlpha: 1 });
|
|
291
329
|
});
|
|
@@ -297,6 +335,9 @@ export async function init() {
|
|
|
297
335
|
const textElement = subheading[index];
|
|
298
336
|
const splitType = parent.getAttribute('data-hs-heroconfig') || 'word';
|
|
299
337
|
|
|
338
|
+
// Extract span mappings before splitting
|
|
339
|
+
const spanMappings = extractSpanMappings(textElement);
|
|
340
|
+
|
|
300
341
|
let splitConfig = {};
|
|
301
342
|
let elementsClass = '';
|
|
302
343
|
|
|
@@ -331,6 +372,9 @@ export async function init() {
|
|
|
331
372
|
split.elementsClass = elementsClass;
|
|
332
373
|
subheadingSplits.push(split);
|
|
333
374
|
|
|
375
|
+
// Apply span classes to matching words
|
|
376
|
+
applySpanClasses(split, spanMappings);
|
|
377
|
+
|
|
334
378
|
gsap.set(split[elementsClass], { yPercent: config.subheadingSplit.yPercent });
|
|
335
379
|
gsap.set(textElement, { autoAlpha: 1 });
|
|
336
380
|
});
|