2 files changed, 17 insertions, 2 deletions
diff --git a/frontend/site/projects/museum/views/titles.css b/frontend/site/projects/museum/views/titles.css
index 6bfc8b3..a2f9868 100644
--- a/frontend/site/projects/museum/views/titles.css
+++ b/frontend/site/projects/museum/views/titles.css
@@ -42,7 +42,7 @@
   text-shadow: 0px 2px 6px rgba(0,0,0,0.5);
   opacity: 0;
   pointer-events: none;
-  transition: opacity 0.3s;
+  transition: opacity 0.5s;
 }
 .charles-text.visible {
   opacity: 1;
diff --git a/frontend/site/projects/museum/views/titles.overlay.js b/frontend/site/projects/museum/views/titles.overlay.js
index 3927152..373d031 100644
--- a/frontend/site/projects/museum/views/titles.overlay.js
+++ b/frontend/site/projects/museum/views/titles.overlay.js
@@ -26,6 +26,7 @@ class TitlesOverlay extends Component {
     super(props)
     this.titleRef = React.createRef()
     this.headphonesRef = React.createRef()
+    this.textRef = React.createRef()
     this.showTitle = this.showTitle.bind(this)
     this.showHeadphones = this.showHeadphones.bind(this)
     this.advance = this.advance.bind(this)
@@ -113,7 +114,20 @@ class TitlesOverlay extends Component {
   }
 
   advance(){
-    history.push(`/last-museum/${this.state.content.next}/`)
+    if (this.advancing === this.state.content.next) return
+    this.advancing = this.state.content.next
+    this.textRef.current.classList.remove("visible")
+    Array.from(document.querySelectorAll("video")).forEach(video => {
+      video.style.transition = "opacity 0.5s"
+    })
+    setTimeout(() => {
+      Array.from(document.querySelectorAll("video")).forEach(video => {
+        video.style.opacity = 0
+      })
+    }, 500)
+    setTimeout(() => {
+      history.push(`/last-museum/${this.state.content.next}/`)
+    }, 1000)
   }
 
   render() {
@@ -135,6 +149,7 @@ class TitlesOverlay extends Component {
           {this.state.content.title}
         </div>
         <div
+          ref={this.textRef}
           className={showText ? "charles-text visible" : "charles-text"}
           style={{
             cursor: `url(${this.state.content.cursor}) 50 50, pointer`