Streaming live at 10am (PST)

How can I add an animated icon?


#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!


#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.


#3