Gerillass 3.0.0 is out. One gradient mixin replaces two, and text-gradient takes its colours first, so read the migration guide before you upgrade.
Gerillass
v3.0.0* 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.
Reduced motion is handled for you. Under prefers-reduced-motion: reduce the end state is applied directly and no animation runs, so the content is simply there.
Note that switching the animation off would not have worked. The element starts at opacity: 0 with visibility: hidden, and the animation is the thing that reveals it. Turning the animation off and doing nothing else would have left the content invisible for good. That is why the mixin sets the end state instead, and only then sets animation: none.
Arguments
| Name | Type | Description |
|---|---|---|
$mode | string | Accepts init value. This initializes the whole effects for the selected elements. It must be called once at the root of your stylesheet document. |
$delay | time | Specifies the amount of time a design element must wait before it starts appearing on the page. The default value is set to 0.2s. |
$duration | time | Sets 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
@include loadify(init);//CSS Output
@keyframes loadify {
to {
opacity: 1;
visibility: visible;
backface-visibility: visible;
}
}Keep in mind! You are free to give the element any selector name you want.
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.
.loadify-img {
@include loadify();
}@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;
}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.
<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>.parent-element {
.item {
@include loadify();
}
}@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;
}Keep in mind! You must call the loadify mixin once at the root of your stylesheet as an initializer.
With @use, the call has to be able to see init. The mixin works by @extend, and under the module system a selector can only extend a placeholder from a module it loads. So init and every call must be in the same file, or the file with the call must @use the file that calls init. Otherwise Sass stops with:
Error: The target selector was not found.Putting init in your entry file is not enough when the calls live in partials the entry file loads, because those partials do not load the entry file.
// _animations.scss
@use "gerillass" as gls;
@include gls.loadify(init);
// _hero.scss
@use "gerillass" as gls;
@use "animations"; // required: loads init
.hero { @include gls.loadify; }A stylesheet that still loads the library with @import shares one global scope and is not affected.
Important! When you call the mixin inside a selector without passing any arguments, it works differently, as you can see in the example below. Here, the item selector takes the default animation-delay and animation-duration values.
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.
.parent-element {
.item {
@include loadify(1s);
}
}@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;
}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.
.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);
}
}
}@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;
}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.
.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);
}
}
}@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;
}