VR Lesson 3

UT PREP CS Lesson Plan 3

A-Frame Animations and VR Project Creation

Sponsored by Mozilla Gigabit


Standards Addressed: 


Time: 75 minutes

CS Objective(s):

  1. Students will be able to add animations to their VR space
  2. Students will be able to analyze a problem and identify and define the computing requirements appropriate to its solution
  3. Students will be able to design, implement, and evaluate a computer-based system, process, or program to meet desired needs within realistic constraints




  • VR Headset
  • Phone
  • Computer
  • Timer

Background Information:

-Code academy


Code Academy has lessons over html basics that will help you with the syntax of the language. If you have trouble understanding why we write the way we do or you want to be able to help kids faster this is recommended.

-aframe guide





A frame has its own tutorial that will teach you the basics of syntax and the concepts of inserting and manipulating entities. This is required as you will need to learn these tools to teach these lessons and be helpful in the classroom. Use codepen throughout this tutorial to do the actual coding.

-aframe primitives



These will be used extensively in the lessons so you need to be familiar with them. Please read through each. This lesson focuses on animations as well as the previously covered topics. Make sure to understand each animation type to facilitate with this lesson. An example animation can be added to your previous example outside of class and shown in class for demonstration.



Engage 1 (10  min):

Last time, we learned the basics about HTML and how to use them to add shapes to our VR space. Today, before we continue working on our project, we are going to learn how to animate those objects.

Pull up your project with an animated attribute and show them the code. For our example we will be using a bouncing basketball. This is the link. https://thimbleprojects.org/bandreasv/227682/

The tag for an animation is <a-animation></animation>. In here, I animated my basketball. Where did I place the animation tag in relation to my sphere?

“It is between the opening and closing tag of the sphere”

That’s right!. The animation tags go in between the opening and the closing tag of the shape you want to animate. What attributes do you see on the animation tag?

“Attribute, From, Dur, To, Direction, Repeat”

  • Attribute is the attribute that you would like to animate. What attribute am I animating?
  • Position!
  • From is the initial value of the attribute you are animating.
  • To is the final value you want to the attribute to be.
  • Dur is how long you want the animation to last in milliseconds. How many milliseconds are in a second? 1000!
  • Repeat is how many times you want it to do the animation. You can put a number indicating how many times you want it to do the animation. Or type the word infinite to do it forever.
  • Direction. There are 4 possible values for direction. Normal. Reverse. Alternate. and Alternate-reverse.

Normal direction means the attribute changes from the from attribute to the to attribute values.

Reverse direction means the attribute changes from the to attribute to the from attribute values.

Alternate direction means the first time it does a normal direction and then a reverse direction and alternates between the two.

What do you think alternate-reverse does?

It starts with a reverse direction and then does normal and direction alternates between the two!

Now open up your project.

With your partner. Choose a shape that you already have on your screen to animate.

Give them about 5 minutes to do this. Leave your example up on the screen as reference.

Ok. What were some of the things you animated? Go around the pairs so that other groups get ideas for their projects.

Explore part 1 (60 min):

For the rest of the class you will work on your project. On the screen you will see a timer. Every 10 minutes. The driver and the navigator will change rolls. If you have any questions on how to do something, ask the team next to you. If you don’t know the answer, raise your hand and a teacher will come help you.

Remember to test your code on your phone every 10 minutes or so. Make sure to click on Unpublish button and then Publish again to save your work. It will always give you a different URL link. Also use the A-Frame website as reference of tags and attributes you can utilize.

Walk around the classroom answering student questions.

Elaborate (5 min):

If kids are interested in doing different kinds of animation demonstrate the below

So there are two secret kinds of animation that are scaling and rotation. They’re inserted the same way as moving is, right inside the variable you want to animate. There is very little to difference between the two codes, I’ve posted both below to display the similarities.


<a-animation     attribute="rotation"     from="20 0 0"     to="20 360 0"     direction="alternate"     dur="4000"     repeat="indefinite"     easing="ease">   </a-animation>


<a-animation     attribute="scale"     to="1 0.5 1"     direction="alternate"     dur="2000"     repeat="indefinite"     easing="linear">   </a-animation>

Try experimenting with the values to see what each do.

Explain (5 min):

Come back together as a class.

Ok. You should be close to finishing on your project. Next class you will only have 20 minutes to make final touchups. What were some challenges that you faced? How did you solve them?

Go around the class with different teams asking them that question. This might help other students that are struggling with the same problem.

HW: They can go home and continue working on their project at home.