words fade in component

1 files changed, 6 insertions, 1 deletions

diff --git a/frontend/site/projects/museum/views/petros.nav.js b/frontend/site/projects/museum/views/petros.nav.js
index db7737b..fda1bb8 100644
--- a/frontend/site/projects/museum/views/petros.nav.js
+++ b/frontend/site/projects/museum/views/petros.nav.js
@@ -12,6 +12,8 @@ import { preloadImage } from "app/utils"
 import actions from "site/actions"
 import { generateTransform } from 'app/views/tile/tile.utils'
 
+import PetrosText from "./petros.text"
+
 const RESET_STATE = {
   ready: false,
   hovering: null,
@@ -57,6 +59,8 @@ const TEXT_HIDE_TIMEOUT = 15000 *FASTFORWARD
 
 const SUBTITLE_COUNT = 12
 
+const TIME_PER_WORD = 250
+
 class PetrosNav extends Component {
   state = {
     ...RESET_STATE,
@@ -68,6 +72,7 @@ class PetrosNav extends Component {
     this.handleEnter = this.handleEnter.bind(this)
     this.handleLeave = this.handleLeave.bind(this)
     this.handleClickText = this.handleClickText.bind(this)
+    this.textComplete = this.textComplete.bind(this)
     this.navigate = this.navigate.bind(this)
   }
 
@@ -276,7 +281,7 @@ class PetrosNav extends Component {
         )}
         {!textActive && text && (
           <div className="petros-subtitle" style={{ opacity: textOpacity }}>
-            {text}
+            <PetrosText ready={textOpacity} text={text} timePerWord={TIME_PER_WORD} onComplete={this.textComplete} />
           </div>
         )}
       </div>