[TextPlugin and Format Preservation]

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

 

 

Thank you so much!! 

 

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

[TextPlugin and Format Preservation]

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!

[TextPlugin and Format Preservation]

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

[TextPlugin and Format Preservation]

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.