JSFiddle - React, Tailwind, and code Playground

by davidpenuelab

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/animation.gsap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/debug.addIndicators.min.js"></script>
<div id="section">
  <div class="yearCounter">
    <div class="yearNumber"><span id="tText">1</span> <span class="year-loader"></span></div>
    <div class="yearText">year</div>
  </div>
</div>

CSS

body{
  background:#1e1e1e;
  color:#fff;
  height:2000px;
}
#section{
  padding-top:20px;
}
.yearCounter{
  text-align:center;
  width:120px;
  margin:0 auto;
  background-color: blue;
}
.yearNumber{
	font-size:20px;
    width: 60px;
    height: 60px;
	line-height:60px;
	position:relative;
    background-color: red;

}
.year-loader{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-size:60px;
    background-color: green;

}

.yearCounter .yearText{
	font-size:18px;
}

JavaScript

$(document).ready(function(){
var controller = new ScrollMagic.Controller();
var $tText = $('#tText');
var $year = $('.yearText');
var yearChange = new TimelineMax()
		.to(".year-loader", 1, {rotation:'0',
    			onStart: function () {$tText.html("1"); $year.html("year")},
          onReverseComplete: function () {$tText.html("1"); $year.html("year")}
    		}
    	)
      .to(".year-loader", 1, {rotation:'180',
    			onStart: function () {$tText.html("2");$year.html("years")},
          onReverseComplete: function () {$tText.html("1");}
    		}
    	)
      .to(".year-loader", 1, {rotation:'360',
    			onStart: function () {$tText.html("3");},
          onReverseComplete: function () {$tText.html("1");}
    		}
    	);
      
	var yearCount = new ScrollMagic.Scene({
		triggerElement:'#section',
		triggerHook:0,
		duration:'20%'
	})
	.setTween(yearChange)
  .setPin('.yearCounter', {pushFollowers: false})
	.addTo(controller)
  .addIndicators();
});