My goal is to put a few animations into the scene. When some people think of animations, they usually think of movement. You can certainly use the animation component to change the position of your elements, but you can animate all sorts of other things too. You could animate a box's rotation to give it a spin effect, or animate its scale to make it size up or down. You could animate something's opacity so that it fades in or out, or even animate its color!
animating position
I'll start by putting a hover effect on one of my boxes. The first step is adding the animation component to one of my box elements, which I do by putting the animation attribute on my box:
animation>
Now, the animation component is on my box, but when I refresh the page.... nothing changes! This is because the animation component needs to be configured. On its own like that, it doesn't really know what to do. To see all of the ways you can configure a component, look at the documentation on its Github page. Documentation is like the user guide for code. Good documentation is easy to understand and thorough. It's not always easy to write, and writing good documentation is a very different skill than writing good code.
Scroll down in the documentation for a bit and you'll see a list of the component's properties. These properties show you all of the ways you can configure the component so the animation does what you want. As always, don't be worried if you see stuff that doesn't make sense to you yet.
On the left you see the name of the property, in the middle you see a description of what the property does, and to the right of that you see the default value of the property. The default value is what the value of the property will be unless you give it a different one, so it's a good thing to pay attention to.
Check out the name of the first property listed above. This is a property named (kind of awkwardly) "property". You can use this property to set what it is that you're actually animating. There are lots of possibilities. I see in the description for it that it can be the name of a component. I know I want to animate the position to get my hover effect, so I'll use position as the value for this property. Look at how I do that:
animation="property: position" >
First I put the name of the property (which in this case...is property!), then a colon, then the value you want for the property. To set more than one property on a component, just separate them with a semi-colon. All of it goes inside the quotation marks, as usual.
My component now knows that I want to animate the position of my box, but it still doesn't know where I want to move it to. It doesn't have a target, a destination. Look through the available properties and you'll see a property called "to". You can use this property to set where the animation will animate to. An animation is just a transition from a beginning to an end.
I want to animate the box it so it moves up a little bit. Think about what you learned about position from Project 1 and how you might do that. Right now, my box has position="-1 1 -4.5". The first number (-1) tells us where the box is to the right or the left (the x axis), the second number (1) tells us where the box is up or down (the y axis), and the third number (-4.5) tells us where the box is forwards or backwards in the scene. So, to move the box up, we want to change that second number: the y value. I'll just add .5 just to that second number. keep the first and third numbers the same, and then make that new position the value of my to property:
animation="property: position; to: -1 1.5 -4.5" >
Now, I have two properties on my animation component: property and to. Notice how they are separated by a semi-colon. To review the formatting: inside the quotation marks you put the name of the property, a colon, and then the value you want to set for that property. If you're setting more than one property, separate them with semi-colons.
I experimented with a few other properties on the animation component. I noticed that the dur property (duration) let's you set how long the animation should last (in milliseconds), and that the loop property lets you set if you want the animation to repeat or not. Often, to figure something out I just play around with it and adjust its values to see how it affects the animation. At the end of some experimenting, I got my boxes to have this nice hover effect:
