GSAP Animations Timelines

[00:00:00]
>> Matias Gonzalez: So we animated one text before, but now I want to animate a bunch of stuff at once, so let's do that. I have this design ready and I want to reveal this text and then as I reveal this second word, I also want to animate this element here and fade this in and also animate this other word, and I want to synchronize everything.

[00:00:28]
So one way that I might approach that is to just use delays, so I will first animate one word and then I will wait and animate the second word, so let's actually go ahead and do that. So first I will need to do the split text, so I will do SplitText.create. I will target the title. And then on the split text, I will say that I want to wrap every word, so words and also every character, so chars.

[00:01:11]
For the word I'm going to, I want every word to have its own class name, so I will go ahead and say, word class. Sorry, wordClass. And I will say word. Here. If I go ahead and inspect, I can see that every word now should have its own class name. But I want to target every word independently, so I want to give every single word a different class name in this case.

[00:01:57]
So GSAP has a utility to do that, and we can just do plus plus, so this will assign an index to every single word that it finds. So we can see that the first element has a class of word-1 and the second word has a class of 2 and so on and so on so we can target individual elements manually.

[00:02:27]
We can also do the same for the characters if we need to. But let's just stick to the words for now. So I want to animate the first word in, so let's just say gsap.from and let's target our title. And the word. One and since I want to animate every letter, I'm going to go ahead and add a class name to every letter, so letter, sorry, charClass.

[00:03:10]
And I'm going to target the title, the first word, and every character inside of that specific title. Let's reveal the first letter by animating every letter down, so let's say from 100% on the y-axis, so we're going to start up. And then we'll have a duration of 0.5. And then I'm going to stagger every letter to have like a little typing effect, so stagger.

[00:03:58]
0.07, for example, like small, very small number and my favorite is ease: "circ.out". So with this I just added this animation for this first letter and I see that I have like I already can see the letters starting and what I want to achieve is the effect when you have a mask and the letters appear from that mask.

[00:04:26]
So GSAP already has a utility for that of course which is called mask. And I want to say to it like every character has its own mask. Chars, that's it. So what this will do is if the letter is outside of its container, it will not be visible, so I can just enter things into the scene by moving them around.

[00:05:02]
So let's quickly do the same for the second word. I'm going to go ahead and copy all of this. I want to achieve a different movement, so let's animate from the x-axis. And let's make it a little bit quicker. So I want my first word to fade in and then the second one, so my first approach might be just adding a delay to it, so let's say 0.9.

[00:05:43]
But then this would be too hard to time out, I will have to do a lot of trial and error to get the first timing right. Imagine if we have a hundred elements and then we want to change one thing and we need to go ahead and redo all of the delays, so the better way to actually achieve this would be to create a timeline.

[00:06:14]
So GSAP has this awesome thing called timelines. And what we can do with timelines is actually add multiple animations to one timeline and they will play one after the other, so let's add these two animations to the same timeline. And let's remove the delay because we already have that embedded.

[00:06:40]
So it will first play the first animation and then it will reveal the second one. But timelines have also utilities like if I want to move things out manually, so I want the second word to animate before the first one is finished so the second parameter, sorry it accepts a third parameter and what this will do is it will allow us to add relative movement on the timeline.

[00:07:20]
So I can say, hey, whatever you were to play, actually shift yourself 0.2 seconds before that, so it will start playing 0.2 seconds before this one ends. Let's actually make this bigger so we can see the difference. So before this first animation ends, 0.5 seconds actually, this one will start.

[00:07:57]
So let's actually go ahead and animate the final word. Let's just copy this and put word-3, and I will animate from the y-axis instead. So with this, we have our three words animated in. And let's now reveal this timeline thing here, what I want to do is to start, animate this like the width of this element.

[00:08:32]
And I want that animation to start at the same time of this word. So let's actually go ahead. The element has two divs, so this one first over here is the timeline-start and then this one is timeline-main. And then we have the little dot there. So I will first animate this timeline-start here.

[00:09:12]
So timeline.from. I'm going to target this first element and I'm going to say, hey, start completely shrunk on the y-axis, so the height is going to be zero. And then the timeline-main, the width is going to be 0. So what I want to do now is actually to make these two animations start exactly at the same time as this word.

[00:09:54]
So I could manually shift them around depending on their duration, but there is actually an easier way to do this and it's by using this utility, and what this will do is it will indicate that I want my animation to start at the same time as the previous animation so this animation is going to start at the same time as this second word and this one is going to start at the same time as this other animation, so they're both going to run at the same time as the word so I can go back and play the animation and as I can see they both start at the same time as this word.

[00:10:36]
This is getting a little harder to debug. I have to refresh every time and I have maybe to even record the screen and play it back, so there's actually a really cool plugin that they recently released for free, so let's actually use it and it's called the DevTools so I'm going to import the gsap DevTools.

[00:11:11]
And I'm going to add this plugin to GSAP, so gsap.registerPlugin. And the way this works is that I'm going to create a dev tool and I want to say what animation I want to debug so I want to say hey animation is going to be the timeline that we are creating. So if I go back and refresh, I'm going to see a little player being added in here.

[00:11:36]
So now what I can do is just manually rewind my application, and this is going to be super useful to understand what's happening in slow motion. I can also play them actually in slow motion and loop them so I can all the time play the animation, just get all of the timings and ease things right.

[00:12:06]
So with this here, let's actually debug what's happening. These two animations are being played at the same time, but I actually want this animation to start a little bit after this one starts. So what I can do is I can go back in here and actually add a little bit of time to it. So I want to start this animation 0.2 seconds after the previous one runs, so I'm going to add 0.2 seconds.

[00:12:49]
So getting used to this notation might take a little time, but once you learn it, it's really, really useful to compose things out. So I can refresh and I can see that it starts a little bit after this word. Okay, let's now go ahead and animate this little dot here. I just want it to appear and blink finally so I can see that it has a class name of our timeline-dot.

[00:13:39]
So let's go in here and I want to make it appear maybe at the same time as the second word so I'm going to say timeline.to in this case, sorry, from. I'm going to target these little dots and let's animate it to opacity 0. And actually what this will do is it will just fade this out. So I want to create a blink effect, so I actually want to repeat this animation a bunch of times so I can use the repeat property to do that.

[00:14:19]
So let's actually add 10 repetitions to it. And let's start with the previous one. And let's actually put a really, really fast timing, so duration is going to be something really, really small. Maybe it's 0.01. So if I play again, I see that it blinks too fast and what I want to do is every time the animation plays I want to wait some time so I can see the dot waiting after every repetition so there is a special property for that called repeatDelay.

[00:15:09]
And we can add some delay after every time this animation plays, so it will animate from opacity 1 to opacity 0, it's going to wait, then it's going to animate back into opacity 1, it's going to wait and all of that back and forth. To actually and one thing is that also we want this to be a yoyo, so yoyo: true.

[00:15:44]
If we don't add this property, it will animate our value and then it will reset and animate our value and then it will reset and animate your value and I actually want to do a ping pong, so with this property we can achieve that. Let's go again, and now we can see that we have a blink effect in here.