Google Menu Toggle Animation

Google Menu Toggle Animation.markdown

Google Menu Toggle Animation

Forcing myself to use Greensock more. Enjoying how easy and fun it is so far! Just a simple animation that mimics Google's toggle animation

A Pen by Sean Dempsey on CodePen.

License.

index.html

<div class="container">
    <div class="toggle" id="toggle">
        <span class="text" id="text">Menu</span>
        <div class="icon" id="icon">
            <div class="top"></div>
            <div class="middle"></div>
            <div class="bottom"></div>
        </div>
    </div>
</div>

script.js

(function($) {
    'use-strict';

    var toggle, icon;

    function onDocumentReady() {
        toggle = $('#toggle');
        icon = $('#icon');
        toggle.on('click', onToggleClick);
    }

    function onToggleClick() {
        var aniEasing = Quart.easeInOut,
            aniDuration = 0.75,
            top = icon.find('.top'),
            middle = icon.find('.middle'),
            bottom = icon.find('.bottom');

        toggle.toggleClass('active');

        TweenMax.to(icon, aniDuration, {
            rotation: '+=180',
            ease: aniEasing
        });

        if (toggle.hasClass('active')) {
            TweenMax.to(top, aniDuration, {
                width: '50%',
                rotation: 45,
                x: '104%',
                y: 5,
                ease: aniEasing,
                yoyo: true
            });
            TweenMax.to(bottom, aniDuration, {
                width: '50%',
                rotation: -45,
                x: '108%',
                y: -5,
                ease: aniEasing
            });
        } else {
            TweenMax.to(top, aniDuration, {
                width: '100%',
                rotation: 0,
                x: '0%',
                y: 0,
                ease: aniEasing
            });
            TweenMax.to(bottom, aniDuration, {
                width: '100%',
                rotation: 0,
                x: '0%',
                y: 0,
                ease: aniEasing
            });
        }

    }

    $(onDocumentReady);
})(jQuery);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>

style.css

$primary: (
	100: #cfd8dc,
	500: #607d8b,
	700: #455a64
);

$accent: (
	700: #d50000
);

$colors: (
    body-bg: map-get($primary, 500),
    body-color: #fff,
    icon-bg: #fff
);



body {
	background: color(body-bg);
    color: color(body-color);
    font-family: 'Open Sans', sans-serif;
}

.container {
	@include center;	
}

.toggle {
    align-items: center;
    cursor: pointer;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    width: em(100px);
    
    .text {
        font-size: em(18px);
        transform: translate3d(0,0,0);
    }
}

.icon {
    display: block;
    height: em(25px);
    position: relative;
    width: em(35px);
    transform: rotateZ(0);
    
    div {
        background-color: color(icon-bg);
        height: 2px;
        left: 0;
        position: absolute;
        width: 100%;
        
        &.middle {
            top: 50%;
            transform: translateY(-50%);
        }
        
        &.bottom {
            bottom: 0;
        }
    }    
}

styles

<link href="http://codepen.io/seanseansean/pen/d70b4101d59b7d61fec22720c13f6502" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />