Gerillass

v2.1.0

Loadify

Type: Mixin
@include loadify();

* You can call mixins with or without the gls- namespace (e.g. @include gls-loadify();).

The Loadify Sass mixin is a handy tool that helps you make a page element load with a smooth fade-in effect while the page is loading.

Arguments

NameTypeDescription
$modestringAccepts init value. This initializes the whole effects for the selected elements. It must be called once at the root of your stylesheet document.
$delaytimeSpecifies the amount of time a design element must wait before it starts appearing on the page. The default value is set to 0.2s.
$durationtimeSets the length of time a page element takes to load. This is the second argument. It must always come last and cannot be used on its own. The default value is 0.5s.

The time value must be given in either seconds (s) or milliseconds (ms). The value must be zero or positive, and the unit is always required.

Examples

Sass
@include loadify(init);
CSS
//CSS Output
@keyframes loadify {
  to {
    opacity: 1;
    visibility: visible;
    backface-visibility: visible;
  }
}

Let's see the animation on an image element. Call the Loadify mixin inside the element's selector and do not pass any arguments yet, just to see the loading effect with the default timing values. Now scroll to the image and refresh the page to see how smooth the image appears on the page.

Sass
.loadify-img {
  @include loadify();
}
CSS
@keyframes loadify {
  to {
    opacity: 1;
    visibility: visible;
    backface-visibility: visible;
  }
}
.loadify-img {
  opacity: 0;
  visibility: hidden;
  backface-visibility: hidden;
  animation-name: loadify;
  animation-fill-mode: forwards;
}
@media (prefers-reduced-motion: reduce) {
  .loadify-img {
    opacity: 1;
    visibility: visible;
    backface-visibility: visible;
    animation: none;
  }
}

.loadify-img {
  animation-delay: 0.2s;
  animation-duration: 0.5s;
}
Result

Let's dive a bit deeper to understand exactly what this handy tool can do. Suppose you have a group of items like the ones below, and you want them to appear smoothly as the page loads.

HTML
<div class="parent-element">
  <div class="item">01</div>
  <div class="item">02</div>
  <div class="item">03</div>
  <div class="item">04</div>
  <div class="item">05</div>
  <div class="item">06</div>
  <div class="item">07</div>
  <div class="item">08</div>
</div>
Sass
.parent-element {
  .item {
    @include loadify();
  }
}
CSS
@keyframes loadify {
  to {
    opacity: 1;
    visibility: visible;
    backface-visibility: visible;
  }
}
.parent-element .item {
  opacity: 0;
  visibility: hidden;
  backface-visibility: hidden;
  animation-name: loadify;
  animation-fill-mode: forwards;
}
@media (prefers-reduced-motion: reduce) {
  .parent-element .item {
    opacity: 1;
    visibility: visible;
    backface-visibility: visible;
    animation: none;
  }
}

.parent-element .item {
  animation-delay: 0.2s;
  animation-duration: 0.5s;
}
Result

Now let's pass 1s as a custom value for the animation-delay CSS property, to set how long the selected element waits before it starts to appear. Refresh the page to see the effect.

Sass
.parent-element {
  .item {
    @include loadify(1s);
  }
}
CSS
@keyframes loadify {
  to {
    opacity: 1;
    visibility: visible;
    backface-visibility: visible;
  }
}
.parent-element .item {
  opacity: 0;
  visibility: hidden;
  backface-visibility: hidden;
  animation-name: loadify;
  animation-fill-mode: forwards;
}
@media (prefers-reduced-motion: reduce) {
  .parent-element .item {
    opacity: 1;
    visibility: visible;
    backface-visibility: visible;
    animation: none;
  }
}

.parent-element .item {
  animation-delay: 1s;
  animation-duration: 0.5s;
}
Result

Now we are going to try a fantastic example to see how the Gerillass Sass library can ease your frontend development, and how well it works when you combine two or more mixins. We will use the only mixin to select items in the list based on their index positions, and then call the loadify mixin inside each of those selectors to make the elements appear at different times (with different delay and duration values). Scroll to the bottom of this example and refresh the page to see the effect.

Sass
.parent-element {
  .item {
    @include only(1) {
      @include loadify(0.2s);
    }
    @include only(2) {
      @include loadify(0.4s);
    }
    @include only(3) {
      @include loadify(0.6s);
    }
    @include only(4) {
      @include loadify(0.8s);
    }
    @include only(5) {
      @include loadify(0.1s);
    }
    @include only(6) {
      @include loadify(1.2s);
    }
    @include only(7) {
      @include loadify(1.4s);
    }
    @include only(8) {
      @include loadify(1.6s);
    }
  }
}
CSS
@keyframes loadify {
  to {
    opacity: 1;
    visibility: visible;
    backface-visibility: visible;
  }
}
.parent-element .item:nth-of-type(8), .parent-element .item:nth-of-type(7), .parent-element .item:nth-of-type(6), .parent-element .item:nth-of-type(5), .parent-element .item:nth-of-type(4), .parent-element .item:nth-of-type(3), .parent-element .item:nth-of-type(2), .parent-element .item:nth-of-type(1) {
  opacity: 0;
  visibility: hidden;
  backface-visibility: hidden;
  animation-name: loadify;
  animation-fill-mode: forwards;
}
@media (prefers-reduced-motion: reduce) {
  .parent-element .item:nth-of-type(8), .parent-element .item:nth-of-type(7), .parent-element .item:nth-of-type(6), .parent-element .item:nth-of-type(5), .parent-element .item:nth-of-type(4), .parent-element .item:nth-of-type(3), .parent-element .item:nth-of-type(2), .parent-element .item:nth-of-type(1) {
    opacity: 1;
    visibility: visible;
    backface-visibility: visible;
    animation: none;
  }
}

.parent-element .item:nth-of-type(1) {
  animation-delay: 0.2s;
  animation-duration: 0.5s;
}
.parent-element .item:nth-of-type(2) {
  animation-delay: 0.4s;
  animation-duration: 0.5s;
}
.parent-element .item:nth-of-type(3) {
  animation-delay: 0.6s;
  animation-duration: 0.5s;
}
.parent-element .item:nth-of-type(4) {
  animation-delay: 0.8s;
  animation-duration: 0.5s;
}
.parent-element .item:nth-of-type(5) {
  animation-delay: 0.1s;
  animation-duration: 0.5s;
}
.parent-element .item:nth-of-type(6) {
  animation-delay: 1.2s;
  animation-duration: 0.5s;
}
.parent-element .item:nth-of-type(7) {
  animation-delay: 1.4s;
  animation-duration: 0.5s;
}
.parent-element .item:nth-of-type(8) {
  animation-delay: 1.6s;
  animation-duration: 0.5s;
}
Result

Now let's try another sexy example. This time we are going to change the display order of the boxes (we will be using a diagonal pattern) and pass a value for the second argument to control the value of the animation-duration CSS property. The display order will be as follows: "1", "6", "3", "8", "5", "2", "7", "4" Scroll to the bottom of this example and refresh the page to see the effect.

Sass
.parent-element {
  .item {
    @include only(1) {
      @include loadify(0.2s, 0.5s);
    }
    @include only(2) {
      @include loadify(1.2s, 3s);
    }
    @include only(3) {
      @include loadify(0.6s, 1.5s);
    }
    @include only(4) {
      @include loadify(1.6s, 4s);
    }
    @include only(5) {
      @include loadify(1s, 2.5s);
    }
    @include only(6) {
      @include loadify(0.4s, 1s);
    }
    @include only(7) {
      @include loadify(1.4s, 3.5s);
    }
    @include only(8) {
      @include loadify(0.8s, 2s);
    }
  }
}
CSS
@keyframes loadify {
  to {
    opacity: 1;
    visibility: visible;
    backface-visibility: visible;
  }
}
.parent-element .item:nth-of-type(8), .parent-element .item:nth-of-type(7), .parent-element .item:nth-of-type(6), .parent-element .item:nth-of-type(5), .parent-element .item:nth-of-type(4), .parent-element .item:nth-of-type(3), .parent-element .item:nth-of-type(2), .parent-element .item:nth-of-type(1) {
  opacity: 0;
  visibility: hidden;
  backface-visibility: hidden;
  animation-name: loadify;
  animation-fill-mode: forwards;
}
@media (prefers-reduced-motion: reduce) {
  .parent-element .item:nth-of-type(8), .parent-element .item:nth-of-type(7), .parent-element .item:nth-of-type(6), .parent-element .item:nth-of-type(5), .parent-element .item:nth-of-type(4), .parent-element .item:nth-of-type(3), .parent-element .item:nth-of-type(2), .parent-element .item:nth-of-type(1) {
    opacity: 1;
    visibility: visible;
    backface-visibility: visible;
    animation: none;
  }
}

.parent-element .item:nth-of-type(1) {
  animation-delay: 0.2s;
  animation-duration: 0.5s;
}
.parent-element .item:nth-of-type(2) {
  animation-delay: 1.2s;
  animation-duration: 3s;
}
.parent-element .item:nth-of-type(3) {
  animation-delay: 0.6s;
  animation-duration: 1.5s;
}
.parent-element .item:nth-of-type(4) {
  animation-delay: 1.6s;
  animation-duration: 4s;
}
.parent-element .item:nth-of-type(5) {
  animation-delay: 1s;
  animation-duration: 2.5s;
}
.parent-element .item:nth-of-type(6) {
  animation-delay: 0.4s;
  animation-duration: 1s;
}
.parent-element .item:nth-of-type(7) {
  animation-delay: 1.4s;
  animation-duration: 3.5s;
}
.parent-element .item:nth-of-type(8) {
  animation-delay: 0.8s;
  animation-duration: 2s;
}
Result

Do you want to join our Slack group?

Meet the Gerillass community. If you have any trouble using Gerillass, join the groups, ask people, and share your experiences with the others.

JOIN OUR SLACK GROUP!

Copyright © 2020, Designed and built by @selfishprimate. The code licensed under the Apache License, Version 2.0