Animating with JavaScript

[00:00:00]
>> Matias Gonzalez: So we will start by learning one animation library called GSAP. GSAP is a really, really useful library to add animations to our website and tie those animations to the scroll. It's been around forever, and it has a lot of utilities that we can use. So how does GSAP work? Let's start by animating this text in.

[00:00:29]
So we have our H1 here, and I'm going to go ahead and add a useEffect. And what I want to do is to grab this element and animate from an opacity 0 into opacity 1. Let's start with something real simple, so I can do GSAP dot from and I can just grab my class here to select it using this class. And then I would say opacity, 0.

[00:01:13]
So the way this works is, oh, I need to import GSAP first. So the way this works is that GSAP is going to grab our object and it says hey what's the current opacity of this object is 1 by default so what we'll do is we said hey I want to animate this object from opacity zero into its current state. So, for example, let's do a different thing, let's do X.

[00:01:57]
To 100 It will animate from X to 100, so to the default position, so it will start to the right and then it will animate into its default state. What happens if I want to animate something to some value, so I want to start in its default value and then I want to like animate it to X 200, so I just can use GSAP 2.

[00:02:27]
So this way I can tell GSAP, hey, grab this element and change its default value to this number. So when I load, yeah, it will start in its default position and then it will move into X 200. There is a way to tell GSAP, hey, animate from this value to this value and don't, it doesn't really care it's default value and it's from 2.

[00:02:58]
So with from 2 we can actually specify I want to animate from X minus 200 into X 200, so it will set the first value to this and then it will animate into this other value. So if we go ahead and reload, we can see how it's like moving from the first value into the second one. This is awesome, but we have our first performance issue here and is that, as we know when we useEffect we usually have to clean up whatever we are doing so.

[00:03:39]
We can return a function. This function is going to be executed whenever this component gets unmounted, so if I get away from this page, this function is going to run. And why I'm pointing this out is because let's do for example on change. On update sorry. What this function is doing is that every time it GSAP updates the value, it will run this callback function so I can just debug something so.

[00:04:16]
I'm going to just log update here. So if I go back in here and open the console and refresh, I can see how it's like running the update callback. Let's actually make this animation way longer by adding a duration of 10 seconds. And let's actually go ahead and start the animation and get away from this into another experiment so I'm in a different page and I can see that the update is still running, so my animation didn't stop because I am out of the component it's like still running there so the first thing that I want to actually do is to clean up this animation.

[00:05:14]
I want to stop it, so. By the way, every GSAP animation is called a tween, so it's animated from one value to another, that's one tween, so we can grab this tween and just revert it. And what this will do is it will kill the animation and it will reset every value to its default state. So if I go ahead and enter again I will see that as soon as I leave the page it will stop the animation and if I enter back it will play again.

[00:05:59]
So as we saw, we can grab any CSS selector here and we can animate values from that selector opacity, position, there are a lot of options that we can animate we can even animate CSS variables and attributes. But we might find a little problem scaling this if I'm just grabbing things by class names because let's say I have another div somewhere else on our website that has this title class name so I'm going to add another div and put the class name, title.

[00:06:46]
And what it will happen is that if I refresh, I will see that both titles get animated and maybe that's intentional, but maybe that's not what we want to do so we need to tell GSAP, hey, I just want to animate things inside of this div. I don't want you to look for every single component that has a class of title.

[00:07:13]
So there is an easy way to do that. Your first thought would be, OK, maybe I can add like a more specific class name, but then if I want to reuse that component in another place, then I will have another component with that class name, and then we'll start like using IDs and like playing around with a lot of things and that gets like harder and harder to solve.

[00:07:34]
There is an easier way to solve this problem and it's using something called context, so delete this update. What I'm going to do is I'm going to create a GSAP context, so const context. And I'm going to move my animation inside of this context. So the way context works is we first pass a callback function and the second argument is going to be a reference to an element.

[00:08:33]
So I'm going to create a React reference. No, let's save it. I'm going to connect my reference into my container, so I only want to look for this class name inside of this div. So I'm going to connect the reference in here. And then we're going to use that reference as the second argument for our context. So what's going to happen here is that GSAP is only going to look for the title inside of this container, it's not going to look for titles all over our website.

[00:09:11]
So I can go ahead and restart and I can see that the here label's not moving and it's only moving my title. And again, similarly to how we reverted the first tween, we can also revert the entire context. So we can just call context of revert in order to clean up our animations and this will clean up every animation that we declare in this inside of this callback function so we can animate multiple things.

[00:09:49]
And all of these animations are going to be first targeted inside of my container and second are going to be reverted when I revert this context. This is a little bit too much of a boilerplate every time we want to use GSAP on React, so. What they actually did already was create a hook that does this for us and it's called useGSAP.

[00:10:17]
So we can just import that and this works exactly the same, the first argument is going to be our callback function where we can create our animations. And the second argument is going to set a bunch of parameters. And it's going to set a scope. So we can actually put the reference to my container into the scope.

[00:10:53]
And it's going to work exactly as this useEffect. But it's like already abstracted for us. So if I go ahead and reset. Again this paragraph is not moving and the title is moving only. And it's also going to revert our animations whenever we get away from the page. Let's try to come up with an animation that's a little bit more interesting and play with this so we can animate on the Y axis, maybe let's actually remove the duration.

[00:11:31]
And add an easing. So if you haven't used easings before, easings are a way to edit the timing of our animations. You probably have used them if you use CSS transitions, for example, you can like ease in or ease out. GSAP has a lot of functions of easing that we can use and try. There is a website on the web that we can use to like preview different easings.

[00:12:08]
It's called easings.net. And if we hover over any value we can see how like it will, that particular easing could work. So let's grab one ease from here. And I'm going to use the circ dot out because I like it. And let's also animate the opacity, so. I'm going to start my element with opacity 0 and translate it and then I'm going to animate that element in.

[00:12:46]
So if I refresh, I can see how it's like appearing and sometimes we see some websites that like make every letter appear one by one. And we might be tempted by like splitting every letter manually and like animate all of those, one by one, but GSAP already has a really cool utility to do that for us, it's called SplitText.

[00:13:13]
The way SplitText works is that it's going to grab our element and it's going to grab every letter and it's going to wrap it over a div so we can like animate every element independently. So I'm going to import the SplitText plugin. And I need to tell GSAP that I want to use this plugin. GSAP has a bunch of plugins that are really, really useful to do different stuff, so GSAP register plugin.

[00:13:59]
And I'm going to connect my SplitText plugin to GSAP. And then let's go ahead and use it so. I'm going to say SplitText dot create. Nope. And the first thing that it wants is a selector similar to this one, so I'm going to grab the title and split the text. If I go ahead and open the Chrome dev tools now I can see that it created a bunch of divs covering every single letter.

[00:14:42]
And it also has a lot of different options so we can do chars, we can say hey split every character but also split over every word. We can also use this to add a class name that I want to every character. So I'm going to put the class name of letter. And if I go ahead and redo in here I can see that every letter now has the class of letter.

[00:15:15]
So what I can do now is grab every letter that's inside of my title and animate that in. So if I refresh I'm going to see that nothing really changed because GSAP is animating every letter at the same time even though it's animating them independently. So the way to tell GSAP, hey, if you find multiple matches to the CSS selector actually stagger them, it's actually with the stagger property so we can say stagger.

[00:15:52]
And we can pass like a really, really small value to it. And what it will do is it will animate every element with a little delay after each other. So we can create like a more interesting reveal to our elements. This could be applied not only to text but to different cards and everything.