JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div class="circles-block">
  <div class="circle-item circle-item-1">
    <div class="circle-inner">
      01
    </div>
  </div>
  <div class="circle-item circle-item-2">
    <div class="circle-inner">
      02
    </div>
  </div>
  <div class="circle-item circle-item-3">
    <div class="circle-inner">
      03
    </div>
  </div>
  <div class="circle-item circle-item-4">
    <div class="circle-inner">
      04
    </div>
  </div>
  <div class="circle-item circle-item-5">
    <div class="circle-inner">
      05
    </div>
  </div>
  <div class="circle-item circle-item-6">
    <div class="circle-inner">
      06
    </div>
  </div>
  <div class="circle-item circle-item-7">
    <div class="circle-inner">
      07
    </div>
  </div>
  <div class="circle-item circle-item-8">
    <div class="circle-inner">
      08
    </div>
  </div>
  <div class="circle-item circle-item-9">
    <div class="circle-inner">
      09
    </div>
  </div>
  <div class="circle-item circle-item-10">
    <div class="circle-inner">
      10
    </div>
  </div>
  <div class="circle-item circle-item-11">
    <div class="circle-inner">
      11
    </div>
  </div>
  <div class="circle-item circle-item-12">
    <div class="circle-inner">
      12
    </div>
  </div>
  <div class="circle-item circle-item-13">
    <div class="circle-inner">
      13
    </div>
  </div>
  <div class="circle-item circle-item-14">
    <div class="circle-inner">
      14
    </div>
  </div>
  <div class="circle-item circle-item-15">
    <div class="circle-inner">
      15
    </div>
  </div>
  <div class="circle-item circle-item-16">
    <div class="circle-inner">
      16
    </div>
  </div>
  <div class="circle-item circle-item-17">
    <div class="circle-inner">
      17
    </div>
  </div>
  <div class="circle-item circle-item-18">
    <div class="circle-inner">
      18
    </div>
  </div>
  <div class="circle-item circle-item-19">
    <div class="circle-inner">
      19
    </div>
  </div>
  <div...

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.circles-block {
  padding: 50px 0;
}
.circle-item {
    width: 31.333333%;
    margin-top: 1%;
    margin-bottom: 1%;
    margin-left: 1%;
    margin-right: 1%;
    background-color: #fff;
    border-radius: 50%;
    display: inline-block;
    float: left;
    position: relative;
    font-size: 25px;
    
    transition: transform 600ms cubic-bezier(0.8, 0, 0, 0.8);
    transform: scale(0.3);
}
.circle-item::before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 100%;

}
.animated {
  transform: scale(1);
}

.circle-item-1 {
  background-color: #ed194b;
}

.circle-item-2 {
  background-color: #f37c78;
  transition-delay: 0.1s;
}

.circle-item-3 {
  background-color: #f8a19a;
  transition-delay: 0.1s;
}

.circle-item-4 {
  background-color: #f7921e;
}

.circle-item-5 {
  background-color: #faac57;
  transition-delay: 0.1s;
}

.circle-item-6 {
  background-color: #fdc78b;
  transition-delay: 0.2s;
}

.circle-item-7 {
  background-color: #ffd401;
}

.circle-item-8 {
  background-color: #ffe500;
  transition-delay: 0.1s;
}

.circle-item-9 {
  background-color: #fef46e;
  transition-delay: 0.2s;
}

.circle-item-10 {
  background-color: #a6ce3a;
}

.circle-item-11 {
  background-color: #bed82f;
  transition-delay: 0.1s;
}

.circle-item-12 {
  background-color: #d6e167;
  transition-delay: 0.2s;
}

.circle-item-13 {
  background-color: #00bbbd;
}

.circle-item-14 {
  background-color: #72cbcf;
  transition-delay: 0.1s;
}

.circle-item-15 {
  background-color: #9bd8d9;
  transition-delay: 0.2s;
}

.circle-item-16 {
  background-color: #016bb5;
}

.circle-item-17 {
  background-color: #628ac8;
  transition-delay: 0.1s;
}

.circle-item-18 {
  background-color: #8aa4d5;
  transition-delay: 0.2s;
}

.circle-item-19 {
  background-color: #af72ae;
}

.circle-item-20 {
  background-color: #c196c4;
  transition-delay: 0.1s;
}

.circle-item-21 {
  background-color: #d0b1d3;
  transition-delay:...

JavaScript

$.fn.isInViewport = function() {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();

    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};



function checkInViewport(elem) {
// var checkInViewport = (function (elem) {
	  
		elem.each(function() {
      //var activeColor = $(this).attr('id');
      if ($(this).isInViewport()) {
        //$('#fixed-' + activeColor).addClass(activeColor + '-active');
        $(this).addClass('animated');
      } else {
        //$('#fixed-' + activeColor).removeClass(activeColor + '-active');
        $(this).removeClass('animated');
      }
    });
// })($testBlock);
}

function debounce(func, wait, immediate) {
	var timeout;
	return function() {
		var context = this;
    var args = arguments;
		var later = function() {
			timeout = null;
			if (!immediate) {
      	func.apply(context, args);
      }
		};
		var callNow = immediate && !timeout;
		clearTimeout(timeout);
		timeout = setTimeout(later, wait);
		if (callNow) {
    	func.apply(context, args);
    }
	};
}

var $testBlock = $('.circle-item');


var myEfficientFn = debounce(function() {
	checkInViewport($testBlock);
}, 250);

myEfficientFn();
$(window).on('resize scroll', myEfficientFn);

$(window).on('resize scroll', function() {

	  
		// checkInViewport($testBlock);

		/*var $testBlock = $('.circle-item');
    if ($testBlock.isInViewport()) {
        $testBlock.addClass('animated');
    } else {
        // do something else
        $testBlock.removeClass('animated');
    }*/
    
    /*var revealer = $('.circle-item');
    for (var i = 0; i < revealer.length; i++) {
      // if (checkVisibility(revealer[i])) {
      if (revealer[i].isInViewport()) {
        revealer[i].addClass('revealed');
      } else {
        revealer[i].removeClass('revealed');
      }
    }*/
    
});