@hortonstudio/main 1.1.16 → 1.1.18
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 +14 -66
- package/package.json +1 -1
package/animations/hero.js
CHANGED
@@ -244,59 +244,14 @@ export async function init() {
|
|
244
244
|
// Animation timeline
|
245
245
|
document.fonts.ready.then(() => {
|
246
246
|
|
247
|
-
// Helper function to flatten heading and extract span info
|
248
|
-
function flattenHeading(textElement) {
|
249
|
-
const spanMappings = new Map();
|
250
|
-
const spans = textElement.querySelectorAll('span');
|
251
|
-
|
252
|
-
// Extract span text and classes before flattening
|
253
|
-
spans.forEach(span => {
|
254
|
-
const text = span.textContent.trim();
|
255
|
-
const classes = Array.from(span.classList);
|
256
|
-
if (text && classes.length > 0) {
|
257
|
-
spanMappings.set(text, classes);
|
258
|
-
}
|
259
|
-
});
|
260
|
-
|
261
|
-
// Get the original tag name and attributes
|
262
|
-
const tagName = textElement.tagName;
|
263
|
-
const originalClasses = Array.from(textElement.classList);
|
264
|
-
const originalAttributes = {};
|
265
|
-
|
266
|
-
for (let attr of textElement.attributes) {
|
267
|
-
if (attr.name !== 'class') {
|
268
|
-
originalAttributes[attr.name] = attr.value;
|
269
|
-
}
|
270
|
-
}
|
271
|
-
|
272
|
-
// Create completely new element with just text content
|
273
|
-
const newElement = document.createElement(tagName);
|
274
|
-
newElement.textContent = textElement.textContent;
|
275
|
-
|
276
|
-
// Restore original attributes and classes
|
277
|
-
originalClasses.forEach(cls => newElement.classList.add(cls));
|
278
|
-
Object.entries(originalAttributes).forEach(([name, value]) => {
|
279
|
-
newElement.setAttribute(name, value);
|
280
|
-
});
|
281
|
-
|
282
|
-
// Replace the original element
|
283
|
-
textElement.parentNode.replaceChild(newElement, textElement);
|
284
|
-
|
285
|
-
return { newElement, spanMappings };
|
286
|
-
}
|
287
|
-
|
288
247
|
// Split text setup (after fonts are loaded)
|
289
248
|
headingSplits = [];
|
290
249
|
|
291
250
|
if (heading.length > 0) {
|
292
251
|
headingSplitElements.forEach((parent, index) => {
|
293
|
-
|
252
|
+
const textElement = heading[index];
|
294
253
|
const splitType = parent.getAttribute('data-hs-heroconfig') || 'word';
|
295
254
|
|
296
|
-
// Flatten the heading and get span mappings
|
297
|
-
const { newElement, spanMappings } = flattenHeading(textElement);
|
298
|
-
textElement = newElement; // Use the flattened element
|
299
|
-
|
300
255
|
let splitConfig = {};
|
301
256
|
let elementsClass = '';
|
302
257
|
|
@@ -304,21 +259,24 @@ export async function init() {
|
|
304
259
|
splitConfig = {
|
305
260
|
type: "words,chars",
|
306
261
|
mask: "chars",
|
307
|
-
charsClass: "char"
|
262
|
+
charsClass: "char",
|
263
|
+
reduceWhiteSpace: false
|
308
264
|
};
|
309
265
|
elementsClass = 'chars';
|
310
266
|
} else if (splitType === 'line') {
|
311
267
|
splitConfig = {
|
312
268
|
type: "lines",
|
313
269
|
mask: "lines",
|
314
|
-
linesClass: "line"
|
270
|
+
linesClass: "line",
|
271
|
+
reduceWhiteSpace: false
|
315
272
|
};
|
316
273
|
elementsClass = 'lines';
|
317
274
|
} else {
|
318
275
|
splitConfig = {
|
319
276
|
type: "words",
|
320
277
|
mask: "words",
|
321
|
-
wordsClass: "word"
|
278
|
+
wordsClass: "word",
|
279
|
+
reduceWhiteSpace: false
|
322
280
|
};
|
323
281
|
elementsClass = 'words';
|
324
282
|
}
|
@@ -327,19 +285,6 @@ export async function init() {
|
|
327
285
|
split.elementsClass = elementsClass;
|
328
286
|
headingSplits.push(split);
|
329
287
|
|
330
|
-
// Apply span classes to matching words if we have words available
|
331
|
-
if (split.words && spanMappings.size > 0) {
|
332
|
-
split.words.forEach(wordElement => {
|
333
|
-
const wordText = wordElement.textContent.trim();
|
334
|
-
if (spanMappings.has(wordText)) {
|
335
|
-
const classes = spanMappings.get(wordText);
|
336
|
-
classes.forEach(className => {
|
337
|
-
wordElement.classList.add(className);
|
338
|
-
});
|
339
|
-
}
|
340
|
-
});
|
341
|
-
}
|
342
|
-
|
343
288
|
gsap.set(split[elementsClass], { yPercent: config.headingSplit.yPercent });
|
344
289
|
gsap.set(textElement, { autoAlpha: 1 });
|
345
290
|
});
|
@@ -358,21 +303,24 @@ export async function init() {
|
|
358
303
|
splitConfig = {
|
359
304
|
type: "words,chars",
|
360
305
|
mask: "chars",
|
361
|
-
charsClass: "char"
|
306
|
+
charsClass: "char",
|
307
|
+
reduceWhiteSpace: false
|
362
308
|
};
|
363
309
|
elementsClass = 'chars';
|
364
310
|
} else if (splitType === 'line') {
|
365
311
|
splitConfig = {
|
366
312
|
type: "lines",
|
367
313
|
mask: "lines",
|
368
|
-
linesClass: "line"
|
314
|
+
linesClass: "line",
|
315
|
+
reduceWhiteSpace: false
|
369
316
|
};
|
370
317
|
elementsClass = 'lines';
|
371
318
|
} else {
|
372
319
|
splitConfig = {
|
373
320
|
type: "words",
|
374
321
|
mask: "words",
|
375
|
-
wordsClass: "word"
|
322
|
+
wordsClass: "word",
|
323
|
+
reduceWhiteSpace: false
|
376
324
|
};
|
377
325
|
elementsClass = 'words';
|
378
326
|
}
|
@@ -457,7 +405,7 @@ export async function init() {
|
|
457
405
|
ease: config.headingSplit.ease,
|
458
406
|
onComplete: () => {
|
459
407
|
if (split && split.revert) {
|
460
|
-
|
408
|
+
split.revert();
|
461
409
|
}
|
462
410
|
}
|
463
411
|
},
|