Cleaned up Element Scroll Fader a touch, this function can do a lot better though..

public/objects/animation/fade/ElementScrollFader.jsx

@@ -23,7 +23,9 @@
 
 import React from 'react';
 
-class ElementScrollFader extends React.Component {
+import Styles from './ElementScrollFader.scss';
+
+export default class ElementScrollFader extends React.Component {
   constructor(props) {
     super(props);
 
@@ -105,25 +107,17 @@ class ElementScrollFader extends React.Component {
   }
 
   render() {
-    let clazz = "o-element-scroll-fader";
+    let newProps = {...this.props};
+    let { from, visible, waiting, className } = this.props;
 
-    if(this.props.from) {
-      clazz += " from-" + this.props.from
-    } else {
-      clazz += " from-top";
-    }
-    if(this.state.visible || this.state.waiting) {
-      clazz += " is-visible";
-    }
+    from = from || "top";
 
-    if(this.props.className) clazz += " " + this.props.className;
+    ["from","visible","waiting"].forEach(e => delete newProps[e]);
 
-    return (
-      <div className={ clazz } ref="fader">
-        { this.props.children}
-      </div>
-    );
+    let clazz = `o-element-scroll-fader from-${from}`;
+    if(visible || waiting) clazz += " is-visible";
+    if(className) clazz += ` ${className}`;
+
+    return <div {...newProps} className={ clazz } ref="fader" />
   }
 }
-
-export default ElementScrollFader;

public/objects/animation/fade/ElementScrollFader.scss

@@ -0,0 +1,33 @@
+/*
+ *  Element Scroll Fader
+ *    Simple fade in animation that's activated when a user scrolls down far
+ *    enough to see the element.
+ *
+ *  Dependencies:
+ *    styles/settings/animation.scss
+ *    styles/tools/_transform.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/06/08
+ */
+@import '~@styles/global';
+
+$o-element-scroll-fader--speed: 0.75s;
+$o-element-scroll-fader--amount: 15%;
+
+.o-element-scroll-fader {
+  opacity: 0;
+  transition: all $o-element-scroll-fader--speed $s-animation--ease-out;
+  will-change: transform;
+
+  $amt: $o-element-scroll-fader--amount;//Shorthand
+  &.from-top    { @include t-translate-y(-$amt); }
+  &.from-bottom { @include t-translate-y( $amt); }
+  &.from-left   { @include t-translate-x(-$amt); }
+  &.from-right  { @include t-translate-x( $amt); }
+
+  &.is-visible {
+    opacity: 1;
+    @include t-translate(0, 0);
+  }
+}