diff --git a/package-lock.json b/package-lock.json
index ed18ec7..1082bc7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -81,6 +81,14 @@
         "webvr-polyfill": "^0.10.5"
       }
     },
+    "aframe-animation-component": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/aframe-animation-component/-/aframe-animation-component-5.1.1.tgz",
+      "integrity": "sha512-EO049MCScYCUbzqsNqw4tiRjp781BOuySWitElarH4ysH+orlb7vxEgfwY8fgShwBgAUdY9vtSTc6jzjJwy1kA==",
+      "requires": {
+        "animejs": "2.2.0"
+      }
+    },
     "aframe-animation-timeline-component": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/aframe-animation-timeline-component/-/aframe-animation-timeline-component-1.5.0.tgz",
@@ -146,9 +154,9 @@
       "integrity": "sha1-+w+EQdrdHosRzCRRK6eqaS1iK+E="
     },
     "aframe-state-component": {
-      "version": "5.0.0-beta2",
-      "resolved": "https://registry.npmjs.org/aframe-state-component/-/aframe-state-component-5.0.0-beta2.tgz",
-      "integrity": "sha512-Ioz179I49pfew4a3cHpr31q00QfQW9cSI6uni2kwqfgSlO8FsDR91HtQamzJbGVLGPCHYAYqBvPy+A9fvQaVzg=="
+      "version": "5.0.0-beta4",
+      "resolved": "https://registry.npmjs.org/aframe-state-component/-/aframe-state-component-5.0.0-beta4.tgz",
+      "integrity": "sha512-wcodZ5XP73/95K4ABxW6RWOHlIPv6HNk7oNx0M6lChU5FH4Q9NIlETM0OwDECYSlf5bKTSRkGyrXE+2w75YUCQ=="
     },
     "aframe-super-keyboard": {
       "version": "2.0.2",
@@ -277,6 +285,11 @@
       "resolved": "https://registry.npmjs.org/an-array/-/an-array-1.0.0.tgz",
       "integrity": "sha1-wSWlu4JXd4419LT2qpx9D6nkJmU="
     },
+    "animejs": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/animejs/-/animejs-2.2.0.tgz",
+      "integrity": "sha1-Ne79/FNbgZScnLBvCz5gwC5v3IA="
+    },
     "ansi-escapes": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-1.4.0.tgz",
diff --git a/package.json b/package.json
index 5ed74ed..431214e 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "aframe-particle-system-component": "^1.0.11",
     "aframe-proxy-event-component": "^1.1.1",
     "aframe-slice9-component": "^1.0.0",
-    "aframe-state-component": "^5.0.0-beta3",
+    "aframe-state-component": "^5.0.0-beta4",
     "aframe-super-keyboard": "2.0.2",
     "algoliasearch": "^3.29.0",
     "ansi-html": "0.0.7",
diff --git a/src/templates/menu.html b/src/templates/menu.html
index 249d806..c063d89 100644
--- a/src/templates/menu.html
+++ b/src/templates/menu.html
@@ -1,7 +1,7 @@
 <!-- Macro is a templating function. It is rendered into the HTML below with searchResults(). -->
 {% macro searchResults () %}
   <a-entity id="searchResultList"
-            bind-for="for: item; in: searchResultsPage; key: id; template: #searchResultTemplate; updateInPlace: true"
+            bind-for="for: item; in: searchResultsPage; key: id; template: #searchResultTemplate; updateInPlace: true; pool: 6"
             layout="type: box; columns: 1; marginRow: -0.2"
             search-result-list
             position="0 0.644 0"></a-entity>
@@ -101,34 +101,35 @@
     animation__toleft="property: position;  to: 0.195 0.18 0; dur: 200; easing: easeOutCubic; startEvents: menuchallengeselect"
     animation__toright="property: position; to: 0.35 0.18 0; dur: 200; easing: easeOutCubic; startEvents: menuback">
 
-    <a-entity id="divisorB" 
-      position="0.218 -0.179 -0.003" 
-      geometry="primitive:plane; height:1.17; width:0.005" 
+    <a-entity id="divisorB"
+      position="0.218 -0.179 -0.003"
+      geometry="primitive: plane; height: 1.17; width: 0.005"
       material="shader: flat; color: #fff; transparent: true; opacity: 0.0"
       animation__fadein ="property: material.opacity; to: 1.0; startEvents: menuchallengeselect; dur: 200"
       animation__fadeout="property: material.opacity; to: 0.0; startEvents: menuback; dur: 200"
       ></a-entity>
 
     <a-entity id="menuDifficulties"
