kreativzirkel

Include white-space in SplitText.chars

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.

Share this post


Link to post
Share on other sites

 

4z3o3GR.jpg

 

You can usually find whitespace in between words.

 

 

 

  • Like 7

Share this post


Link to post
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)*

Share this post


Link to post
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.

 

 

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

Share this post


Link to post
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({} ... )

Share this post


Link to post
Share on other sites

Nothing. It's just a dummy tween, but totally valid.

 

There are actually times when you may need to do that on a timeline, like to pad the end time.

Share this post


Link to post
Share on other sites

I also use dummy tweens to make timers...

// Calls your callback every 2 seconds
TweenMax.to({}, 2, { repeat: -1, onRepeat: myCallback });

 

  • Like 3

Share this post


Link to post
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

Share this post


Link to post
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!

 

 

Share this post


Link to post
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: 

https://codepen.io/GreenSock/pen/1618137479dfdcfcae2d4b0be865b511/?editors=0010

 

Does that help at all? 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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.