JSFiddle - React, Tailwind, and code Playground

HTML

SCROLL TO SEE THE ANIMATION
<div class="big-div"></div>
    <div class="fire-icon">
        <img src="http://static.wixstatic.com/media/d57153_09c71d3fe10848c3a04b18f8d8a6c2b3.png_srz_p_487_587_75_22_0.50_1.20_0.00_png_srz" alt=""/>
    </div>
    <div class="big-div"></div>

CSS

html, body, .big-div{
    height: 100%;
}

.fire-icon{
  opacity: 0;
  margin-left: 250px;
  -webkit-transition: 1s;
  transition: 1s;
}

.fire-icon.animate-css{
  opacity: 1;
  margin-left: 0;
}

JavaScript

var elementToAnimate = document.querySelector(".fire-icon");
var heightViewPort = window.innerHeight;


function foundPosition(){
    /* SCROLL DISTANCE */
    var desplaced = self.pageYOffset || document.documentElement.scrollTop;

    /* DESPLACED + HALF OF VIEWPORT, FOR TO ANIMATE THE ICON WHEN IT ARRIVE TO THE HALF OF THE SCREEN */
    var positionAnimate = desplaced + (heightViewPort / 2);

    if(elementToAnimate.offsetTop < positionAnimate){
        elementToAnimate.classList.add("animate-css");
    }
}

onscroll = foundPosition;