@hortonstudio/main 1.1.10 → 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 +41 -0
- 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
|
|
|
@@ -286,6 +318,9 @@ export async function init() {
|
|
|
286
318
|
split.elementsClass = elementsClass;
|
|
287
319
|
headingSplits.push(split);
|
|
288
320
|
|
|
321
|
+
// Apply span classes to matching words
|
|
322
|
+
applySpanClasses(split, spanMappings);
|
|
323
|
+
|
|
289
324
|
gsap.set(split[elementsClass], { yPercent: config.headingSplit.yPercent });
|
|
290
325
|
gsap.set(textElement, { autoAlpha: 1 });
|
|
291
326
|
});
|
|
@@ -297,6 +332,9 @@ export async function init() {
|
|
|
297
332
|
const textElement = subheading[index];
|
|
298
333
|
const splitType = parent.getAttribute('data-hs-heroconfig') || 'word';
|
|
299
334
|
|
|
335
|
+
// Extract span mappings before splitting
|
|
336
|
+
const spanMappings = extractSpanMappings(textElement);
|
|
337
|
+
|
|
300
338
|
let splitConfig = {};
|
|
301
339
|
let elementsClass = '';
|
|
302
340
|
|
|
@@ -331,6 +369,9 @@ export async function init() {
|
|
|
331
369
|
split.elementsClass = elementsClass;
|
|
332
370
|
subheadingSplits.push(split);
|
|
333
371
|
|
|
372
|
+
// Apply span classes to matching words
|
|
373
|
+
applySpanClasses(split, spanMappings);
|
|
374
|
+
|
|
334
375
|
gsap.set(split[elementsClass], { yPercent: config.subheadingSplit.yPercent });
|
|
335
376
|
gsap.set(textElement, { autoAlpha: 1 });
|
|
336
377
|
});
|