Animating Text

[00:00:00]
>> Sarah Drasner: Animating text and relative color values. There's this thing called Split Text that GreenSock offers. One cool thing is that it's not even dependent on TweenMax. So you could theoretically use Split Text, that plugin, without GreenSock. You could just use it with CSS. You could even use it with other animation libraries if you wanted to.

[00:00:24]
What it does is it splits the text apart and adds. It kind of wraps like a span and a div, the span or a div, depending on which one you want, around each one. Now you might say to yourself, well, I could do that with like split join and make that programmatically myself.

[00:00:40]
But, one thing that it does well is that it honors natural line breaks. And that's something that is harder to do because if you do the split join thing by yourself what will happen is that all characters the will kind of clomp together in one big group. So this and some of the kind of other libraries that do this out there don't do a good job of this part.

[00:01:04]
So that's the part that actually is really cool. There's a option to create auto incrementing classes, you can have it character 1, character 2, character 3. I wouldn't suggest adding that unless you actually need it, unless you need to target something in particular because it really beefs up the dam.

[00:01:21]
You're just adding tons of stuff. Into the DOM if you're not using it.
>> Sarah Drasner: So here's how it looks. We're gonna say foo or dancing tango monkey pants or whatever you wanna call it. And we're gonna make a new split text instance. We go grab the thing. We say type words or type lines or type cars for character.

[00:01:43]
And then this is that optional parameter to create classes. And whatever the class names is.
>> Sarah Drasner: So you can do stuff like this, which you should never do. Where you're animating a gradient and all these characters, and lines, and words. I'm breaking them all apart and using them all separately.

[00:02:05]
>> Sarah Drasner: Don't do this. That's way too much stuff for the DOM, especially animating gradients that way. Don't animate gradients that way, that's not very performant. Here's a better way of animating gradients, you can create a mask. You can create two different panels, make a mask of one, and then move it with transforms, and that's way more performant and will work better.

[00:02:27]
Than the way that I did in that pen. That was just a fun weekend exercise to throw things around. You can set all those transform perspective, keep it 3D and all that stuff. You can do that to text. So you can totally set all of that stuff to text.

[00:02:43]
That's how I was throwing it. Into your face and out of your face and stuff. I could have just, if I took that away, that stuff would have broken apart but it wouldn't have gotten huge and crazy and flipping all over the place. So first I define the types of split text you need.

[00:03:03]
Don't do all of these things. But you get words or characters and then I'm gonna store them. I have this helper function I use all the time, which I call "Totes Rando", and I just like to find a max and min of two different values so I just say totesRando, start here, go here.

[00:03:22]
I can always tell that someone is using my resources when I see this function in their code. I can do a totesRando search on CodePen, and find this function, it's a really nice helper function. And we can even randomize that position parameter too. So I can pass in Math.random and concatenate that with the time.

[00:03:49]
Since that's a string, can do all sorts of stuff with it, right? Like I can plot it, I can actually increment it along with the for loop if I wanted to. So, there's all sorts of stuff. Since we're in JavaScript, GreenSock's kind of beautifully dumb. It just allows you to pass in numbers and do whatever to it.

[00:04:07]
So it offers that kind of base thing and then you can manipulate it. Words can also illustrate a story. So I made this pen to kind of show how you would use words to illustrate a story. This is the thing I had to add the start to.

[00:04:57]
>> [MUSIC]

[00:05:27]
>> Sarah Drasner: So you don't have to be as heavy-handed as that. [LAUGH] where it's like turn it around and the word turns around. But basically I'm showing you that to make a point that you can have text move along with something else to kinda complement the motion that you're working with and animate the text along with to tell a story.

[00:05:48]
So that can be really nice. And if you remember that Shel Silvertein, the one before, we had it kind of animating on to the screen with a kind of a whimsy to kind of you know, emulate that playfulness that we're trying to get into the illustration as well.