LouisWhit
4/25/2018 - 8:36 PM

CSS - Layout.css animation addon

Data roles based animation system. If an element contains the class .animate the JS runs on it. The JS looks for a data-animation class name that matches the CSS. If no data-animation tag is found the JS defaults to fadeInLeft.

client-animations.js
content_copyfile_download
var screenHeight = $(window).height();
    $(".full-height").height(screenHeight);
    $("#loading-screen").delay(500).fadeOut("slow");
    $.fn.isInViewport = function() {
      var elementTop = $(this).offset().top;
      var elementBottom = elementTop + $(this).outerHeight();
      var viewportTop = $(window).scrollTop();
      var viewportBottom = viewportTop + $(window).height();
      return elementBottom > viewportTop && elementTop < viewportBottom;
    };
    $(window).on('resize scroll load', function() {
      $(".animate").each(function(index, el) {
        var test = $(this);
        var answer = test.isInViewport();
        if (answer === true){
          var animation = test.data("animation");
          if (animation == null) {
            animation = "fadeInLeft";
          }
          test.addClass(animation).addClass('animated').removeClass('animate');
        } 
      });
    });
layout-animations.css
content_copyfile_download
 /* Template - Animations
   ============================================== */
   @keyframes spinning_animation{0%{ transform:scale(1) rotate(0deg);  -o-transform:scale(1) rotate(0deg)}
   50%{ transform:scale(0.8) rotate(360deg);  -o-transform:scale(0.8) rotate(360deg)}
   100%{ transform:scale(1) rotate(720deg);  -o-transform:scale(1) rotate(720deg)}
   }

   @-webkit-keyframes spinning_animation{0%{ -webkit-transform:scale(1) rotate(0deg)}
   50%{ -webkit-transform:scale(0.8) rotate(360deg)}
   100%{ -webkit-transform:scale(1) rotate(720deg)}

   }

   @keyframes bounce_in_animation{0%{ transform:scale(0,0);  -o-transform:scale(0,0)}
   20%{ transform:scale(1.4,1.4);  -o-transform:scale(1.4,1.4)}
   50%{ transform:scale(0.8,0.8);  -o-transform:scale(0.8,0.8)}
   85%{ transform:scale(1.1,1.1);  -o-transform:scale(1.1,1.1)}
   100%{ transform:scale(1,1);  -o-transform:scale(1,1)}
   }

   @-webkit-keyframes bounce_in_animation{0%{ -webkit-transform:scale(0,0)}
   20%{ -webkit-transform:scale(1.4,1.4)}
   50%{ -webkit-transform:scale(0.8,0.8)}
   85%{ -webkit-transform:scale(1.1,1.1)}
   100%{ -webkit-transform:scale(1,1)}
   }

   @keyframes grow_in_animation{0%{ transform:scale(0,0);  -o-transform:scale(0,0)}
   100%{ transform:scale(1,1);  -o-transform:scale(1,1)}
   }

   @-webkit-keyframes grow_in_animation{0%{ -webkit-transform:scale(0,0)}
   100%{ -webkit-transform:scale(1,1)}
   }

   @keyframes scrollDownHero {
    from {
      bottom:89px;
    }
    to{
      bottom:55px;
    }
   }
 /* ============================================= */