title: Am I using styled-components correctly?
body: <p>My App.js is starting to look pretty long, and I'm beginning to wonder if I'm using styled-components the way it's intended.</p>
  
  <pre><code>import React, { Component } from "react";
  import "./App.scss";
  import styled, { keyframes } from "styled-components";
  import { TweenMax, TweenLite, Power2, TimelineLite } from "gsap";
  import NameSvg from "./name";
  import Nav from "./Nav";
  import Player from "./Player";
  
  class App extends Component {
    nav = null;
    hero = null;
    welcome = null;
    wrapper = null;
    scroll = null;
    name = null;
    tl = new TimelineLite({ paused: true });
    lis = [];
    welcomeTxt = [];
  
    changePlayingState = () =&gt; {
      this.setState({ playing: !this.state.playing });
    };
  
    state = {
      liText: [{ li: "My Work", id: 1 }, { li: "About Me", id: 2 }],
      welcomeTxt: [{ word: "Hello", id: 1 }, { word: "I'm", id: 2 }],
      playing: false
    };
  
    componentDidMount() {
      this.tl
        .staggerTo(this.welcomeTxt, 0.9, { opacity: 1, y: 70 }, 0.1)
        .staggerTo(
          this.welcomeTxt,
          0.9,
          { visibility: "visible", opacity: 0, delay: 0.5 },
          "prev"
        )
        .to(this.name, 0.9, { y: 350, x: -400 }, "prev+=.5")
        .to(this.nav, 0.9, { opacity: 1 }, "prev+=.5")
        .to(this.hero, 0.9, { opacity: 1 }, "p rev+=.9")
        .staggerTo(this.lis, 0.9, { opacity: 1, x: 20 }, "prev+=.9")
        .to(this.music, 0.9, { opacity: 1 }, "prev+=2")
        .to(this.scroll, 0.9, { visibility: "visible" }, "prev+=2");
  
      this.tl.play();
    }
  
    render() {
      return (
        &lt;Wrapper ref={div =&gt; (this.wrapper = div)}&gt;
          &lt;Nav ref={div =&gt; (this.nav = div)}&gt;
            Logo
            &lt;ul&gt;
              {// map through the elements
              this.state.liText.map((element, index) =&gt; (
                &lt;a href="#"&gt;
                  &lt;li key={index} ref={li =&gt; (this.lis[index] = li)}&gt;
                    {element.li}
                  &lt;/li&gt;
                &lt;/a&gt;
              ))}
            &lt;/ul&gt;
            &lt;Logo /&gt;
          &lt;/Nav&gt;
          &lt;Welcome ref={div =&gt; (this.welcome = div)}&gt;
            {// map through the elements
            this.state.welcomeTxt.map((element, index) =&gt; (
              &lt;div
                className={`welcome${index}`}
                key={index}
                ref={div =&gt; (this.welcomeTxt[index] = div)}
              &gt;
                {element.word}
                &lt;br /&gt;
              &lt;/div&gt;
            ))}
            &lt;Name ref={div =&gt; (this.name = div)}&gt;
              &lt;NameSvg className="namesvg" /&gt;
            &lt;/Name&gt;
          &lt;/Welcome&gt;
  
          &lt;Music ref={div =&gt; (this.music = div)}&gt;
            &lt;ToolTip&gt;
              pst..could i interest you in some music for your stay?
              &lt;button className="noThanks"&gt;No..thanks&lt;/button&gt;
            &lt;/ToolTip&gt;
            &lt;a href="#" onClick={this.changePlayingState}&gt;
              {this.state.playing ? (
                &lt;img
                  src="https://img.icons8.com/material/48/000000/circled-pause.png"
                  key={"pause"}
                /&gt;
              ) : (
                &lt;img
                  src="https://img.icons8.com/material-rounded/48/000000/circled-play.png"
                  alt="play button"
                  key={"play"}
                  className="playButton"
                /&gt;
              )}
            &lt;/a&gt;
            {this.state.playing ? &lt;Player playing={this.state.playing} /&gt; : null}
          &lt;/Music&gt;
  
          &lt;Scroll ref={div =&gt; (this.scroll = div)}&gt;
            &lt;div className="one" /&gt;
            &lt;div className="two" /&gt;
            &lt;div className="three" /&gt;
          &lt;/Scroll&gt;
          &lt;Enter /&gt;
          &lt;Hero ref={div =&gt; (this.hero = div)} className="hero" /&gt;
        &lt;/Wrapper&gt;
      );
    }
  }
  
  export default App;
  
  const building = keyframes`
    0% {
      left: 0;
      width:0;
      opacity:1;
    } 
    50%{
      left:0;
      width:70%;
      opacity:.7
    }
    100% {
      left: 70%;
      width:0;
      opacity:0;
    }
  `;
  
  const Wrapper = styled.div`
    display: grid;
    background: #f8f8f8;
    height: 100vh;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
    font-family: "Roboto Condensed", sans-serif;
    transform: translateX(-15px);
    overflow: hidden;
  `;
  
  const Logo = styled.div``;
  
  const appear = keyframes`
    0% {
      opacity:0
    } 
    50%{
      opacity:.7
    }
    100% {
      opacity:1;
    }
  `;
  
  const Name = styled.div`
    position:absolute;
    top:-6%;
    left:-12%;
    height:300%;
    grid-column: 1/5;
    grid-row: 9/13;
    z-index: 3;
    }
  `;
  
  const Music = styled.div`
    opacity: 0;
    grid-column: 11/13;
    grid-row: 1/2;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 3em;
    position: relative;
  `;
  
  const ToolTip = styled.div`
    ${"" /* visibility: hidden; */}
    position: absolute;
    height: auto;
    padding: 0.3em;
    width: auto;
    bottom: 5.5em;
    border: 0.3px solid black;
    left: -1em;
  `;
  
  const Scroll = styled.div`
    visibility: hidden;
    grid-column: 11/13;
    grid-row: 6/9;
    display: flex;
    ${"" /* flex-direction: column; */}
    justify-content: center;
  
    &amp; .one {
      height: 10px;
      width: 10px;
      background: black;
      border-radius: 50%;
      margin-right: 0.5em;
    }
  
    &amp; .two,
    .three {
      height: 10px;
      width: 10px;
      background: transparent;
      border: 0.5px solid black;
      border-radius: 50%;
      margin-right: 0.5em;
    }
  `;
  
  const Enter = styled.div`
    opacity: 0;
    background: white;
    grid-column: 11/13;
    grid-row: 9/13;
  `;
  
  const Hero = styled.div`
    opacity: 0;
    grid-column: 4/12;
    grid-row: 1/12;
    transform: translate(-20%, 20%);
  
    &amp;:before {
      content: "";
      position: absolute;
      background: rgba(0, 0, 0, 0.9);
      height: 100%;
      width: 0%;
      display: block;
      animation: ${building} 1s;
      animation-delay: 3s;
      animation-fill-mode: forwards;
    }
  `;
  
  const Welcome = styled.div`
    position: relative;
    transform: translate(100px, 100px);
    font-family: Neou-Thin;
    font-size: 100px;
  `;
  </code></pre>
  
  <p>I'm wondering how i'd branch these out into their own files...
  I'm using GSAP to animate and when I try to branch things out into their own files either the animation ceases to work, or I get an error, something like "cannot tween null"</p>
  
  <p>An example of me trying to branch the Navigation out into it's own file: </p>
  
  <pre><code>import React, { Component } from "react";
  import styled, { keyframes } from "styled-components";
  
  class Nav extends Component {
    render() {
      return &lt;Navigation /&gt;;
    }
  }
  
  export default Nav;
  
  const Navigation = styled.div`
    opacity: 0;
    color: black;
    padding: 2em;
    grid-column: 1 / 3;
    grid-row: 1/6;
    font-family: Neou-Bold;
  
    &amp; ul {
      list-style: none;
      padding: 0;
      margin-top: 3em;
      font-size: 1.1em;
    }
  
    &amp; a {
      text-decoration: none;
      color: black;
    }
    &amp; li {
      opacity: 0;
      padding-bottom: 0.5em;
    }
  `;
  </code></pre>
  
  <p>When I do this the animation doesn't work.</p>