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) {
+    from = from || "top";
-      clazz += " from-" + this.props.from
-    } else {
-      clazz += " from-top";
-    }
-    if(this.state.visible || this.state.waiting) {
-      clazz += " is-visible";
-    }
 
-    if(this.props.className) clazz += " " + this.props.className;
+    ["from","visible","waiting"].forEach(e => delete newProps[e]);
 
-    return (
+    let clazz = `o-element-scroll-fader from-${from}`;
-      <div className={ clazz } ref="fader">
+    if(visible || waiting) clazz += " is-visible";
-        { this.props.children}
+    if(className) clazz += ` ${className}`;
-      </div>
+
-    );
+    return <div {...newProps} className={ clazz } ref="fader" />
   }
 }
-
-export default ElementScrollFader;

public/objects/animation/fade/ElementScrollFader.scss

@@ -10,6 +10,8 @@
  *  Version:
  *    1.0.0 - 2018/06/08
  */
+@import '~@styles/global';
+
 $o-element-scroll-fader--speed: 0.75s;
 $o-element-scroll-fader--amount: 15%;
 

public/objects/background/Background.jsx

@@ -23,6 +23,8 @@
 
 import React from 'react';
 
+import Styles from './Background.scss';
+
 export default function(props) {
   let style = props.style || "test";
   let styleClassPrefix = "o-background--style-"+style;