Using the GSAP TextPlugin
The TextPlugin tweens the text content of DOM elements. Replacing one character at a time (or one word at a time if you set the delimiter to " " [a space] or you can even use a custom delimiter). So when the tween is finished, the DOM element text has been completely replaced. This also means that if you rewind/restart the tween, the text will be reverted.
Video Transcript
00:00As we want to do something new from the library from the GSAP library in every
00:05chapter let's revisit the GSAP library. We'll take a break for a second from
00:09creating our slideshow and what I want to do is I want to create a really cool
00:12text effect. We've seen a little bit of text effects that we created ourselves
00:15in the first chapter but let's jump right in there and we're gonna see how
00:19do we leverage the text plugin which is an awesome plugin. Let's take a slight
00:24break from working on our initial slideshow. What I want to do is I want to
00:31create a really cool text animation and to do that I'm going to go back into
00:35GreenSock and this time around I want to incorporate the text plugin. So go ahead
00:40and just copy the text plugin and by the way just notice that at this stage
00:43we're now up to 16k and we're getting close to that tween max value and if we
00:48had tween max loaded up then we would oh that text doesn't come with the tween
00:53max oh well so it doesn't really relate to us this time around. So the text is an
00:58independent one if we're working with light or max we'd have to load it up on
01:02top of our regular loads. Alright so let's go ahead and use the text item
01:07I'm just gonna copy it really quickly and go back into my editor and once in
01:12the editor I'm just gonna go ahead and just add that plugin into our options
01:16and let's see how this plugin works it's a really cool plugin what I want
01:20you to do is just go out of our slideshow let's go back into our ready function
01:24we're not gonna put it as part of our slideshow we're not gonna build out a
01:27complete object really for that slideshow I'm gonna leave that to you as your
01:31homework assignment if you choose to do it. Alright so let's go ahead and
01:34continue by creating that tween creating a new tween light but this time around
01:39what I want to do is I want to tween our headline and I'm just gonna find
01:43our headline it's inside of the slide and inside of it our h2. Alright so I'm
01:47gonna go ahead and I'm just gonna create a new tween light I'm gonna to it
01:53and I'm gonna go ahead and define what do I want to tween which is our slide to
01:57h2 but I don't really want to do that what I actually want is the the first
02:02item of the h2 is not all of them so what I'm gonna do is I'm just gonna wrap
02:06that around in the jQuery so I could literally fetch all of them and then
02:11just say hey I just want to approach the first one okay so I'm gonna
02:14literally just define it as the first one next I'm gonna define how long I want my
02:19animation to be and I kind of want it to be four seconds next step is I'm gonna
02:24go ahead and write here text and in the text area I could put whatever value I
02:28want such as hello world and if I just run my application just like the saving
02:36this and going back into my application clicking on refresh we're gonna see
02:40something really cool and look how our copy is changing and getting rid of the
02:45old copy hello world although our copy is very different so there's a big change
02:49there so let's go ahead and make it even better what I'm gonna do is well
02:53better for me is basically I want to put here some marketing copy so what I'm
02:57gonna do is I'm gonna change my copy not to low world but to learning better
03:02is better and oh it was already learning better is better so we were
03:08gonna switch it to learning programming better is better so I'm gonna go ahead
03:12and add that word programming learning programming better is better and if I run
03:20it one more time this is kind of a really cool effect because then you're
03:22seeing how our copy is switching that copy off and replacing it with the new
03:26copy but our problem now is that our copy is way bigger than what we want it
03:31to be so what I'm we're gonna have to do is we're gonna have to switch our
03:35class as we're animating it in now to make that happen what we could do is
03:39very very simple is if we go into our code again and this time around notice
03:43how right now I have my text item and literally I'm just putting the value
03:48directly into it once I have more than one property that I want to set for the
03:52text plugin then I have to wrap that text plugin in an object and define
03:58that actual element to be our value so I'm just gonna go ahead and do that and
04:04now that I put my value basically proposition right here inside of the
04:09text it's still gonna work the same way but I'm gonna be able to add more
04:12parameters to it so if I just click your refresh you'll see that everything is
04:16still working the same besides this error that I have here that I didn't
04:19close it correctly so let me make sure that I'm closing it correctly because
04:23I'm missing here another close and this is the problem with with these
04:26smart editors that they're a little bit too smart that they sometimes delete
04:32what you type all right so here we go so now it's working just the way
04:36it did before perfect so it's time for us what I what I actually did already in
04:39advance as I set up for us the expanded head which is gonna be a class
04:45that will get our font to be just a little bit smaller from 37 it's gonna go
04:49down to 27 to make sure that we have more space there although oh actually
04:53when I'm looking at it our original was at 45 so let me just set here maybe
04:57let's put it here 35 all right so we're gonna set that to 35 and let's
05:03see how that works out for us if I go back into my code what I'm gonna do is
05:08I'm just gonna put here another property I'm just gonna break a line so you could
05:11see it more easily and the property that I want to add in here is a property
05:16that's called new class uppercase C and I could just literally descend inside of
05:22it the new class of the content that's coming in and by doing that if I save
05:26this and go back into my setup right here then we're gonna see that our
05:31content is gonna flow really really nicely into inside and this is working
05:36really well although I might want to make the font a little bit bigger so it's
05:40not such a big difference so if let me just do that really quickly so if I do
05:44that let me just notch it up from 35 maybe to 38 and let's see how that works
05:49for us and there we go and that I like that a lot so learning programming
05:55better is better now one thing that we could do o2 on top of this if we
05:59wanted to we could have set a class to our old element as well so it's all the
06:04class for our old element it's very similar what we would do is go back into
06:08our code into our JavaScript I'm gonna add another class this time around it's
06:12gonna be old class and I could set a class to it and I really need to find a
06:17class for that which basically just made the color a bit grayed out maybe
06:21even let's you know maybe we'll make it just really slightly grayed out not
06:25that much grayed out so it'll feel a little bit as if it's kind of like on its
06:29way out so if I save that run my application one more time we should get
06:34our content flowing in and it's just slightly more gray not very noticeable you
06:40see how it's a little bit more gray now if we wanted to I kind of like it when
06:43it's in not that's when it's a little bit subtle if we wanted to we could have
06:47made it nice and bold so we could see that difference very dramatically I
06:51personally prefer that less dramatic effect so I'm gonna keep it with that
06:55less dramatic because it's like those subtle small details that just make this
06:59really really wicked all right what I want to do next is I literally what I
07:03literally want to do is I want to add a callback so I'll know when this is over
07:07so what I'm gonna do next is I'm gonna basically create here an on complete
07:13function and I'm gonna call on on text complete and I'm gonna go ahead and
07:23create here a new function gonna call it on text complete and I am going to define
07:33it and I just want to see what is the this so let me just do a console and our
07:39this is not gonna be the this that we want it to be right it's not gonna be
07:42our tween itself although we can get access to it because there it's an event
07:46actually and so we would have we would be able to dig through it so let me just
07:50trace out that event as we're doing it at the same time so if we click on
07:54refresh here one more time we're gonna see that once our animation is complete
07:58we should be getting a callback that will output into our panel and I must
08:02have not typed something correctly on complete on text complete now that looks
08:10fine to me let me save it maybe I didn't save it let's give it one more
08:14time see what's going on here so this is definitely written correctly this is
08:26definitely gonna okay okay okay I see what's going on I actually put this
08:29inside of my text and the text doesn't have the complete we want to put this
08:32function call outside of that text area oopsie my bad so I'm gonna just comma
08:37that out you know that's all about organization the more organized you are
08:41the easier it is to find those issues that was a hard one to find so you you
08:45create that type of bug you'll be you might sit there and stare at it for quite
08:49a while all right so let me save that let's run it one more time and
08:52hopefully we're gonna get that trace this time around when the animation
08:55completes and we do perfect so we'll see that we're getting our object which
09:01the first object is the object and the other one here is undefined so which
09:08one is what right because it seems like that's the first one this is the second
09:13one so if I go back into my code here really quickly let me I'll make that
09:16animation a lot faster because we just want to see that output really quickly
09:19so I'm gonna go ahead here and just trace through this see if it's the
09:23distance coming back correctly let me see this refresh okay perfect so we're
09:29getting into this and if I trace out here the e let's see what we get in our
09:33e okay so the e is undefined so there's nothing coming through right now
09:40okay that makes sense but for our this let's see is that this really the this
09:45that we want it to be so let's go ahead here click on refresh so first of all
09:49we're getting an object that's great but what object is it do we know what it
09:53is is it something that is oh we're getting that we're our object target
09:57so we're gaining access access to the actual target itself by just typing here
10:02dot target so if I go and run this one more time we should in theory see
10:08our target which is absolutely awesome beautiful so that's our h2 so we don't
10:14need any extra parameters or anything of that nature to configure things up the
10:19next thing that I want to do is I want to approach this object and I literally
10:23what I want to do is I want to wrap our programming here into its own span
10:27because I want to create more animation so we'll have your like learning
10:30programming better is better and then learning marketing better is better but
10:33without all these changing only in this area changing each time kind of like a
10:37cool effect where we could kind of say learning JavaScript better is better
10:40learning whatever whatever concepts we want like that whatever someone's
10:44looking at this page it's continuously refreshing all right so that's a that
10:49will be our goal and how about we break our video into segments and we'll
10:53continue doing that in the next lesson so see you in the next lesson where we
10:56pimp out our text plugin