title: Images are showing for 1 sec before javascript animation is loaded
body: <p>I have made a website with gatsby.js. I animate some images with bounce.js, which is a javascript library that animates the DOM.</p>
  
  <p>Everything looks good on my local computer, but when I deployed it to a live server, I have the following problem: The images are supposed to fade in on page load. When I load the website, you can see the images at the position they are supposed to end up in for a second, then disappear and fade in like I want them to.</p>
  
  <p>What might be the reason for the images to appear there for a second? How can I avoid this or circumvent it?</p>
  
  <p>edit:</p>
  
  <p>here's some code:</p>
  
  <pre><code>import React from "react"
  import Bounce from 'bounce.js'
  
  // Images
  import imgBoodlefight from '../img/index_boodlefight.svg'
  import imgLogo from '../img/index_logo.svg'
  import imgDelivery from '../img/index_delivery.svg'
  
  
  // Layout
  import Left from '../components/Left'
  import Right from '../components/Right'
  import RightTop from '../components/RightTop'
  import RightBottom from '../components/RightBottom'
  
  export default class Home extends React.Component {
  
    constructor(props) {
      super(props);
    }
    componentDidMount() {
      var bounceBoodlefight = new Bounce();
      var bounceDelivery = new Bounce();
      var bounceDeliveryTxt = new Bounce();
      var bounceLogo = new Bounce();
  
      bounceBoodlefight
        .translate({
          from: { x: 0 , y: -400 },
          to: { x: 0, y: 0 },
          duration: 1000,
          stiffness: 1,
          bounces: 0
        })
      .applyTo(document.querySelectorAll(".boodlefight-img"));
  
      bounceDelivery
        .translate({
          from: { x: 400 , y: 0 },
          to: { x: 0, y: 0 },
          duration: 1000,
          stiffness: 1,
          bounces: 0
        })
        // .scale({
        //   from: { x: 1.2, y: 1.2 },
        //   to: { x: 1, y: 1 },
        //   duration: 10000,
        //   bounces: 13,
        //   stiffness: 1
        // })
        .applyTo(document.querySelectorAll(".delivery-bag"));
  
      bounceDeliveryTxt
        .translate({
          from: { x: -500 , y: 0 },
          to: { x: 0, y: 0 },
          duration: 1000,
          stiffness: 1,
          bounces: 0
        })
        .applyTo(document.querySelectorAll(".delivery-txt"));
  
      bounceLogo
        .translate({
          from: { x: 0 , y:  500 },
          to: { x: 0, y: 0 },
          duration: 2000,
          stiffness: 1,
          bounces: 4
        })
        .scale({
          from: { x: 1.2, y: 1.2 },
          to: { x: 1, y: 1 },
          duration: 10000,
          bounces: 10,
          stiffness: 1
        })
        .applyTo(document.querySelectorAll(".logo-img"));
    }
  
    render() {
      return (
        &lt;div className="row"&gt;
        &lt;Left&gt; 
        &lt;img className="logo-img" src={imgLogo} alt="Logo" /&gt;;
        &lt;/Left&gt;
  
        &lt;Right&gt;
  
          &lt;RightTop&gt; 
            &lt;img className="boodlefight-img" src={imgBoodlefight} alt="Boodlefight" /&gt;;
          &lt;/RightTop&gt;
  
          &lt;RightBottom&gt; 
            &lt;span className="delivery-txt" style={{color: 'lavender', margin: '10px'}}&gt;
              Order for delivery coming soon
            &lt;/span&gt; 
  
            &lt;img className="delivery-bag" src={imgDelivery} alt="Delivery" style={{margin: '10px'}} /&gt;
          &lt;/RightBottom&gt;
  
        &lt;/Right&gt;
  
      &lt;/div&gt;      
      );
    }
  
  }
  </code></pre>
  
  <p>here the scss I am using:</p>
  
  <pre><code>.delivery-bag, .boodlefight-img, .logo-img {
    display: block;
    margin: 0 auto;
  }
  </code></pre>