[ScrambleTextPlugin/SplitText] Text "Decoder" Animation, ScrambleTextPlugin child tween duration.

[dotmot]

Hi there,

I'm having a weird issue when trying to use ScrambleText Plugin to tween a single character, split by

the SplitText plugin and searching in the forums, i found the following thread: Split Text / ScrambleText - Random Stagger, which in a comment from @Carl has the following example that i used to create this animation ( I didn't comment there as the thread is from 2015).

See the Pen JGoBvN?editors=001 by GreenSock (@GreenSock) on CodePen.

 

Now my problem is that while tweening the character, the tween has some "dead" time in between each character,
i have tried fixing the timing using the duration of each tween, the duration of the timeline and the position of each tween in the timeline but it seems that i don't really understand how the ScrambleText Plugin really works.

 

If anyone has any idea how i can configure this to run as if i was scrambling the text as a single word instead of each character as a regular ScrambleText Plugin tween would please, let me know.

 

Thanks.

See the Pen wvOrqOy by Dotmot (@Dotmot) on CodePen.

Edited January 25, 2024 by dotmot
Error citing codepen

[GreenSock]

That's because you were just sequencing each scramble tween one-after-the-other but for the effect that I think you want, you need to have them all animating at the same time, and have each one reveal one-after-the-other. So you can adjust the duration and the revealDelay accordingly. So for example, the first tween would be the shortest, the second one would be twice as long, and its revealDelay would be the duration of the first one. The 3rd one would be 3x as long as the first, one, and its revealDelay would be the duration of the 2nd one, etc. 

 

Here's what I assume you wanted: 

See the Pen gOEGoWw?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

Thanks for being a Club GSAP member! ?

[dotmot]

12 hours ago, GreenSock said:

That's because you were just sequencing each scramble tween one-after-the-other but for the effect that I think you want, you need to have them all animating at the same time, and have each one reveal one-after-the-other. So you can adjust the duration and the revealDelay accordingly. So for example, the first tween would be the shortest, the second one would be twice as long, and its revealDelay would be the duration of the first one. The 3rd one would be 3x as long as the first, one, and its revealDelay would be the duration of the 2nd one, etc. 

 

Here's what I assume you wanted: 

 

 

 

Thanks for being a Club GSAP member! ?

This is exactly what i was intending to achieve and the explanation + the code gives me a really good example on how to use the plugin, thanks.
I'm sorry for such a basic question, this is the first time trying this specific plugin.
 

 

[GreenSock]

4 hours ago, dotmot said:

I'm sorry for such a basic question, this is the first time trying this specific plugin.

No no, that wasn't a basic question at all. I think a lot of people might struggle with that. It's an edge case where you're splitting all the text apart and then trying to make it act like a single element with a scrambleText animation. 

 

4 hours ago, dotmot said:

This is exactly what i was intending to achieve and the explanation + the code gives me a really good example on how to use the plugin, thanks.

?

 

Have fun!

[dotmot]

? 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:

See the Pen wvOrqOy?editors=0010 by Dotmot (@Dotmot) on CodePen.

 

6 hours ago, GreenSock said:

No no, that wasn't a basic question at all. I think a lot of people might struggle with that. It's an edge case where you're splitting all the text apart and then trying to make it act like a single element with a scrambleText animation. 

 

?

 

Have fun!

 

Edited January 26, 2024 by dotmot
Missing codepen demo

[dotmot]

After reviewing a little more the timeline, i found that there is actually a difference of 0.26s in every character from where i `think` they should end based on the code, and where they actually end in the timeline and i don't understand why.

 

[GreenSock]

Yep, that's to be expected because you've got a linear ease ("none") and only ONE letter that you're "flipping", thus exactly halfway through the tweening part, it'd flip to the next (final) character. If you want it to wait longer to do that final flip, you could just use a much stronger ease, like ease: "expo.in". 

 

See the Pen yLwPevj?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

Does that clear things up?

[dotmot]

It's so obvious i am a little embarrassed, this does cleared things up,
at the end i configured a custom ease to achieve the effect i wanted.

 

CustomEase.create("custom", "M0,0 C0,0 0.815,0.1 0.9,0.1 1,0.1 1,0.5 1,1 ");

 

 

Again, Thank you very much.
 

See the Pen wvOrqOy by Dotmot (@Dotmot) on CodePen.