title: TypeError: Cannot read property 'offsetHeight' of null when using the Locomotive Scroll react module
body: <p>I am trying to load some images from firebase and have them scroll horizontally with the locomotive scroll react module. However, whenever I add the useEffect section below to initialise the locomotive scroll I get the following error:</p>
  <p><a href="https://i.stack.imgur.com/PMuPR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PMuPR.png" alt="enter image description here" /></a></p>
  <p>I have followed all the instructions on LocomotiveScroll's website and GitHub pages and also looked at other examples but can't seem to figure it out. Or even maybe I have missed something.</p>
  <pre><code>import React, { useEffect } from &quot;react&quot;;
  import useFirestore from &quot;../../Hooks/useFirestore&quot;;
  import &quot;./Astro.css&quot;;
  import LocomotiveScroll from &quot;locomotive-scroll&quot;;
  
  //&lt;a class=&quot;gallery__item-link&quot;&gt;explore&lt;/a&gt;
  
  const Astro = (props) =&gt; {
    const { docs } = useFirestore(&quot;astro&quot;);
    let i = 1;
  
    const scrollReff = React.createRef();
  
    useEffect(() =&gt; {
      const scroll = new LocomotiveScroll({
        el: scrollReff.current,
        smooth: true,
        direction: &quot;horizontal&quot;
      });
    });
  
    return (
      &lt;div&gt;
        {docs &amp;&amp;
          docs.map((doc) =&gt; (
            &lt;div key={doc.id}&gt;
              &lt;div ref={scrollReff}&gt;
                &lt;div className=&quot;content&quot;&gt;
                  &lt;div className=&quot;gallery&quot;&gt;
                    &lt;figure className=&quot;gallery__item&quot;&gt;
                      &lt;div className=&quot;gallery__item-img&quot;&gt;
                        &lt;div class=&quot;gallery__item-img&quot;&gt;
                          &lt;div
                            class=&quot;gallery__item-imginner&quot;
                          &gt;
                            &lt;img src={doc.url} alt={doc.description} /&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;figcaption className=&quot;gallery__item-caption&quot;&gt;
                        &lt;h2
                          className=&quot;gallery__item-title&quot;
                          data-scroll
                          data-scroll-speed=&quot;1&quot;
                        &gt;
                          {doc.title}
                        &lt;/h2&gt;
                        &lt;span className=&quot;gallery__item-number&quot;&gt;{&quot;0&quot; + i++}&lt;/span&gt;
                      &lt;/figcaption&gt;
                    &lt;/figure&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          ))}
      &lt;/div&gt;
    );
  };
  
  export default Astro;
  </code></pre>