TextPlugin and Format Preservation

[IanTheSecond]

Hello,

 

I wanted to create a console log typing effect with the GSAP TextPlugin. I have a container that has preserved formatted text (spaces for indentations and line breaks without <br>) that I tried to animate with gsap.from() method and the text: {value: ""} property. However, when not manipulated by GSAP, the formatting is fine. But when I used the method mentioned above, all indentations and line breaks are not respected. 

Is there a way for GSAP to preserve such format? 

 

I have tried the below example to simulate a text typing effect (another version with a timeout/await between each iteration) but I lose easing functionality that I would really love to have, though the method preserved the formatting.

for (var i = 0; i < text.length; i++) {
    container.textContent += text[i]
}

 

Thank you for your considerations. 

 

[Cassie]

Hi Ian,

 

Would it be possible to put together a minimal demo so we can see how you're formatting the text?

It's difficult to know what's going on without a look at the animation.

Thanks!

[IanTheSecond]

3 hours ago, Cassie said:

Hi Ian,

 

Would it be possible to put together a minimal demo so we can see how you're formatting the text?

It's difficult to know what's going on without a look at the animation.

Thanks!

Hello Cassie, 

 

Here are the demos that I made just now. 

 

Unformatted text:

See the Pen KKmrXKr by ianthesecond (@ianthesecond) on CodePen

 

The results that I'm looking for:

See the Pen WNjYZvg by ianthesecond (@ianthesecond) on CodePen

[OSUblake]

I think it might better to use actual elements to break up the lines instead of using raw text. So something like this.

 

See the Pen qBmQLpz by GreenSock (@GreenSock) on CodePen

 

[GreenSock]

You could also use a regular expression to do all that wrapping of <span> elements for you, add a class, and even adjust the duration based on how many characters are in each line so that you get a much more consistent speed: 

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

 

👍

[Cassie]

Ooh I like that solution @GreenSock 🙌

[IanTheSecond]

2 hours ago, GreenSock said:

You could also use a regular expression to do all that wrapping of <span> elements for you, add a class, and even adjust the duration based on how many characters are in each line so that you get a much more consistent speed: 

 

 

 

👍

 

Thank you for the suggestion! 

 

It is actually something that I have tried to do: putting a <br> tag in place of a "\n". However, the actual rawText contains multi-level indentations (or spaces) that gets treated as a single space rather than many individual ones by the TextPlugin between each 'word'. As you can see from the demos all of above. 

 

Is there a way for TextPlugin to not join the spaces? 

 

Once more, thank you for your reply!

[GreenSock]

On 8/9/2021 at 4:16 AM, IanTheSecond said:

Is there a way for TextPlugin to not join the spaces? 

 

Not currently, but I'm contemplating a "preserveSpaces: true" option for the next release. In the meantime, you could sorta trick it by swapping in a character that you'd never use in the text and then swap it out again in an onUpdate to get the spaces in there as &nbsp; like:

See the Pen LYyqGRg by GreenSock (@GreenSock) on CodePen

[IanTheSecond]

2 hours ago, GreenSock said:

Not currently, but I'm contemplating a "preserveSpaces: true" option for the next release. In the meantime, you could sorta trick it by swapping in a character that you'd never use in the text and then swap it out again in an onUpdate to get the spaces in there as &nbsp; like:

 

 

Thank you so much!! 

 

Your replies among others are appreciated! 10/10 customer service~