<div class="container center-align">
  <div class="col s12">
    <div id="animationelement" class="pulse"></div>
  </div>
</div>

<div class="container center-align">
  <div class="row">
    <div class="col s12">
      <h1 class="blue-text light">
        Let it rip!
      </h1>
    </div>
  </div>
  <div class="row">
    <div class="col s12 m3 l2">
      <a href="#" id="floaterButton" class="waves-effect waves-light btn-large white blue-text" onclick="_gaq.push(['_trackEvent', 'floater', 'clicked'])">floater</a>
      <div class="section"></div>
    </div>
    <div class="col s12 m3 l2">
      <a href="#" id="barrelRollButton" class="waves-effect waves-light btn-large white blue-text" onclick="_gaq.push(['_trackEvent', 'barrelRoll', 'clicked'])">barrelRoll</a>
      <div class="section"></div>
    </div>
    <div class="col s12 m3 l2">
      <a href="#" id="rollerRightButton" class="waves-effect waves-light btn-large white blue-text" onclick="_gaq.push(['_trackEvent', 'rollerRight', 'clicked'])">rollerRight</a>
      <div class="section"></div>
    </div>
    <div class="col s12 m3 l2">
      <a href="#" id="rollerLeftButton" class="waves-effect waves-light btn-large white blue-text" onclick="_gaq.push(['_trackEvent', 'rollerLeft', 'clicked'])">rollerLeft</a>
      <div class="section"></div>
    </div>
    <div class="col s12 m3 l2">
      <a href="#" id="heartbeatButton" class="waves-effect waves-light btn-large white blue-text" onclick="_gaq.push(['_trackEvent', 'heartbeat', 'clicked'])">heartbeat</a>
      <div class="section"></div>
    </div>
    <div class="col s12 m3 l2">
      <a href="#" id="pulseButton" class="waves-effect waves-light btn-large white blue-text" onclick="_gaq.push(['_trackEvent', 'pulse', 'clicked'])">pulse</a>
      <div class="section"></div>
    </div>
    <div class="col s12 m3 l2">
      <a href="#" id="rotationButton" class="waves-effect waves-light btn-large white blue-text" onclick="_gaq.push(['_trackEvent', 'rotation', 'clicked'])">rotation</a>
      <div class="section"></div>
    </div>
    <div class="col s12 m3 l2">
      <a href="#" id="sideToSideButton" class="waves-effect waves-light btn-large white blue-text" onclick="_gaq.push(['_trackEvent', 'sideToSide', 'clicked'])">sideToSide</a>
      <div class="section"></div>
    </div>
    <div class="col s12 m3 l2">
      <a href="#" id="zoomerButton" class="waves-effect waves-light btn-large white blue-text" onclick="_gaq.push(['_trackEvent', 'zoomer', 'clicked'])">zoomer</a>
      <div class="section"></div>
    </div>
    <div class="col s12 m3 l2">
      <a href="#" id="zoomerOutButton" class="waves-effect waves-light btn-large white blue-text" onclick="_gaq.push(['_trackEvent', 'zoomerOut', 'clicked'])">zoomerOut</a>
      <div class="section"></div>
    </div>
    <div class="col s12 m3 l2">
      <a href="#" id="spinnerButton" class="waves-effect waves-light btn-large white blue-text" onclick="_gaq.push(['_trackEvent', 'spinner', 'clicked'])">spinner</a>
      <div class="section"></div>
    </div>
    <div class="col s12 m3 l2">
      <a href="#" id="wiggleButton" class="waves-effect waves-light btn-large white blue-text" onclick="_gaq.push(['_trackEvent', 'wiggle', 'clicked'])">wiggle</a>
      <div class="section"></div>
    </div>
    <div class="col s12 m3 l2">
      <a href="#" id="shakeButton" class="waves-effect waves-light btn-large white blue-text" onclick="_gaq.push(['_trackEvent', 'shake', 'clicked'])">shake</a>
      <div class="section"></div>
    </div>
    <div class="col s12 m3 l2">
      <a href="#" id="poundButton" class="waves-effect waves-light btn-large white blue-text" onclick="_gaq.push(['_trackEvent', 'pound', 'clicked'])">pound</a>
      <div class="section"></div>
    </div>
    <div class="col s12 m3 l2">
      <a href="#" id="slideUpButton" class="waves-effect waves-light btn-large white blue-text" onclick="_gaq.push(['_trackEvent', 'slideUp', 'clicked'])">slideUp</a>
      <div class="section"></div>
    </div>
    <div class="col s12 m3 l2">
      <a href="#" id="slideDownButton" class="waves-effect waves-light btn-large white blue-text" onclick="_gaq.push(['_trackEvent', 'slideDown', 'clicked'])">slideDown</a>
      <div class="section"></div>
    </div>
    <div class="col s12 m3 l2">
      <a href="#" id="slideRightButton" class="waves-effect waves-light btn-large white blue-text" onclick="_gaq.push(['_trackEvent', 'slideRight', 'clicked'])">slideRight</a>
      <div class="section"></div>
    </div>
    <div class="col s12 m3 l2">
      <a href="#" id="slideLeftButton" class="waves-effect waves-light btn-large white blue-text" onclick="_gaq.push(['_trackEvent', 'slideLeft', 'clicked'])">slideLeft</a>
      <div class="section"></div>
    </div>
    <div class="col s12 m3 l2">
      <a href="#" id="fadeInButton" class="waves-effect waves-light btn-large white blue-text" onclick="_gaq.push(['_trackEvent', 'fadeIn', 'clicked'])">fadeIn</a>
      <div class="section"></div>
    </div>
    <div class="col s12 m3 l2">
      <a href="#" id="fadeOutButton" class="waves-effect waves-light btn-large white blue-text" onclick="_gaq.push(['_trackEvent', 'fadeOut', 'clicked'])">fadeOut</a>
      <div class="section"></div>
    </div>
    <div class="col s12 m3 l2">
      <a href="#" id="rotateInRightButton" class="waves-effect waves-light btn-large white blue-text" onclick="_gaq.push(['_trackEvent', 'rotateInRight', 'clicked'])">rotateInRight</a>
      <div class="section"></div>
    </div>
    <div class="col s12 m3 l2">
      <a href="#" id="rotateInLeftButton" class="waves-effect waves-light btn-large white blue-text" onclick="_gaq.push(['_trackEvent', 'rotateInLeft', 'clicked'])">rotateInLeft</a>
      <div class="section"></div>
    </div>
    <div class="col s12 m3 l2">
      <a href="#" id="rotateInButton" class="waves-effect waves-light btn-large white blue-text" onclick="_gaq.push(['_trackEvent', 'rotateIn', 'clicked'])">rotateIn</a>
      <div class="section"></div>
    </div>
    <div class="col s12 m3 l2">
      <a href="#" id="bounceInButton" class="waves-effect waves-light btn-large white blue-text" onclick="_gaq.push(['_trackEvent', 'bounceIn', 'clicked'])">bounceIn</a>
      <div class="section"></div>
    </div>
  </div>
