JSFiddle - React, Tailwind, and code Playground

HTML

<div id="coke">
       
            <img id="bottle-mask" src="http://ipbyrne.github.io/bottle-demo/mask.svg" width="156" height="467"/>
            <img id="bottle-label" src="http://ipbyrne.github.io/bottle-demo/label.png"/>
            <img id="bottle-overlay" src="http://ipbyrne.github.io/bottle-demo/overlay.png" width="156" height="467" alt="Pure CSS Coke Can by Rom&aacute;n Cort&eacute;s" />
    <div id="pusher"></div>
             
    </div>

CSS

body
        {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        
        #coke
        {
            width: 156px;
            height: 500px;
            overflow: auto;
            position:relative;
        }

        #bottle-mask {
            position:fixed;
            left:0px;
            z-index:1;
        }
        #bottle-label {
            position: absolute;
            top: 140px;
            width: 325px;
            height: 250px;
            z-index: 2;
        }
        #bottle-overlay {
            position: fixed;
            left:0px;
            z-index: 3;
        }
        #pusher {
            width: 325px;
            height: 500px;
            position: relative;
            z-index: 4;
        }

JavaScript

(function(){
          var number = 1
          var box=document.getElementById('coke');
     	  
          function infScroll(){
              box.scrollLeft   += number;
              
              if(box.scrollLeft===160){
                 number = number * -1;
              }

            if(box.scrollLeft === 0) {
              number = number * -1;
            }
     
            window.requestAnimationFrame(infScroll);

          }
          window.requestAnimationFrame(infScroll);
      }());