Jump to content
Search Community

Include white-space in SplitText.chars

katerlouis test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Like in video games (like Zelda), I want to write text with a typewriter-esc effect.

 

I want to create a feel of "the spacebar is pressed aswell"

Unfortunately I cannot find an option to include white-space in the chars array.

 

I considered using TextPlugin for this, but

– I want a random factor in offset

– and more control, for example: slowing down words that are highlighted in a span

– and TextPlugin effectively writes the text and therefore longer words (in pixel look very often) start in one line and jump to another (not what I want)

 

 

PS: Any suggestion for a more elegant tweening option? 0-duration-tweens dont work unless you store the timeline and .progress(0) after it's creation.

See the Pen EmJvqm by katerlouis (@katerlouis) on CodePen

Link to comment
Share on other sites

As usual, your magic brings up questions in my head. :D 

 

1. tl.set({ }, { } .. – what's this first object? 

2. Why did you kick the offset variable? It would make the empty .set() obsolete.

3. Or does the empty .set() bring benefits I don't know about?

4. Why does forEach know about whiteSpace? Or: Why do the words know about whitespace? They don't know what comes after, do they? Would be great if you could explain this part of the code in detail.

Edit: whiteSpace is just the index-count. The if is there to prevent a Pause before the first word, right?

 

This works now :) Thanks for that.

But, as always with me, I'm thinking of reducing this extra effort and wonder why SplitText doesn't support an option to include white-space in the split.chars array? 

 

*Glimpsing to Carl and Jack, thinking: It's a plugin! Size cannot be such a heavy argument here 8)*

Link to comment
Share on other sites

1 hour ago, kreativzirkel said:

1. tl.set({ }, { } .. – what's this first object? 

2. Why did you kick the offset variable? It would make the empty .set() obsolete.

3. Or does the empty .set() bring benefits I don't know about?

 

I was setting something there to test out, and just forgot about removing it. You can replace it with the offset and it will work the same.

 

1 hour ago, kreativzirkel said:

4. Why does forEach know about whiteSpace? Or: Why do the words know about whitespace? They don't know what comes after, do they? Would be great if you could explain this part of the code in detail.

Edit: whiteSpace is just the index-count. The if is there to prevent a Pause before the first word, right?

 

Sounds like you got it. The params with forEach are in the opposite order of jQuery's each, so index is the 2nd param. And 0 will evaluate as false, so there won't be a pause at the start.

 

To be honest, it wasn't obvious at first where the spaces were even coming from. I couldn't see any spaces when I inspected the elements in my dev tools, so I made a version using canvas just to compare.

 

See the Pen d408d71e24a6ea3f17f2975f9687f526 by osublake (@osublake) on CodePen

 

Then it hit me. I was using " " in my canvas to detect white spaces, so I logged this out. 

console.log(quote.children[0].childNodes);

// [div, text, div, text, div, text, div, text, div, text, div, text, div, text, div, text]

 

Bam! Like I said, whitespaces are usually found in between words. Those whitespaces are text nodes, which won't show up as an element in your dev tools.

 

So to add a delay in between words, we need to start the loop with words instead of chars, and follow this pattern - word > chars from word > whitespace delay > word > chars from word > whitespace delay > word > chars from word > etc.

 

And yes, I would have to agree that there should be an option to have the whitespace wrapped in a div. I can definitely see how it could be useful.

 

  • Like 3
Link to comment
Share on other sites

 

13 minutes ago, OSUblake said:

 

And yes, I would have to agree that there should be an option to have the whitespace wrapped in a div. I can definitely see how it could be useful.

 

That's what I wanted to hear! :D

Carl, Jack, let's do this! I'd like to contribute in any way I can and you guys see fit :>

 

It's time for me to get productive instead of whining :D

 

 

PS 2Blake:

still curious what an object as target does ( .set({} ... )

Link to comment
Share on other sites

Glad you guys found some solutions. Impressive as usual, Blake.

 

As for adding that kind of option to SplitText, it's not a trivial thing otherwise I'd totally do it. I think you're the only person who has requested this, though I can see why it'd be handy in certain situations. If enough people request it, we'll certainly consider adding it down the road but for now we're focused on a few other features that will likely serve a lot more people (trying to be strategic about where we focus our limited resources). Cheers!

  • Like 3
Link to comment
Share on other sites

Do you guys have a function in the forums where people can add their vote or how do you imagine other people requesting the feature?

–––

 

I have another, mind boggling, question for you guys, that I really struggle with in general, when it comes to GSAP.

I don't even know how to put it best in order for you to understand, because I think once you've seen the Matrix (not literally :D) this is a very trivial question.

 

When you .add() functions to a timeline that return a tween or timeline, things in this function get done immediately, which in my case is not what I want.

Still, I need to add the function this way, because the timing of the rest of the timeline should take the duration of this new included timeline into account. And I don't know another way to do this than use .add()

 

So how would you guys approach adding multiple write-text-sequences in the same container?

 

PS: Look at the write-function, I added some sweet regExp to add pauses bookcode style 8)

Hello! [pause=.5] This is a nice Hat you have there!

 

See the Pen QgwXee by katerlouis (@katerlouis) on CodePen

 

Link to comment
Share on other sites

The problem is that you're literally swapping out content and performing other tasks in your write() method, so each time you call it you end up with different content at the end. I think what you'd probably want to do is swap in a container element each time with all that content in there, and then as a part of your timeline, you'd handle the toggling. So after your write() method is called, it reverts the content. That keeps everything clean. Here's a quick fork I whipped together: 

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

 

Does that help at all? 

Link to comment
Share on other sites

  • 7 months later...

Thought I'd bump this with a partial solution I just used.

 

I figured out a limited but simple way to address whitespace in a typewriter effect. Insert a character (capital I perhaps) where the wordbreak(s) are and wrap it(them) in a span,

 

In css target span and set to {visibility:hidden !important}. 

 

Note: because this eliminates the word break(s) it obviously reduces functionality, but if you aren't doing any word based animation and there aren't any linebreaks reflowing text or you can control linebreaks it works well.

  • Like 1
Link to comment
Share on other sites

  • 11 months later...

I think I have found a bit of a workaround since I absolutely need whitespace characters to be wrapped in a div with the rest of the text characters - I am using SplitText.

 

My solution: swap all whitespace characters out with ` ` before splitting text.

 

One thing to note is that it breaks being able to animate based on words but it doesn't seem like that is necessary for you or for me.

 

I will post more edits as I work with this potential solution.

Edited by pjwiebe
Spent more time with potential solution.
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...