2

i tried to embed the smoothState.js into my project. But for any reasons the "animation-direction: alternate-reverse;" is not working (or something else). The element is only fading in but not out. I tried everything but nothing works.

html

<div id="main" class="m-scene">
  <a href="archive02.php">archive</a>
  <div class="scene_element scene_element--fadein">
    <div class="project_headline">
        <p>P01</p>
    </div>
  </div>
</div>

    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.1.min.js"><\/script>')</script>
    <script src="jquery.smoothState.js"></script>
    <script src="functions.js"></script>
    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
    <script>
        (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
        function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
        e=o.createElement(i);r=o.getElementsByTagName(i)[0];
        e.src='//www.google-analytics.com/analytics.js';
        r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
        ga('create','UA-XXXXX-X');ga('send','pageview');
    </script>

Css

m-scene .scene_element {
  animation-duration: 5.25s;
  -webkit-animation-duration: 5.25s;
  -moz-animation-duration: 5.25;
  transition-timing-function: ease-in;
  -webkit-transition-timing-function: ease-in;
  -moz-transition-timing-function: ease-in;
  animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
}

.m-scene .scene_element--fadein {
  animation-name: fadeIn;
  -webkit-animation-name: fadeIn;
  -moz-animation-name: fadeIn;
}

.m-scene.is-exiting .scene_element {
  animation-direction: alternate-reverse;
  -webkit-animation-direction: alternate-reverse;
  -moz-animation-direction: alternate-reverse;
}

/*
 * Keyframes
 */
@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; }
}

JS

// Contents of functions.js
;(function($) {
  'use strict';
  var $body = $('html, body'),
      content = $('#main').smoothState({
        // Runs when a link has been activated
        onStart: {
          duration: 250, // Duration of our animation
          render: function (url, $container) {
            // toggleAnimationClass() is a public method
            // for restarting css animations with a class
            content.toggleAnimationClass('is-exiting');
            // Scroll user to the top
            $body.animate({
              scrollTop: 0
            });
          }
        }
      }).data('smoothState');
      //.data('smoothState') makes public methods available
})(jQuery);

Hope someone can help me :)

Miguel Ángel Pérez
  • 67
  • 5
Dennis
  • 137
  • 1
  • 2
  • 14

1 Answers1

0

I had a similar issue with smoothState.js. In my case, I just needed to move the script from the header to below the footer.

user3223847
  • 1