JSFiddle - React, Tailwind, and code Playground

by Jed Mao

HTML

<script src="http://ricostacruz.com/jquery.transit/jquery.transit.min.js"></script>
<div class="animation animation--swing-out">
  <div class="animation--swing-out__content">
      Hello, world!
  </div>
</div>

<button class="start">Start</button>

SCSS

.animation--swing-out {
  -moz-perspective: 1000px;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}
.animation--swing-out__content {
  width: 10em;
  height: 10em;
  background: tomato;
  transform-origin: center top;
}

JavaScript

var $box = $('.animation--swing-out__content');

var rollback = true;

$('.start').click(function() {
    $box.css({ transformOrigin: 'center top' });
    $box.transit({ rotateX: 0, opacity: 1 }, 0);
    $box.transit({ rotateX: -95, opacity: 0 }, 600, 'ease-in', function() {
        if (rollback) {
            $box.transit({ rotateX: 0, opacity: 1 }, 600, 'ease-out');
        }
    });
});