CODEWITHSUNDEEP
javascriptreactjsanimationreact-reduxgatsby
George Welder
George Welder

Reputation: 4045

Images are showing for 1 sec before javascript animation is loaded

I have made a website with gatsby.js. I animate some images with bounce.js, which is a javascript library that animates the DOM.

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.

What might be the reason for the images to appear there for a second? How can I avoid this or circumvent it?

edit:

here's some 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 (
      <div className="row">
      <Left> 
      <img className="logo-img" src={imgLogo} alt="Logo" />;
      </Left>

      <Right>

        <RightTop> 
          <img className="boodlefight-img" src={imgBoodlefight} alt="Boodlefight" />;
        </RightTop>

        <RightBottom> 
          <span className="delivery-txt" style={{color: 'lavender', margin: '10px'}}>
            Order for delivery coming soon
          </span> 

          <img className="delivery-bag" src={imgDelivery} alt="Delivery" style={{margin: '10px'}} />
        </RightBottom>

      </Right>

    </div>      
    );
  }

}

here the scss I am using:

.delivery-bag, .boodlefight-img, .logo-img {
  display: block;
  margin: 0 auto;
}

Upvotes: 0

Views: 120

Answers (1)

ShacharW
ShacharW

Reputation: 207

One reason could be that the HTML and the image are loaded, than after some time the CSS file is loaded. So what happens is that the image is shown, than the CSS applies and the animation is played. One solution could be: add display none to the image inline + add to the CSS file display: inline block.

Upvotes: 1

Related Questions