Animations
Lazyload Any Animation
An easy way to lazyload any animation class - with LESS code!
**Please Note: This does not improve site speed
- Add any animation to your HTML: data-animation="yourAnimationClass"
- Add data-stagger="yourAnimationClass" to add the same animation to each immediate child in your HTML
- Adjust the speed of your animation: data-speed="fast". The options are: "fast" or "slow". The default is a medium speed (no need to add anything to get the default medium speed).
- Add a delay: data-delay="2" (select 1 - 26 to add incriments of .25s)
//===============================================================
// Scroll Trigger Animations
//===============================================================
// Add any lazyload animation to all immediate children
$('[data-stagger]').each(function(){
var animation = $(this).data('stagger');
$(this).children().attr('data-animation', animation);
$(this).addClass('visible');
});
// Lazyload any animation
function triggerAnimation(elm){
var animation = $(elm).data('animation');
var speed = $(elm).data('speed') ? 'animated-' + $(elm).data('speed') : 'animated';
var delay = $(elm).data('delay') ? 'animate-' + $(elm).data('delay') : '';
$(elm).addClass(speed + " " + animation + " " + delay);
};
$('[data-animation]').scrollfire({
offset: 0,
topOffset: 0,
bottomOffset: 0,
onBottomIn: function (elm, distance) {
triggerAnimation(elm)
}
});
// Check if element is in viewport (above the fold)
var isInViewport = function (elm) {
var bounding = elm.getBoundingClientRect();
return (
bounding.top >= 0 &&
bounding.left >= 0 &&
bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
);
};
// Trigger all animations in viewport (above the fold)
$('[data-animation]').each(function(){
var elm = this;
if (isInViewport(elm)) {
triggerAnimation(elm)
}
});
Hide animated elements before they are triggered. This prevents elements from flashing out while in view just before lazy animation plays.
@media (min-width: 992px) {
[data-animation]:not(.animated):not(.animated-fast):not(.animated-slow), [data-stagger]:not(.visible) { animation-fill-mode: backwards; animation-play-state: paused; opacity: 0; transition: opacity .2s; }
}
Additional Animations that include zooming and fading in from more directions & angles
/* NEW ANIMATIONS */
@-webkit-keyframes fadeFarInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeFarInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeFarInLeft {
-webkit-animation-name: fadeFarInLeft;
animation-name: fadeFarInLeft;
}
/* */
@-webkit-keyframes fadeFarInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeFarInRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeFarInRight {
-webkit-animation-name: fadeFarInRight;
animation-name: fadeFarInRight;
}
/* */
@-webkit-keyframes fadeInUpRight {
from {
opacity: 0;
-webkit-transform: translate3d(10%, 10%, 0);
transform: translate3d(10%, 10%, 0);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInUpRight {
from {
opacity: 0;
-webkit-transform: translate3d(10%, 10%, 0);
transform: translate3d(10%, 10%, 0);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInUpRight {
-webkit-animation-name: fadeInUpRight;
animation-name: fadeInUpRight;
}
/* */
@-webkit-keyframes fadeFarInUpRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 100%, 0);
transform: translate3d(100%, 100%, 0);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeFarInUpRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, 100%, 0);
transform: translate3d(100%, 100%, 0);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeFarInUpRight {
-webkit-animation-name: fadeFarInUpRight;
animation-name: fadeFarInUpRight;
}
/* */
@-webkit-keyframes fadeInDownRight {
from {
opacity: 0;
-webkit-transform: translate3d(10%, -10%, 0);
transform: translate3d(10%, -10%, 0);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInDownRight {
from {
opacity: 0;
-webkit-transform: translate3d(10%, -10%, 0);
transform: translate3d(10%, -10%, 0);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInDownRight {
-webkit-animation-name: fadeInDownRight;
animation-name: fadeInDownRight;
}
/* */
@-webkit-keyframes fadeInFarDownRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, -100%, 0);
transform: translate3d(100%, -100%, 0);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInFarDownRight {
from {
opacity: 0;
-webkit-transform: translate3d(100%, -100%, 0);
transform: translate3d(100%, -100%, 0);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInFarDownRight {
-webkit-animation-name: fadeInFarDownRight;
animation-name: fadeInFarDownRight;
}
/* */
@-webkit-keyframes fadeInUpLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-10%, 10%, 0);
transform: translate3d(-10%, 10%, 0);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInUpLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-10%, 10%, 0);
transform: translate3d(-10%, 10%, 0);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInUpLeft {
-webkit-animation-name: fadeInUpLeft;
animation-name: fadeInUpLeft;
}
/* */
@-webkit-keyframes fadeFarInUpLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 100%, 0);
transform: translate3d(-100%, 100%, 0);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeFarInUpLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, 100%, 0);
transform: translate3d(-100%, 100%, 0);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeFarInUpLeft {
-webkit-animation-name: fadeFarInUpLeft;
animation-name: fadeFarInUpLeft;
}
/* */
@-webkit-keyframes fadeInDownLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-10%, -10%, 0);
transform: translate3d(-10%, -10%, 0);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInDownLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-10%, -10%, 0);
transform: translate3d(-10%, -10%, 0);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeInDownLeft {
-webkit-animation-name: fadeInDownLeft;
animation-name: fadeInDownLeft;
}
/* */
@-webkit-keyframes fadeFarInDownLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, -100%, 0);
transform: translate3d(-100%, -100%, 0);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeFarInDownLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-100%, -100%, 0);
transform: translate3d(-100%, -100%, 0);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
.fadeFarInDownLeft {
-webkit-animation-name: fadeFarInDownLeft;
animation-name: fadeFarInDownLeft;
}
/* */
@-webkit-keyframes zoomInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 50%, 0) scale(0);
transform: translate3d(0, 50%, 0) scale(0);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes zoomInUp {
from {
opacity: 0;
-webkit-transform: translate3d(0, 50%, 0) scale(0);
transform: translate3d(0, 50%, 0) scale(0);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
}
.zoomInUp {
-webkit-animation-name: zoomInUp;
animation-name: zoomInUp;
}
/* */
@-webkit-keyframes zoomInUpMin {
from {
opacity: 0;
-webkit-transform: translate3d(0, 50%, 0) scale(.95);
transform: translate3d(0, 50%, 0) scale(.95);
}
30% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes zoomInUpMin {
from {
opacity: 0;
-webkit-transform: translate3d(0, 50%, 0) scale(.95);
transform: translate3d(0, 50%, 0) scale(.95);
}
30% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
}
.zoomInUpMin {
-webkit-animation-name: zoomInUpMin;
animation-name: zoomInUpMin;
}
/* */
@-webkit-keyframes zoomInUpRight {
from {
opacity: 0;
-webkit-transform: translate3d(50%, 50%, 0) scale(0);
transform: translate3d(50%, 50%, 0) scale(0);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes zoomInUpRight {
from {
opacity: 0;
-webkit-transform: translate3d(50%, 50%, 0) scale(0);
transform: translate3d(50%, 50%, 0) scale(0);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
}
.zoomInUpRight {
-webkit-animation-name: zoomInUpRight;
animation-name: zoomInUpRight;
}
/* */
@-webkit-keyframes zoomInUpLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-50%, 50%, 0) scale(0);
transform: translate3d(-50%, 50%, 0) scale(0);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes zoomInUpLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-50%, 50%, 0) scale(0);
transform: translate3d(-50%, 50%, 0) scale(0);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
}
.zoomInUpLeft {
-webkit-animation-name: zoomInUpLeft;
animation-name: zoomInUpLeft;
}
/* */
@-webkit-keyframes zoomInDownLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-50%, -50%, 0) scale(0);
transform: translate3d(-50%, -50%, 0) scale(0);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes zoomInDownLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-50%, -50%, 0) scale(0);
transform: translate3d(-50%, -50%, 0) scale(0);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
}
.zoomInDownLeft {
-webkit-animation-name: zoomInDownLeft;
animation-name: zoomInDownLeft;
}
/* */
@-webkit-keyframes zoomInDownRight {
from {
opacity: 0;
-webkit-transform: translate3d(50%, -50%, 0) scale(0);
transform: translate3d(50%, -50%, 0) scale(0);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes zoomInDownRight {
from {
opacity: 0;
-webkit-transform: translate3d(50%, -50%, 0) scale(0);
transform: translate3d(50%, -50%, 0) scale(0);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
}
.zoomInDownRight {
-webkit-animation-name: zoomInDownRight;
animation-name: zoomInDownRight;
}
/* */
@-webkit-keyframes zoomInRight {
from {
opacity: 0;
-webkit-transform: translate3d(50%, 0, 0) scale(0);
transform: translate3d(50%, 0, 0) scale(0);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes zoomInRight {
from {
opacity: 0;
-webkit-transform: translate3d(50%, 0, 0) scale(0);
transform: translate3d(50%, 0, 0) scale(0);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
}
.zoomInRight {
-webkit-animation-name: zoomInRight;
animation-name: zoomInRight;
}
/* */
@-webkit-keyframes zoomInRightMin {
from {
opacity: 0;
-webkit-transform: translate3d(30%, 0, 0) scale(.5);
transform: translate3d(30%, 0, 0) scale(.5);
}
30% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes zoomInRightMin {
from {
opacity: 0;
-webkit-transform: translate3d(30%, 0, 0) scale(.5);
transform: translate3d(30%, 0, 0) scale(.5);
}
30% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
}
.zoomInRightMin {
-webkit-animation-name: zoomInRightMin;
animation-name: zoomInRightMin;
}
/* */
@-webkit-keyframes zoomInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-50%, 0, 0) scale(0);
transform: translate3d(-50%, 0, 0) scale(0);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes zoomInLeft {
from {
opacity: 0;
-webkit-transform: translate3d(-50%, 0, 0) scale(0);
transform: translate3d(-50%, 0, 0) scale(0);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
}
.zoomInLeft {
-webkit-animation-name: zoomInLeft;
animation-name: zoomInLeft;
}
/* */
@-webkit-keyframes zoomInLeftMin {
from {
opacity: 0;
-webkit-transform: translate3d(-30%, 0, 0) scale(0.5);
transform: translate3d(-30%, 0, 0) scale(0.5);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes zoomInLeftMin {
from {
opacity: 0;
-webkit-transform: translate3d(-30%, 0, 0) scale(0.5);
transform: translate3d(-30%, 0, 0) scale(0.5);
}
60% {
opacity: 1;
}
to {
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
}
.zoomInLeftMin {
-webkit-animation-name: zoomInLeftMin;
animation-name: zoomInLeftMin;
}
/* */
@-webkit-keyframes fadeSlowInUp {
0% { top: 70px; -moz-transform: translate(0, 15%); opacity: 0; }
50% { top: 45px; -moz-transform: translate(0, 15%); opacity: 0; }
100% { top: 0; -moz-transform: translate(0, 0); opacity: 1; }
}
@keyframes fadeSlowInUp {
0% { top: 70px; -moz-transform: translate(0, 15%); opacity: 0; }
50% { top: 45px; -moz-transform: translate(0, 15%); opacity: 0; }
100% { top: 0; -moz-transform: translate(0, 0); opacity: 1; }
}
.fadeSlowInUp {
position: relative;
transition-timing-function: cubic-bezier(.165, .84, .44, 1);
-webkit-animation-name: fadeSlowInUp;
animation-name: fadeSlowInUp;
}
/* */
@-webkit-keyframes zoomInMin {
from {
opacity: 0;
-webkit-transform: scale3d(.8, .8, .8);
transform: scale3d(.8, .8, .8);
}
30% {
opacity: 1;
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes zoomInMin {
from {
opacity: 0;
-webkit-transform: scale3d(.8, .8, .8);
transform: scale3d(.8, .8, .8);
}
30% {
opacity: 1;
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.zoomInMin {
-webkit-animation-name: zoomInMin;
animation-name: zoomInMin;
}
/* */
@-webkit-keyframes nudgeRight {
from {
-webkit-transform: translate(0,0);
transform: translate(0,0);
}
to {
-webkit-transform: translate(-4px,0);
transform: translate(-4px,0);
}
}
@keyframes nudgeRight {
from {
-webkit-transform: translate(0,0);
transform: translate(0,0);
}
to {
-webkit-transform: translate(4px,0);
transform: translate(4px,0);
}
}
.nudgeRight, .nudgeRight-hover:hover i {
animation-direction: alternate; -webkit-animation-duration: .6s; animation-duration: .6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: nudgeRight; animation-name: nudgeRight; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;
}