</div>
/*!
 * Basic styling on the library page
 */

 #animationelement {
 	background: url("http://i.imgur.com/mjXfKJP.png") no-repeat center;
 	background-size: contain;
 	height: 190px;
 	width: 200px;
 	margin-left: auto;
 	margin-right: auto;
 }
 .numberimage {
 	max-height: 80px;
 	max-width: 80px;
 }
 .btn-large {
 	text-transform: none !important;
 }

code {
	display: block;
	background-color: #E8E8E8;
	color: #888888;
	border-radius: 8px;
	width: 96%;
	padding: 2%;
}

 .invisible {
 	visibility: hidden;
 }
 @media only screen and (min-width: 1600px) {
.toppadding {
        padding-top: 2rem;
}
}
    $('#rotationButton').click(function() {
      $(this).each(function(){
          $('#animationelement').removeClass(); 
          $('#animationelement').addClass("rotation");
        });
    });

    $('#sideToSideButton').click(function() {
      $(this).each(function(){
          $('#animationelement').removeClass(); 
          $('#animationelement').addClass("sideToSide");
        });
    });

    $('#zoomerButton').click(function() {
      $(this).each(function(){
          $('#animationelement').removeClass(); 
          $('#animationelement').addClass("zoomer");
        });
    });

     $('#zoomerOutButton').click(function() {
      $(this).each(function(){
          $('#animationelement').removeClass(); 
          $('#animationelement').addClass("zoomerOut");
        });
    });

    $('#spinnerButton').click(function() {
      $(this).each(function(){
          $('#animationelement').removeClass(); 
          $('#animationelement').addClass("spinner");
        });
    });

     $('#pulseButton').click(function() {
      $(this).each(function(){
          $('#animationelement').removeClass(); 
          $('#animationelement').addClass("pulse");
        });
    });

     $('#shakeButton').click(function() {
      $(this).each(function(){
          $('#animationelement').removeClass(); 
          $('#animationelement').addClass("shake");
        });
    });

     $('#barrelRollButton').click(function() {
      $(this).each(function(){
          $('#animationelement').removeClass(); 
          $('#animationelement').addClass("barrelRoll");
        });
    });

      $('#floaterButton').click(function() {
      $(this).each(function(){
          $('#animationelement').removeClass(); 
          $('#animationelement').addClass("floater");
        });
    });

      $('#wiggleButton').click(function() {
      $(this).each(function(){
          $('#animationelement').removeClass(); 
          $('#animationelement').addClass("wiggle");
        });
    });

      $('#poundButton').click(function() {
      $(this).each(function(){
          $('#animationelement').removeClass(); 
          $('#animationelement').addClass("pound");
        });
    });

    $('#rollerRightButton').click(function() {
      $(this).each(function(){
          $('#animationelement').removeClass(); 
          $('#animationelement').addClass("rollerRight");
        });
    });

    $('#rollerLeftButton').click(function() {
      $(this).each(function(){
          $('#animationelement').removeClass(); 
          $('#animationelement').addClass("rollerLeft");
        });
    });

    $('#heartbeatButton').click(function() {
      $(this).each(function(){
          $('#animationelement').removeClass(); 
          $('#animationelement').addClass("heartbeat");
        });
    });

    $('#fadeInButton').click(function() {
      $(this).each(function(){
          $('#animationelement').removeClass(); 
          $('#animationelement').addClass("fadeIn");
        });
    });

    $('#fadeOutButton').click(function() {
      $(this).each(function(){
          $('#animationelement').removeClass(); 
          $('#animationelement').addClass("fadeOut");
        });
    });
   
    $('#slideUpButton').click(function() {
      $(this).each(function(){
          $('#animationelement').removeClass(); 
          $('#animationelement').addClass("slideUp");
        });
    });

    $('#slideDownButton').click(function() {
      $(this).each(function(){
          $('#animationelement').removeClass();       
          $('#animationelement').addClass("slideDown");
        });
    }); 

    $('#slideLeftButton').click(function() {
      $(this).each(function(){
          $('#animationelement').removeClass();       
          $('#animationelement').addClass("slideLeft");
        });
    });   

    $('#slideRightButton').click(function() {
      $(this).each(function(){
          $('#animationelement').removeClass();       
          $('#animationelement').addClass("slideRight");
        });
    }); 

    $('#rotateInRightButton').click(function() {
      $(this).each(function(){
          $('#animationelement').removeClass();       
          $('#animationelement').addClass("rotateInRight");
        });
    });

    $('#rotateInLeftButton').click(function() {
      $(this).each(function(){
          $('#animationelement').removeClass();       
          $('#animationelement').addClass("rotateInLeft");
        });
    });

     $('#rotateInButton').click(function() {
      $(this).each(function(){
          $('#animationelement').removeClass();       
          $('#animationelement').addClass("rotateIn");
        });
    });

     $('#bounceInButton').click(function() {
      $(this).each(function(){
          $('#animationelement').removeClass();       
          $('#animationelement').addClass("bounceIn");
        });
    });      

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/wickedcss.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js