JSFiddle - React, Tailwind, and code Playground

Attention seekers example with vanilla javascript and animate.css

by Travis Almand

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<main>
  <div id="pulse_text" class="text">click to play</div>
  <div id="pulse" class="box">pulse</div>
  
  <div id="bounce_text" class="text">click to play</div>
  <div id="bounce" class="box">bounce</div>
</main>

CSS

@import url('https://fonts.googleapis.com/css?family=Luckiest+Guy');

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
html,
body {
  margin: 0;
  padding: 0;
}

main {
  align-items: center;
  background-color: #F5F5F5;
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}

.text {
  font-size: 16px;
  margin: 30px 0 10px;
  padding: 5px 40px;
}

#pulse {
  animation-iteration-count: 3;
}

.box {
  align-items: center;
  background-color: #fff;
  border: 4px solid rebeccapurple;
  color: rebeccapurple;
  cursor: pointer;
  display: flex;
  font-family: 'Luckiest Guy';
  font-size: 40px;
  height: 60px;
  justify-content: center;
  width: 400px;
  will-change: transform;
}

JavaScript

console.clear();

// our elements
var pulseText = document.querySelector('#pulse_text');
var pulse = document.querySelector('#pulse');
var bounceText = document.querySelector('#bounce_text');
var bounce = document.querySelector('#bounce');

// function for playing our pulse animation
function playPulse () {
	// prevent extra clicks during animation
  pulse.removeEventListener('click', playPulse);
  // add the library's classes
  pulse.classList.add('animated', 'pulse');
  // hide the play text since we can't click during animation
  pulseText.style.opacity = 0;
}
// event listener calls a function so we can prevent extra clicks
pulse.addEventListener('click', playPulse);
// function to reset after animation ends
pulse.addEventListener('animationend', function () {
	// restore event listener
	pulse.addEventListener('click', playPulse);
  // remove library's classes so they can be placed again
  pulse.classList.remove('animated', 'pulse');
  // restore the text since we can now click again
  pulseText.style.opacity = 1;
});

// function to play our infinite bounce animation
bounce.addEventListener('click', function () {
	// check to see if library classes have been applied
	if (!bounce.classList.contains('animated')) {
  	// animation is not playing, we will start it
    // change text to explain how to stop animation
  	bounceText.innerText = 'click to stop';
    // add the library's classes
  	bounce.classList.add('animated', 'bounce', 'infinite');
  } else {
  	// animation is playing, we will stop it
    // change text to explain how to start animation
  	bounceText.innerText = 'click to play';
    // remove the library's classes
  	bounce.classList.remove('animated', 'bounce', 'infinite');
  }
});