Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Google Menu Toggle Animation

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.

<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>
(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);
<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>
$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;
}
}
}
<link href="http://codepen.io/seanseansean/pen/d70b4101d59b7d61fec22720c13f6502" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.