frame academy

Learn how to create immersive, cross-platform webxr sites.

project 2: animate your webxr site with components

Part 2: building your own animations with html

I hope you also took a crack at the challenge for Part 1! If you do the challenges, you'll be building your own immersive website that works on desktop, mobile, or VR.

Remember that if you have questions or want to share your work-in-progress, feel free to ask in our online community, or on Twitter with the hashtag #frameacademy

import the animation component

In Part 1, we imported the animation-mixer component into our projects. That component let me play an animation that was already included with a 3D model I found on Sketchfab. Let's go further!

What I'm going to show you now is how you can write your own simple animation with the animation component....just by using simple HTML!

First, just as you did with the animation-mixer component, bring the animation component into your project by putting this script element in your head element:

<script src="https://unpkg.com/aframe-animation-component@^5.1.2/dist/aframe-animation-component.min.js"></script>

Once you do that, you can immediately start using the animation component in your project - sweet.

I'm going to start off with a fresh project with just a few boxes and a floor. Feel free to copy and paste this code in your own project if you'd like to follow my example.

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:

<a-box position="-2.1 1.3 -4.5" rotation="0 45 0" color="#4CC3D9" depth=".2" width="2" animation></a-box>

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:

<a-box position="-1 1 -4.5" rotation="0 45 0" color="#4CC3D9" depth=".2" width="2" animation="property: position"  ></a-box>

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:

<a-box position="-1 1 -4.5" rotation="0 45 0" color="#4CC3D9" depth=".2" width="2" animation="property: position; to: -1 1.5 -4.5"  ></a-box>

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:

going beyond position

Let's say I want to animate one of my boxes so that beyond just hovering up and down, it also spins around. To do this, I'll need to animate its rotation. Thankfully, you can put as many animation components as you want on an element. Just give the components different names with an underscore, and then make sure you set the property value to rotation (or whatever it is you want to animate). To see what I mean, here I am setting up three different animation components that I'll put on the same box. The first one animates position, the second one animates rotation, and the third one animates color!

animation_hover="property: position; dur: 2000; loop: true; dir: alternate; to: -2.1 1.5 -4.5;"      
animation_spin="property: rotation; dur: 12000; loop: true; to: 0 1490 0;"      
animation_color="property: color; type: color; dur:1000; loop: true; dir: alternate; to: #faaf52"    


You can name the different animation components whatever you want - I try to use names that let me quickly understand what the animation is doing.

I added a few more shapes to my scene, and set a fade animation on one of them.  Check out how the position, rotation, and color of my boxes are all animated now!

challenge #2: create some animations

Sweet! Now that you've seen some examples of animations in action, I'd like you to try setting up a few animations in your own project. Feel free to tinker with the different properties you can set on the animation component by exploring the property list on the documentation page for the component.

If you want to, see if you can set multiple animations on the same element.

In the next part, we'll see how to animate the camera!

< go back to part #1
playing animations on 3d models
Move on to part #3 >
animating the camera