How can I add an animated icon?

Design help General
1

Hi guys, I want to add one of these animated icons but I don’t know how.

Here are the icons: http://codepen.io/mblode/pen/evjfn/

Could you help me? Thanks!

1 Like
2

Quick try (without digging deep into the code). Choose selected effect and copy & paste style from .css field in codepen to custom code before head-tag:

<style>
@mixin navToggle($left, $top) {
  position: absolute;
  width: 60px;
  height: 120px;
  top: $top;
  left: $left;
  transition-duration: 0.5s;
}


.navToggle1{
  @include navToggle(0px, 60px);
  
  .icon-left {
    @include icon(8px, 30px);
    
    &:before{
      @include icon-before(8px, 30px, -20px);
    }
    
    &:after{
      @include icon-after(8px, 30px, 20px);
    }
    
    &:hover{
      cursor: pointer;
    }
  }
  
  .icon-right {
    @include icon(8px, 30px);
    left: 30px;
    
    &:before{
      @include icon-before(8px, 30px, -20px);
    }
    
    &:after{
      @include icon-after(8px, 30px, 20px);
    }
    
    &:hover{
      cursor: pointer;
    }
  }
  
  &.open {
    .icon-left {
      transition-duration: 0.5s;
      background: transparent;
      
      &:before{
        transform: rotateZ(45deg) scaleX(1.4) translate(4px, 4px);
      }

      &:after{
        transform: rotateZ(-45deg) scaleX(1.4) translate(4px, -4px);
      }
    }
    
    .icon-right {
      transition-duration: 0.5s;
      background: transparent;  
      
      &:before{
        transform: rotateZ(-45deg) scaleX(1.4) translate(-4px, 4px);
      }

      &:after{
        transform: rotateZ(45deg) scaleX(1.4) translate(-4px, -4px);
      }
    }
  }
}


</style>

Copy & paste this in custom code before body-tag:

<script src="http://codepen.io/assets/editor/live/css_live_reload_init.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

And this for the desired effect also before body-tag

Give the menu the desired class .navToggle1 in Webflow designer and it should work when you publish the site.