jQuery addClass example

Change class name on click in jQuery

HTML

<div style="height: 900px"></div>
<div class="container">
    <span class="white"></span>
</div>

CSS

div {background:#ed565d;}
.container {height:500px;width:100%;position:relative;}
.container span {display:block;}
.white {
  background:#ffffff;
  height:10px;
  width:10px;
  margin:-10px 0 0 -10px;
  border-radius:100%;
  position:absolute;
  top:50%;
  left:50%;
}
.grow {
    animation-name: grow;
    -webkit-animation-name: grow;

    -moz-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    transition:all 0.5s ease-out; 
}

JavaScript

$(window).scroll(function () {
  const scrollTop = $(window).scrollTop();
  const documentHeight = $(document).height();
  const windowHeight = $(window).height();

  const scrollPercent = (scrollTop / (documentHeight - windowHeight)) * 100;
  const $circle = $('.white');
  
  growAnimation($circle, scrollPercent);
});

function growAnimation($element, animationPercentage) {
  const animationDecimal = easeInOutQuad(animationPercentage / 100);

	const finishSizePercent = 300;
  const finishPositionPercent = -100;
  const startPositionPercent = 50;
  const currentSizePercent = getProgressFromTo(0, finishSizePercent, animationDecimal);
  const currentPositionPercent = getProgressFromTo(startPositionPercent, finishPositionPercent, animationDecimal);
  
  
  $element.css({
  	width: `${currentSizePercent}%`,
  	height: `${currentSizePercent}%`,
  	top: `${currentPositionPercent}%`,
  	left: `${currentPositionPercent}%`
  });
}

function getProgressFromTo(from, to, animationDecimal) {
  return from + (to - from) * animationDecimal;
}

// Taken from https://gist.github.com/gre/1650294
function easeInOutQuad(t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t }