| 67 | |
| 68 | // Prepares text within an element for animation by splitting it into characters and setting their initial opacity. |
| 69 | const prepareTextForAnimation = itemElement => { |
| 70 | // Query for the span elements within the itemElement |
| 71 | const textSpans = itemElement.querySelectorAll('.content__text > span'); |
| 72 | |
| 73 | // Perform the splitting operation |
| 74 | Splitting({ target: textSpans }); |
| 75 | |
| 76 | // Initialize an array to hold arrays of characters for each span |
| 77 | const charsArray = Array.from(textSpans).map(span => { |
| 78 | // Query for chars inside this span and return them as an array |
| 79 | return Array.from(span.querySelectorAll('.char')); |
| 80 | }); |
| 81 | |
| 82 | // Set the opacity of all characters to 0 using GSAP |
| 83 | charsArray.forEach(charArray => { |
| 84 | gsap.set(charArray, { opacity: 0 }); |
| 85 | }); |
| 86 | |
| 87 | // Return the charsArray |
| 88 | return charsArray; |
| 89 | }; |
| 90 | |
| 91 | // Animation profiles for each item |
| 92 | |