JSFiddle - React, Tailwind, and code Playground

A stab at creating a demo of various CSS animation libraries.

by Travis Almand

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/shakrmedia/[email protected]/build/tuesday.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/csshake/1.5.3/csshake.min.css">
<div id="app">
  <div id="panel">
    <label>Choose a library:
      <select v-model="library" @change="libraryChange">
        <option v-for="lib in libraries" :key="lib">{{ lib }}</option>
      </select>
    </label>
    
    <br />
    
    <p>Website: <a :href="libraryData[library].url" :title="`${libraryData[library].name} website`">{{ libraryData[library].url }}</a></p>
    
    <br />
    
    <p>Animation Types: <button @click="type = 'transitions'">Transitions</button> <button @click="type = 'attention'">Attention</button></p>
    
    <br />
    
    <template v-if="type === 'transitions'">
      <p>Choose the animation for the first item leaving:</p>
      <label>Leave animation:
        <select id="leave" v-model="leave">
          <option v-for="c in libraryData[library].classes.leave" :key="c">{{ c }}</option>
        </select>
      </label>
      <p>leave-active-class="{{ libraryData[library].static }} {{ leave }}"</p>

      <br />

      <p>Choose the animation for the second time entering:</p>
      <label>Enter animation:
        <select id="enter" v-model="enter">
          <option v-for="c in libraryData[library].classes.enter" :key="c">{{ c }}</option>
        </select>
      </label>
      <p>enter-active-class="{{ libraryData[library].static }} {{ enter }}"</p> 
    </template>
    
    <template v-if="type === 'attention'">
      <p>Choose the animation for hover:</p>
      <label>
        <select id="hover" v-model="hover">
          <option v-for="hover in libraryData[library].classes.hover" :key="hover">{{ hover }}</option>
        </select>
      </label>
      <p>If the infinite box is not animating, it likely means the...

SCSS

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

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

html,
body {
  font-family: 'Roboto', sans-serif;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100vw;
}

p,
label{
  display: block;
  margin: 10px;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

#panel {
  flex-grow: 1;
  max-height: calc(100% - 160px);
  overflow: auto;
}

#toggle {
  background-color: white;
  border: {
    color: #307B21;
    radius: 0.5em;
    style: solid;
    width: 3px;
  }
  bottom: 140px;
  cursor: pointer;
  font-family: inherit;
  font-size: 24px;
  margin: auto;
  padding: 4px 32px;
  position: fixed;
  right: 20px;
  transition: 0.25s;
  z-index: 2;
  
  &:hover {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    transform: scale3d(1.1, 1.1, 1);
  }
}

#box_container {
  align-items: center;
  background-color: #F5F5F5;
  border-top: 3px solid #707070;
  display: flex;
  height: 160px;
  justify-content: center;
  overflow: hidden;
  width: 100%;
  
  .box1 {
    align-items: center;
    background-color: white;
    border: 4px solid #307B21;
    display: flex;
    height: 100px;
    justify-content: center;
    width: 100px;
  }
  .box2 {
    align-items: center;
    background-color: white;
    border: 4px solid rebeccapurple;
    display: flex;
    height: 100px;
    justify-content: center;
    width: 100px;
  }
  .infinite {
    animation-iteration-count: infinite;
    margin-left: 50px;
  }
}




/* ----------------------------------------------
 * Generated by Animista on 2019-3-20 23:56:28
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */
.scale-in-center{animation:scale-in-center .5s cubic-bezier(.25,.46,.45,.94) both}
@keyframes...

Vue

console.clear();

var libraryData = {
  animate: {
  	name: 'animate.css',
    url: 'https://daneden.github.io/animate.css/',
    static: 'animated',
    classes: {
      enter: ['bounceIn','bounceInDown','bounceInLeft','bounceInRight','bounceInUp','fadeIn','fadeInDown','fadeInDownBig','fadeInLeft','fadeInLeftBig','fadeInRight','fadeInRightBig','fadeInUp','fadeInUpBig','flipInX','flipInY','lightSpeedIn','rotateIn','rotateInDownLeft','rotateInDownRight','rotateInDown','jackInTheBox','rollIn','zoomIn','zoomInDown','zoomInLeft','zoomInRight','zoomInUp','slideInDown','slideInLeft','slideInRight','slideInUp'],
      leave:['bounceOut','bounceOutDown','bounceOutLeft','bounceOutRight','bounceOutUp','fadeOut','fadeOutDown','fadeOutDownBig','fadeOutLeft','fadeOutLeftBig','fadeOutRight','fadeOutRightBig','fadeOutUp','fadeOutUpBig','flipOutX','flipOutY','lightSpeedOut','rotateOut','rotateOutDownLeft','rotateOutDownRight','rotateOutUpLeft','rotateOutUpRight','hinge','rollOut','zoomOut','zoomOutDown','zoomOutLeft','zoomOutRight','zoomOutUp','slideOutDown','slideOutLeft','slideOutRight','slideOutUp'],
      hover: ['bounce', 'flash', 'pulse', 'rubberBand', 'shake', 'swing', 'tada', 'wobble', 'jello', 'heartBeat']
    }
  },
  animista: {
    name: 'animista',
    url: 'http://animista.net/',
    static: '',
    classes: {
      enter: ['scale-in-center','scale-in-hor-center','scale-in-ver-center','slit-in-vertical','slide-in-bck-center','slide-in-elliptic-top-fwd','bounce-in-top','swing-in-top-fwd','puff-in-hor','flicker-in-1'],
      leave: ['scale-out-center','scale-out-horizontal','scale-out-vertical','slit-out-vertical','slide-out-bck-center','slide-out-elliptic-top-bck','bounce-out-top','swing-out-top-bck','puff-out-hor','flicker-out-1'],
      hover: ['vibrate', 'flicker', 'shake-horizontal', 'jello', 'wobble', 'bounce', 'pulsate', 'blink']
    }
  },
  tuesday: {
    name: 'tuesday',
    url: 'http://shakrmedia.github.io/tuesday/',
    static: 'animated',
    classes:...