transitions

1 files changed, 61 insertions, 6 deletions

diff --git a/client/splash/face/index.js b/client/splash/face/index.js
index 4090a9fa..5e7792d3 100644
--- a/client/splash/face/index.js
+++ b/client/splash/face/index.js
@@ -1,3 +1,4 @@
+import oktween from '../../util/vendor/oktween'
 import { choice } from '../../util'
 import { faces, names } from './faces'
 import * as markers from './markers'
@@ -7,16 +8,70 @@ export function init() {
   const name = choice(names)
   const face = faces[name]
   markers.build(face)
-  mesh.load(name)
+  // mesh.load(name)
+  startAnimation()
 }
 
-export function load() {
+export function startAnimation() {
   const name = choice(names)
   const face = faces[name]
-  markers.swap(face)
-  // mesh.load(name)
+  mesh.remove()
+  mesh.load(name).then(meshes => {
+    meshes.wireframe.position.z -= 0.01
+    markers.swap(face)
+      .then({
+        from: { n: 0 },
+        to: { n: 1 },
+        duration: 500,
+        easing: oktween.easing.quad_in_out,
+        update: (obj) => {
+          meshes.blank.material.opacity = obj.n
+        },
+      })
+      .then({
+        from: { n: 0 },
+        to: { n: 1 },
+        duration: 500,
+        easing: oktween.easing.quad_in,
+        update: (obj) => {
+          meshes.blank.material.opacity = 1 - obj.n
+          meshes.solid.material.opacity = obj.n
+        },
+      })
+      .then({
+        from: { n: 0 },
+        to: { n: 1 },
+        delay: 500,
+        duration: 500,
+        easing: oktween.easing.quad_in_out,
+        update: (obj) => {
+          meshes.solid.material.opacity = 1 - obj.n
+          meshes.wireframe.material.opacity = obj.n
+        },
+        finished: () => {
+          mesh.removeMesh('solid')
+        }
+      })
+      .then({
+        from: { n: 1 },
+        to: { n: 0 },
+        delay: 5000,
+        duration: 500,
+        easing: oktween.easing.quad_in_out,
+        update: (obj) => {
+          meshes.wireframe.material.opacity = obj.n
+        },
+      })
+      .then({
+        obj: {},
+        duration: 0,
+        finished: () => {
+          startAnimation()
+        }
+      })
+  })
 }
 
-export function update() {
+// export function update() {
   // markers.update()
-}
+// }