Sequencing with Just Animate

index.html

<!-- DO NOT REMOVE: imports current just-animate version -->
[[[http://codepen.io/notoriousb1t/pen/bwqqoB]]]
<!-- DO NOT REMOVE: imports current just-animate version -->

 <div class="text-center">
     <div class="well">
         <span id="one" class="step">Step 1</span>
         <strong id="two" class="step">Step 2</strong>
         <em id="three" class="step">Step 3</em>
         <span id="four" class="step">Step 4</span>
         <strong id="five" class="step">Step 5</strong>
         <em id="six" class="step">Step 6</em>
     </div>
     <button id="play">
         Play
     </button>
     <button id="pause">
         Pause
     </button>
     <button id="reverse">
         Reverse
     </button>
     <button id="cancel">
         Cancel
     </button>
     <button id="finish">
         Finish
     </button>
 </div>

script.babel

const player = just
   .animate({
      targets: '#one',
      mixins: 'zoomIn',
      fill: 'none'
   })
   .animate({
      targets: '#two',
      mixins: 'fadeIn',
      fill: 'none'
   })
   .animate({
      targets: '#three',
      mixins: 'bounceIn',
      fill: 'none'
   })
   .animate({
      targets: '#four',
      mixins: 'zoomIn',
      fill: 'none'
   })
   .animate({
      targets: '#five',
      mixins: 'fadeIn',
      fill: 'none'
   })
   .animate({
      targets: '#six',
      mixins: 'bounceIn',
      fill: 'none'
   });

const playButton = document.getElementById('play');
const pauseButton = document.getElementById('pause');
const reverseButton = document.getElementById('reverse');
const cancelButton = document.getElementById('cancel');
const finishButton = document.getElementById('finish');

playButton.addEventListener('click', () => player.play());
pauseButton.addEventListener('click', () => player.pause());
reverseButton.addEventListener('click', () => player.reverse().play());
cancelButton.addEventListener('click', () => player.cancel());
finishButton.addEventListener('click', () => player.finish());

scripts

<script src="http://codepen.io/notoriousb1t/pen/bwqqoB.js"></script>

sequencing-with-just-animate.markdown

Sequencing with Just Animate

A Pen by Christopher Wallis on CodePen.

License.

style.css

body {
   background-color: #111;
   color: white;
}
.text-center {
   text-align: center;
   font-size: 18pt;
}
.well {
   border-bottom: solid thin black;
   padding-top: 1em;
   padding-bottom: 1em;
   background-color: white;
   color: black;
}

.step {
   display: inline-block;
   font-size: 1.2em;
   padding-left: 2.5rem;
}

button {
   padding: 1em 1.5em;
   margin-top: 1.5em;
   font-size: 12pt;
}