3.6 Finishing Touches

Hello and welcome back. In this lesson, we're going to finish out our second project by animating in our solid block of text, after our outline text has finished animating. And we're gonna do this using a callback function inside this my SVG object that we created. So I want to pass a few properties into this drawsvg object, and the way we do that is inside the parentheses when we first create that object, we type a set of opening and closing curly brackets, just like we've seen before with green max or I'm sorry, green sock. And inside those curly brackets, were going to enter in a couple of properties. Now the first thing I want to do is I want to change the duration of this particular animation. And, we can do that using the duration property but keep in mind that this property is in milliseconds. So if we want it to last 1 second, we're going to type in 1000 because 1000 milliseconds equals 1 second. So now we'll watch the animation again. And when we see our text outlines, we'll see that it happens a little bit quicker, and I like that speed. So, after we do that, I'm gonna create another property here called callback. And this callback function that we're gonna create will be triggered whenever the current animation is finished or whenever this particular object finishes its animation. So we'll type callback; function() {}. Inside the curly brackets for that function, we can do whatever we want and what I wanna do is I want to animate in the solid text inside it, and remember we can see in our CSS that solid text has an ID of company. So, that's what we're going to point to. So, let's go back to our JavaScript and inside our callback function, we're gonna create a TweenMax animations. We'll do TweenMax.to, and we're gonna animate the item with an ID of company, so we'll put #company inside quotation marks there. Then we'll type comma space and let's say that we want this to be a slow fade in over the course of 3 seconds. And then we'll have our opening and closing curly brackets for that TweenNext.2animation and we'll put a semi-colon at the end of that line. And then inside the curly brackets for that animation, we're simply going to set the opacity equal to one. So it should fade in once our initial animations have done. So we see the dots fade in and move into place, we see our outlines animate, and then, sure enough, we see our solid text animate, and over and our animation is complete. So hopefully you've learned a lot from this particular project. It's really fun to randomize things, always like doing random animations. So this one's a lot of fun to do. And one of the cool things about it is you get a different effect every time you do it. So thank you for watching. Let's save our changes and we'll move on with the next project.