😅 Hi again, the response did solve my issue but after playing some more with it i found something weird,
i tried calculating the duration based on the length of both arrays.
const katakana = [ ... ];
const split_text = new SplitText(".message");
const split_message = ["W", "e", "l", "c", "o", "m", "e"];
function decode(args) {
const timeline = gsap.timeline(args);
const chars = katakana.join("");
const charsPerSecond = 1 / 3;
const totalDuration = katakana.length / charsPerSecond / 60;
const charDuration = totalDuration / split_message.length;
for (let index = 0; index < split_message.length; index++) {
const el = split_text.chars[index];
const text = split_message[index];
const duration = charDuration * (index + 1);
const revealDelay = charDuration * index;
timeline.to( ... );
}
return timeline;
}
This because in the example there is some "dead" time at the end and based on the code i assumed this is what would solve this as my assumption was that there where not enough characters in the `chars` string. So i thought that would give me an exact timeline, but i still have a small amount of "dead" space at the end that i can't get rid off.
Here is a basic image demonstrating how I'm picturing the final timeline
Now here is the same image but with what i think as "dead" space, the final letter "e" in welcome, it has about 0.26s of
time.
Here is a demo:
Codepen Demo