JSFiddle - React, Tailwind, and code Playground

by bridget_kilgallon

HTML

<script src="https://davidwesleymartin.com/animtest/jquery.smoothstate.js"></script>
<div class="m-scene" id="main"> 
		<ul class="nav scene-element slideUp third-fire">
            slideUp third-fire<br />
            <a href="/">Animation won't reverse when leaving. Try it</a>
		<li class="scene-element fadeSlow last-fire">fadeSlow last-fire</li>
		</ul>
		
		<div id="left" class="scene-element fadeIn">
			<div class="sticky-boxes scene-element slideLeft second-fire">
				
				
				
				<div class="box" class="hide">
					<div class="scene-element fadeIn third-fire">
                        <h2>fadeIn third-fire</h2>					
					</div>
				</div>
			</div>
		</div>
		<div id="right" class="scene-element fadeIn">
            slideRight second-fire
			<div class="sticky-boxes scene-element slideRight second-fire">
				<div class="scene-element fadeIn third-fire">
					fadeIn third-fire
				</div>
			</div>
		</div>
	</div>

SCSS

/*---------------------------------- Fade in*/
@keyframes fadeIn {
  0% {opacity: 0;}
    100%{opacity:1;}
}

@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
    100%{opacity:1;}
}

@-moz-keyframes fadeIn { 
  0% {opacity: 0;}
    100%{opacity:1;}
}

/*------------------------------------------------------ Slide Left*/
@keyframes slideLeft {
    0% {transform: translate3d(100%, 0, 0);}
    100%{transform: none;}
}

@-webkit-keyframes slideLeft {
    0% {transform: translate3d(100%, 0, 0);}
    100%{transform: none;}
}

@-moz-keyframes slideLeft {
    0% {transform: translate3d(100%, 0, 0);}
    100%{transform: none;}
}

/*------------------------------------------------------ Slide Right*/
@keyframes slideRight {
   0% {transform: translate3d(-100%, 0, 0);}
  100%{transform: none;}
}

@-webkit-keyframes slideRight {
     0% {transform: translate3d(-100%, 0, 0);}
    100%{transform: none;}
}

@-moz-keyframes slideRight {
     0% {transform: translate3d(-100%, 0, 0);}
    100%{transform: none;}
}

/*------------------------------------------------------ Slide Up*/
@keyframes slideUp {
    0% {transform: translateY(100%);}
    100% {transform: translateY(0%);}  
}

@-webkit-keyframes slideUp {
    0% {transform: translateY(100%);}
    100% {transform: translateY(0%);}  
}

@-moz-keyframes slideUp {
    0% {transform: translateY(100%);}
    100% {transform: translateY(0%);}     
}

/*------------------------------------------------------ Slide Up*/
@keyframes slideDown {
    0% {transform: translateY(-100%);}
    100% {transform: translateY(0%);}  
}

@-webkit-keyframes slideDown {
    0% {transform: translateY(-100%);}
    100% {transform: translateY(0%);}  
}

@-moz-keyframes slideDown {
    0% {transform: translateY(-100%);}
    100% {transform: translateY(0%);}     
}

.m-scene .scene-element {
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  -moz-transition-timing-function:...

JavaScript

;(function ($) {
  'use strict';
  var content  = $('#main').smoothState({
        // onStart runs as soon as link has been activated
        onStart : {
          
          // Set the duration of our animation
          duration: 250,
          
          // Alterations to the page
          render: function () {

            // Quickly toggles a class and restarts css animations
            content.toggleAnimationClass('is-exiting');
          }
        }
      }).data('smoothState'); // makes public methods available
})(jQuery);

;(function ($) {
  'use strict';
  var $body    = $('html, body'), // Define jQuery collection 
      content  = $('#main').smoothState({
        onStart : {
          duration: 250,
          render: function () {
            content.toggleAnimationClass('is-exiting');
            
            // Scroll user to the top
            $body.animate({ 'scrollTop': 0 });

          }
        }
      }).data('smoothState');
})(jQuery);