diff --git a/src/styles.scss b/src/styles.scss
index 5303e8f..e79c07a 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -482,24 +482,44 @@ hr {
 .about-scroll-anim-enabled.about-scroll-anim-ready .story-copy,
 .about-scroll-anim-enabled.about-scroll-anim-ready .story-detail {
   opacity: 1;
-  transition:
-    opacity 520ms ease,
-    transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1);
-  will-change: opacity, transform;
-}
-
-.about-scroll-anim-enabled.about-scroll-anim-ready .story-copy {
-  transform: translate3d(0, 10px, 0);
-}
-
-.about-scroll-anim-enabled.about-scroll-anim-ready .story-detail {
-  transform: translate3d(0, 10px, 0);
+  transform: translate3d(0, 0, 0);
 }
 
 .about-scroll-anim-enabled.about-scroll-anim-ready.about-scroll-in-view .story-copy,
 .about-scroll-anim-enabled.about-scroll-anim-ready.about-scroll-in-view .story-detail {
-  opacity: 1;
-  transform: translate3d(0, 0, 0);
+  animation-duration: 680ms;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.16, 0.84, 0.24, 1);
+}
+
+.about-scroll-anim-enabled.about-scroll-anim-ready.about-scroll-in-view .story-copy {
+  animation-name: about-copy-reveal;
+}
+
+.about-scroll-anim-enabled.about-scroll-anim-ready.about-scroll-in-view .story-detail {
+  animation-name: about-detail-reveal;
+}
+
+@keyframes about-copy-reveal {
+  from {
+    opacity: 0.12;
+    transform: translate3d(-44px, 26px, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes about-detail-reveal {
+  from {
+    opacity: 0.12;
+    transform: translate3d(44px, 26px, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
 }
 
 .story-copy p:first-child,