My issue (resolved)
I've been working on an animation where each letter appears sequentially, but I encountered a problem. In order to transform the letters properly, I had to wrap my span tags in a flex div because using inline-block didn't allow for the desired transformation. However, this caused the spaces between words to disappear, resulting in the words being concatenated without any space.
I'm utilizing NuxtJS for this task. Here is the current code snippet:
<div :class="$style['intro-chars']">
<span
v-for="(char, i) of text.split('')"
:key="i"
ref="title"
:class="{ space: i == 6 }"
>
{{ char }} <!-- "text" is defined in a data() method -->
</span>
</div>
.intro-chars {
display: flex;
overflow: hidden;
span {
font-size: 6em;
font-weight: 700;
}
}
.space {
opacity: 0;
}
let title = this.$refs.title;
console.log(title);
for (let i = 0; i < title.length; i++) {
gsap.timeline({ defaults: { duration: 1.8, ease: "power4.inOut", delay: 0.1 * i } }).fromTo(title[i], { translateY: 100 }, { translateY: 0 });
}
Solution
I found a solution by processing my data in a computed method.
To address the whitespace issue, I replaced all spaces in my string with underscores (_).
I then manipulated the data by replacing the underscore with \u00A0 using the following logic:
computed: {
splitText() {
let split = this.text.split('');
split[split.indexOf("_")] = "\u00A0"
return split;
}
In the v-for loop, instead of (char, i) of text, it now reads (char, i) of splitText (as done in the computed method).
This approach displays within a single span element, rather than breaking it into multiple separate span elements like
<span>&</span> <span>n</span> <span>b</span>…