Creating your first animation

We're now ready to create our first animation. We're going to easily insert an element into our scene and animate that element from left to right, while it fades in over time. So first, let's create a new document, and utilize the default scene size. Then we'll go to our Elements button, and we'll insert a rectangle. Next, we'll go to the Metrics inspector. You can get there by hitting Cmd+3 or by clicking on the Ruler icon. You'll notice that the placement parameters are left 249 pixels and top 149 pixels, and to those of you who have worked with HTML and CSS, What that means is, that our scene has a reference point in the top left corner of 0x and 0y.

The top left corner of our rectangle element is 249 pixels from the left and 149 pixels from the top. Next, let's place our element off of the scene. At this point, the user will not be able to see this element until we animate it in from the left. Next, we want to record and able our scene. To do that, we'll click on the Record button and to animate this over time, we need to take our play head and position it somewhere in the future like two seconds into the future. And I can do that just by clicking the two on the timeline and the play head will follow.

Or, I could click over here in the current Time Indicator, and select the Seconds position, and type out 2. The current Time Indicator keeps track of the playhead in frames, seconds, and minutes, so this is yet another way to control the playhead's position at any given time. Let's now go over to the Element, and click and drag over to the right side of our scene. And then let it go. What you'll see immediately is an animation path, which lets us know that the recording has taken place. Also in the timeline you'll see an animation overview bar.

Essentially what that does, is keep track of all of the properties that have been affected. Down below in the Properties you'll see that Origin Left has been affected by two key frames. So what are key frames? Key frames are a notation of a chance that is taken at a particular point in time. We have affected the origien left property at one second and again at two seconds. And the software has calculated every point in between over those two seconds. So when we hit the Play button, we actually can see that the software has done the work of animating between these two points for us.

And if you have your Metrics Inspector open during your playback, you'll notice that the left parameter is being effected over the course of time. Next, let's effect the opacity, and to effect that, we'll go to the Element Inspector, or Cmd+4. Now, there are many other parameters here that we'll discuss in future videos, but right now, I'm interested in effecting the opacity, and I'm not in Record Mode currently, so I can just adjust the Opacity slider. And as you can see when I move the Opacity slider, our object is being effected in real time.

So let's jump back to the beginning by clicking the Jump to Beginning button on our shuttle controls and click the Record button to record enable our scene. So at zero seconds I want to dial the opacity down to 0%, and then I'm going to go to the current time indicator in the seconds position, and click on that digit. And hit two, next I'll dial the opacity slider up to 100% and then I'll hit Space bar to generate a preview in Hype itself. And as you can see it's animated both parameters over the course of two seconds. If we wanted to adjust the speed of both parameters simultaneously, we can go over to the Animation Overview bar and we can actually click and drag this in if we wanted to slow it down.

And then hit the Play button. We could make this happen over the course of, say, three seconds. We wanted to make it faster, we could grab the animation overview bar and adjust all parameters to, say, one and a half seconds. Finally, let's preview it in a browser by clicking on the Preview button or hitting Cmd > Option > Return. There are many properties that can be key framed and adjusted when creating an animation, and we've just affected two of them. We're well on our way to creating complex animation based on the techniques that we've just covered.