From 1e3aa75d5e57bee815b2812a5a539599af20c3b6 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Thu, 9 Sep 2021 15:45:04 +0200
Subject: words fade in component

---
 frontend/site/projects/museum/views/petros.nav.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

(limited to 'frontend/site/projects/museum/views/petros.nav.js')

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>
-- 
cgit v1.2.3-70-g09d2