August 19, 2014

Recreating the Leaflr Checkmark Animation

Code, Design

by Andy Axton


Leaflr was one of the first projects that we created together, months before we became incorporated. Leaflr is a conservation calculator aimed at providing useful information to users about how much gas, emissions, oil and money that they might save by biking instead of driving to work. We built Leaflr at AngelHack Sacramento, a hackathon competition where teams are granted a set amount of time to create a product from scratch.

Leaflr won first place and since then we’ve gotten a lot of press coverage and compliments. Most of the compliments were for the animations and design of the Leaflr interface so I thought I would give some insight into how we did some of the animations, namely the checkmark animation.

Demo and code

See the Pen BFwnh by Rocket Department (@rocketdept) on CodePen.

HTML Structure

The HTML structure is fairly straightforward. A wrapper must be used around the icon background and icons so that the icons are not being rotated on click.

<div class="demo">
  <div class="icon-wrapper">
    <div class="icon-background"></div>
    <img src="http://beta.leaflr.com/themes/leaflr/images/icons/checkmark.svg" class="icon-checkmark"/>
    <img src="http://beta.leaflr.com/themes/leaflr/images/icons/electric.svg" class="icon"/>
  </div>
</div>

Javascript

This part is easy, all we are doing is adding the ‘.chosen’ class to the wrapper which will trigger the CSS animations. I’m using jQuery for this but vanilla javascript will work just as well.

$('.icon-wrapper').click(function(){
  $(this).addClass('chosen');
});

CSS/SCSS

I’m using SCSS and the mixin library Bourbon to make adding transitions, animations and keyframes easier to work with. I use it on almost every project, and I highly recommend it. If you aren’t using SCSS, you can view the compiled results in the Codepen demo above.

Icon Background

Nothing too special here. I used a psuedo-class to change the color on half of the orb and used an alpha color so it will slightly darken whatever color you want the orb to be. Also added a transition to fade in the new background color when the .chosen class is added.

.icon-background {
      position: relative;
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background: #DDE2E8;
      text-align: center;
      overflow: hidden;
      @include transition(background 200ms);

        &:before {
          content: '';
          position: absolute;
          width: 50%;
          height: 100%;
          left: 0;
          top: 0;
          background: rgba(0,0,0,.03);
        }
    }

Icons

The visible icon and checkmark icon, positioned absolutely so they are displayed on top of the icon background. Note: the checkmark icon must be reversed by default by changing the icon file or using a CSS transform, I chose to edit the file directly.

    .icon {
      position: absolute;
      top: 0;
      left: 0;
      width: 150px;
      height: 150px;
    }
  
    .icon-checkmark {
      position: absolute;
      top: 20px;
      left: 20px;
      width: 110px;
      height: 110px;
      display: none;
    }

Animation classes

The ‘&.chosen’ selector references the parent selector. In this case it’s ‘.icon-wrapper.chosen’. This is where the animations are being triggered. On the icon background we are changing the background color and triggerring the rotate animation. Next, we are hiding the visible icon and then showing the checkmark and triggering the flip animation on the checkmark icon. I used Ceaser to generate the custom easing, it adds a nice touch.

    &.chosen {
      .icon-background {
        background-color: #2ECC71;
        @include animation(chosen 400ms);
        @include animation-timing-function( cubic-bezier(0.610, 0.455, 0.000, 1) );
        @include animation-fill-mode(both); 
      }
      
      .icon {
        display: none;  
      }
      
      .icon-checkmark {
        display: block;
        @include animation(rotateIn 400ms);
        @include animation-timing-function( cubic-bezier(0.610, 0.455, 0.000, 1) );
        @include animation-fill-mode(both);
      }
    } 
@include keyframes(rotateIn){
    0%  { @include transform(rotateY(0deg)); }
    100% { @include transform(rotateY(180deg)); } 
}

@include keyframes(chosen){
    0%  { @include transform(rotate(0deg)); }
    100% { @include transform(rotate(90deg)); }   
}

 

That’s it! All of the Leaflr code is available on github if you want to check it out. If you have any questions or run into any problems, email me at andy@rocketdept.com.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>