Animating Ball

animating-ball.markdown

Animating Ball

A Pen by Chris Ng on CodePen.

License.

index.html

<div id="animating-ball" class="ball"></div>

script.js

const ball = document.getElementById('animating-ball');
const STYLES = {
  SCALE_UP: 'ball--scale-up',
  SCALE_DOWN: 'ball--scale-down',
  CIRCLING: 'ball--circling',
};

ball.addEventListener('animationend', () => {
  if (ball.classList.contains(STYLES.SCALE_DOWN)) {
    ball.classList.remove(STYLES.SCALE_DOWN)
    ball.classList.remove(STYLES.SCALE_UP)
    ball.classList.remove(STYLES.CIRCLING);
  } else if (ball.classList.contains(STYLES.CIRCLING)) {
    ball.classList.add(STYLES.SCALE_DOWN);
  } else if (ball.classList.contains(STYLES.SCALE_UP)) {
    ball.classList.add(STYLES.CIRCLING);
  }
});

ball.onclick = () => {
  ball.classList.add(STYLES.SCALE_UP);
}

style.css

@keyframes ball-scale {
  from {
    transform: scale(1);
    box-shadow: 0 8px 6px -6px #6C7A89;
  }
  to {
    transform: scale(1.25);
    box-shadow: 0 10px 6px -6px #6C7A89;
  }
}

@keyframes ball-circular {
  from {
    box-shadow: 0 10px 6px -6px #6C7A89;
    transform-origin: 50% -450%;
    transform: scale(1.25) rotate(0deg) translateY(-100%) rotate(0deg);
  }
  to {
    box-shadow: 0 10px 6px -6px #6C7A89;
    transform-origin: 50% -450%;
    transform: scale(1.25) rotate(360deg) translateY(-100%) rotate(-360deg);
  }
}

.ball {
  background-color: #D24D57;
  width: 25px;
  height: 25px;
  margin: 25px;
  cursor: pointer;
  display: inline-block;
  border-radius: 50%;
  box-shadow: 0 8px 6px -6px #6C7A89;
}

.ball--scale-up {
  animation: ball-scale 1s ease-out forwards;
  animation-direction: normal;
}

.ball--circling {
  animation: ball-circular 2s ease-in-out forwards;
}

.ball--scale-down {
  animation: ball-scale 1s ease-in forwards;
  animation-direction: reverse;
}