-      bind-for="for: difficulty; in: menuDifficulties"
+      bind-for="for: item; in: menuDifficulties; updateInPlace: true; pool: 5"
       bind__visible="!!menuSelectedChallenge.id"
       layout="type: box; columns: 1; marginRow: -0.2; orderAttribute: data-bind-for-key"
       menu-difficulty-select>
       {% raw %}
       <template>
-        <a-entity class="difficultyOption" data-difficulty="{{ difficulty }}">
+        <!-- Item is a string representing the difficulty. -->
+        <a-entity class="difficultyOption" bind-item__data-difficulty="item">
           <a-entity class="difficultyBackground"
-              bind__active-color="active: menuSelectedChallenge.difficulty === '{{ difficulty }}'"
-              bind__animation__mouseenter="enabled: menuSelectedChallenge.difficulty !== '{{ difficulty }}'"
-              bind__animation__mouseleave="enabled: menuSelectedChallenge.difficulty !== '{{ difficulty }}'"
+              bind-item__active-color="active: menuSelectedChallenge.difficulty === item"
+              bind-item__animation__mouseenter="enabled: menuSelectedChallenge.difficulty !== item"
+              bind-item__animation__mouseleave="enabled: menuSelectedChallenge.difficulty !== item"
+              bind-toggle__raycastable="menu.active && !!menuSelectedChallenge.id && menuSelectedChallenge.difficulty !== item"
               geometry="primitive: plane; width: 0.4; height: 0.2"
               material="shader: flat; color: #067197; transparent: true; opacity: 0.0"
               position="0 -0.005 0"
               play-sound="event: mouseenter; sound: #hoverSound; volume: 0.03"
               animation__mouseenter="property: components.material.material.opacity; to: 1.0; startEvents: mouseenter; pauseEvents: mouseleave; dur: 150"
-              animation__mouseleave="property: components.material.material.opacity; to: 0.0; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"
-              bind-toggle__raycastable="menu.active && !!menuSelectedChallenge.id && menuSelectedChallenge.difficulty !== '{{ difficulty }}'"></a-entity>
-          <a-entity mixin="textFont" bind__active-text-color="active: menuSelectedChallenge.difficulty === '{{ difficulty }}'" active-text-color="color: #333" text-uppercase="value: {{ difficulty }}" text="wrapCount: 28; align: center; color: #FAFAFA" position="0 -0.057 0.001"></a-entity>
+              animation__mouseleave="property: components.material.material.opacity; to: 0.0; startEvents: mouseleave; pauseEvents: mouseenter; dur: 150"></a-entity>
+          <a-entity class="difficultyText" mixin="textFont" bind-item__active-text-color="active: menuSelectedChallenge.difficulty === item" active-text-color="color: #333" bind-item__text-uppercase="value: item" text="wrapCount: 28; align: center; color: #FAFAFA" position="0 -0.057 0.001"></a-entity>
         </a-entity>
       </template>
     {% endraw %}
@@ -147,11 +148,11 @@
       <a-entity class="menuSelectedChallengeSongAuthor" position="0 0.058 0"
         mixin="textFont" text="wrapCount: 40; align: center; color: #FF185B" bind__text="value: menuSelectedChallenge.songSubName"></a-entity>
       <a-entity class="menuSelectedChallengeSongName" position="0 -0.031 0"
-        mixin="textFont" text="align: center; color: #FF185B; wrapCount: 22; baseline: top; lineHeight: 36; width: 0.81" 
+        mixin="textFont" text="align: center; color: #FF185B; wrapCount: 22; baseline: top; lineHeight: 36; width: 0.81"
         bind__text="value: menuSelectedChallenge.songName"></a-entity>
       <a-entity class="menuSelectedChallengeAuthor" position="0 -0.257 0"
         mixin="textFont" text="align: center; color: #FFF; wrapCount: 33; width: 0.78; baseline: bottom" bind__text="value: menuSelectedChallenge.author"></a-entity>
-      <a-entity class="menuSelectedChallengeDownloads" position="0 -0.325 0" 
+      <a-entity class="menuSelectedChallengeDownloads" position="0 -0.325 0"
         mixin="textFont" text="align: center; color: #FFF; wrapCount: 35" bind__text="value: menuSelectedChallenge.downloadsText"></a-entity>
     </a-entity>