Skip to content

Instantly share code, notes, and snippets.

@gavin-hall

gavin-hall/animated-navigation.markdown

Created February 5, 2022 19:28
Show Gist options
  • Save gavin-hall/9a4a01d4209a0f319d1b71120dc28df5 to your computer and use it in GitHub Desktop.
Save gavin-hall/9a4a01d4209a0f319d1b71120dc28df5 to your computer and use it in GitHub Desktop.
Download ZIP
Animated Navigation
Raw
animated-navigation.markdown
Raw
index.html
<body>
<div class="bg"></div>
<div class="phone">
<div class="screen">
<h1 class="hello">Welcome!</h1>
<div class="nav">
<a class="home" href="#">
<img class="open" src="https://greghub.github.io/animated-navigation/assets/menu.svg" title="Menu" width="30">
<img class="close" src="https://greghub.github.io/animated-navigation/assets/close.svg" title="Close" width="30">
</a>
<a class="item profile" href="#"><img src="https://greghub.github.io/animated-navigation/assets/user.svg" alt="User" width="25"></a>
<a class="item like" href="#"><img src="https://greghub.github.io/animated-navigation/assets/heart.svg" alt="Like" width="25"></a>
<a class="item message" href="#"><img src="https://greghub.github.io/animated-navigation/assets/message.svg" alt="Message" width="25"></a>
<a class="item tools" href="#"><img src="https://greghub.github.io/animated-navigation/assets/tools.svg" title="Tools" width="25"></a>
</div><!-- .nav -->
</div><!-- .screen -->
</div><!-- .phone -->
</body>
Raw
script.js
$(window).load(function() {
var tl = new TimelineMax({
paused: true
}),
tlback = new TimelineMax({
paused: true
}),
intro = new TimelineMax();
intro
.from('.phone', 1, {
autoAlpha: 0
})
.from('.hello', 0.5, {
autoAlpha: 0
}, 0.5)
tl
.to('.hello', 0.3, {
autoAlpha: 0
})
.set('.home', {
className: '+=active'
})
.set('.item', {
scale: 1
}) // fix for a bug when on of the item was appearing at 0.5 scale
.to('.home', 0.1, {
scale: 1.2,
yoyo: true,
repeat: 1
})
.to('.home', 0.3, {
x: 20,
y: 20,
ease: Elastic.easeOut.config(1, 0.5)
}, 0)
.staggerFrom('.item', 0.7, {
left: 20,
top: 20,
autoAlpha: 0,
scale: 0.5,
ease: Elastic.easeOut.config(1, 0.5)
}, 0.1);
tlback
.set('.home', {
className: '-=active'
})
.staggerTo('.item', 0.7, {
left: 20,
top: 20,
autoAlpha: 0,
scale: 0.5,
ease: Elastic.easeOut.config(1, 0.5)
}, 0.1)
.to('.hello', 0.3, {
autoAlpha: 1
})
.to('.home', 0.3, {
x: 0,
y: 0,
ease: Power2.easeOut
}, 0.5);
$(document).on('click', '.home:not(.active)', function(e) {
event.preventDefault();
tl.play(0);
});
$(document).on('click', '.home.active, .item', function(e) {
event.preventDefault();
TweenMax.to($(this), 0.1, {
scale: 1.2,
yoyo: true,
repeat: 1,
onComplete: function() {
tlback.play(0)
}
});
});
});
Raw
scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>
Raw
style.css
body {
background: #9a5ae8;
padding: 0;
margin: 0;
}
body * {
outline: none !important;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.bg {
position: fixed;
background: red;
width: 100%;
height: 100%;
background: #29b3db; /* Old browsers */
background: -moz-linear-gradient(top, #29b3db 0%, #9a5ae8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #29b3db 0%,#9a5ae8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #29b3db 0%,#9a5ae8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#29b3db', endColorstr='#9a5ae8',GradientType=0 ); /* IE6-9 */
}
.phone {
visibility: hidden;
background-color: #524662;
width: 320px;
height: 480px;
padding: 64px 12px 64px;
border-radius: 20px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -172px;
margin-top: -304px;
}
.phone:after {
content: " ";
width: 42px;
height: 42px;
border-radius: 50%;
background-color: #41354F;
display: table;
position: absolute;
left: 50%;
margin-left: -21px;
margin-top: 10px;
}
.phone:before {
content: " ";
width: 64px;
height: 8px;
border-radius: 5px;
background-color: #41354F;
display: table;
position: absolute;
left: 50%;
margin-left: -32px;
margin-top: -35px;
}
.screen {
background: url(https://greghub.github.io/animated-navigation/assets/background.svg);
background-size: cover;
width: 320px;
height: 480px;
}
.nav {
position: relative;
top: 12px;
left: 12px;
}
.nav a {
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
display: block;
box-sizing: border-box;
background-color: #FFFFFF;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.14);
}
.nav a img {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.nav a.home {
width: 60px;
height: 60px;
position: absolute;
left: 0px;
top: 0px;
z-index: 2;
}
.nav a.home img {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.nav a.profile {
position: absolute;
left: 113px;
top: -5px;
}
.nav a.like {
position: absolute;
left: 115px;
top: 59px;
}
.nav a.message {
position: absolute;
left: 65px;
top: 106px;
}
.nav a.tools {
position: absolute;
top: 114px;
left: 0;
}
.home:not(.active) .close, .home.active .open {
display: none;
}
.home.active .close, .home:not(.active) .open {
display: block;
}
h1 {
position: absolute;
top: 180px;
left: 50%;
transform: translateX(-50%);
font-size: 36px;
color: #FFFFFF;
letter-spacing: 1px;
font-family: 'Roboto', sans-serif;
}
@media only screen and (max-width: 768px) {
.phone {
width: 100%;
height: 100%;
left: 0;
top: 0;
margin-left: 0;
margin-top: 0;
padding: 0;
box-sizing: border-box;
background: transparent;
}
.phone:before, .phone:after {
content: "";
display: none;
}
.screen {
width: 100%;
height: 100%;
overflow-x: hidden;
}
}
Raw
styles
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment