Smooth Fade

Element fades when user hovers over its container

Hover and the box will appear

Now you can see me

Hover and box will disappear

Now you can see me

HTML

<div class="fade-in">
    <div class="fade-item box">
        <p>Now you can see me</p>
    </div>
</div>

Sass

.box {
    width: 100%;
    height: 150px;
    background-color: lighten($elr-blue, 10%);
    border-color: $elr-blue;
    text-align: center;
    display: flex;
    align-items: center;
    color: $white;

    p {
        width: 100%;
        font-size: to-rems(24px);
    }
}

.fade-in,
.fade-out {
    padding: 10px;
    background-color: $lightest-grey;
}

.fade-in { @include elr-fade('show', .3s); }
.fade-out { @include elr-fade('hide', .3s); }

Flipper

Reveal content on click.

Click Me!

Click Me!

Here is some content.

Click Me!

Here is some content.

HTML

<div class="flipper">
    <div class="flipper-container">
        <div class="flipper-front">
            <p>Click Me!</p>
        </div>
        <div class="flipper-back">
            <p>Here is some content.</p>
        </div>
    </div>
</div>

Sass

.flipper {
    @include elr-flipper;
    padding: 40px;
}

.flipper-container {
    @include elr-circle(200px);
}

.flipper-front,
.flipper-back {
    @include elr-circle(200px);

    p {
        @include elr-centerer(true, false);
        @include elr-em-font(18px);
        width: 100%;
        color: $white;
        text-align: center;
    }
}

.flipper-container {
    @include elr-square(200px);
}

.flipper-front,
.flipper-back {
    @include elr-square(200px);

    p {
        @include elr-centerer(true, false);
        @include elr-em-font(18px);
        width: 100%;
        color: $white;
        text-align: center;
    }
}

.flipper-front,
.flipper-square-front { background-color: $elr-blue; }
.flipper-back,
.flipper-square-back { background-color: $dark-pink; }

JavaScript

$('.flipper-container').on('click', function() {
    $(this).toggleClass('active');
});

Animated Icons

Use animated icons in content blocks that require user interaction. When the user hovers over the icon the animation will occur.

Animation will also run when active class is dynamically added to icon. Use this if you want the animation to occur when the user hovers over a content block that contains the icon. Example JavaScript is included in the source code below.

Content Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus nisi eget enim vehicula, a rutrum nulla eleifend. Morbi et ante vitae nunc tincidunt finibus ut eu lectus. Cras ut est urna. Etiam sit amet tellus fermentum, eleifend ex ac, pharetra neque. Nam fermentum sem sed ornare faucibus.

HTML

<div class="icon-animated icon-border">
    <i class="fa fa-phone"></i>
</div>
<div class="icon-animated icon-border-pop">
    <i class="fa fa-gift"></i>
</div>
<div class="icon-animated icon-dash">
    <i class="fa fa-home"></i>
</div>
<div class="icon-animated icon-dash-rotate">
    <i class="fa fa-leaf"></i>
</div>
<div class="icon-animated icon-border-pull">
    <i class="fa fa-lock"></i>
</div>
<div class="icon-animated icon-background-fade">
    <i class="fa fa-paw"></i>
</div>

Sass

.icon-animated { @include elr-icon-animated; }
.icon-border { @include elr-icon-border; }
.icon-border-pop { @include elr-icon-border-pop; }
.icon-dash { @include elr-icon-dash; }
.icon-dash-rotate { @include elr-icon-dash(true); }
.icon-border-pull { @include elr-icon-border-pull; }
.icon-background-fade { @include elr-icon-background-fade; }

JavaScript

$('.icon-holder').hover(function() {
    $(this).find('.icon-animated').toggleClass('active');
});

Hamburger Icons

Adds some extra clarity to the traditional hamburger style menu icons. Icon animates to active state;

Requires JavaScript to add an active class when a DOM event occurs. We recommend using a click event or adding the active class when a menu is opened. Example JavaScript is included in the source code below.

HTML

<button class="icon-animate icon-hamburger icon-close">
    <span></span>
</button>
<button class="icon-animate icon-hamburger icon-arrow-left">
    <span></span>
</button>
<button class="icon-animate icon-hamburger icon-arrow-right">
    <span></span>
</button>

Sass

.icon-hamburger { @include elr-hamburger; }
.icon-close { @include elr-icon-close; }
.icon-arrow-left { @include elr-icon-arrow('left'); }
.icon-arrow-right { @include elr-icon-arrow('right'); }

JavaScript

$('.icon-animate').on('click', function() {
    $(this).toggleClass('active');
});

Tab Bar Transitions

These are simple line transitions that take place when a link is clicked. These animations can be incorporated into tab-based content. They are not recommended for navbars that link to other pages as the animation will not be visible to the user.

Requires some JavaScript to toggle the current class when a link is clicked. Example JavaScript is included in the source code below.

Simple Line

HTML

<nav class="menu-animated menu-simple-lines">
    <ul class="menu">
        <li class="menu-item current">
            <a href="#">Article 1</a>
        </li>
        <li class="menu-item">
            <a href="#">Article 2</a>
        </li>
        <li class="menu-item">
            <a href="#">Article 3</a>
        <li class="menu-item">
            <a href="#">Article 4</a>
        </li>
        <li class="menu-item">
            <a href="#">Article 5</a>
        </li>
        <li class="menu-line"></li>
    </ul>
</nav>

Sass

.menu-animated { @include menu-animated(); }
.menu-simple-lines { @include menu-simple-lines(); }

JavaScript

$('.menu-animated .menu-item').on('click', function(e) {
    e.preventDefault();
    let $that = $(this);

    $that.parent('ul').find('.current').removeClass('current');
    $that.addClass('current');
});

HTML

<nav class="menu-animated menu-double-lines">
    <ul class="menu">
        <li class="menu-item current">
            <a href="#">Article 1</a>
        </li>
        <li class="menu-item">
            <a href="#">Article 2</a>
        </li>
        <li class="menu-item">
            <a href="#">Article 3</a>
        <li class="menu-item">
            <a href="#">Article 4</a>
        </li>
        <li class="menu-item">
            <a href="#">Article 5</a>
        </li>
    </ul>
</nav>

Sass

.menu-animated { @include menu-animated(); }

JavaScript

$('.menu-animated .menu-item').on('click', function(e) {
    e.preventDefault();
    let $that = $(this);

    $that.parent('ul').find('.current').removeClass('current');
    $that.addClass('current');
});