console
$(document).ready(function() {
$(".browse").click();
})
gsap.set(".item-name", {y: 6})
$(".item").click(function() {
$(".item").removeClass("active")
$(".item").mouseleave();
$(this).mouseenter();
$(this).addClass("active")
const itemImg = $(this).find(".item-img")
const tl = gsap.timeline();
tl.to(itemImg, .3, {scale: 1.2})
tl.to(itemImg, .3, {delay: -.15, scale: 1, ease: Back.easeOut})
const itemImgFill = $(this).find(".itemFill")
gsap.to(".itemFill", .3, {fill: "#B9C2CD"})
gsap.to(itemImgFill, .3, {fill: "#ea4c89"})
const itemImgStroke = $(this).find(".itemStroke")
gsap.to(".itemStroke", .3, {stroke: "#B9C2CD"})
gsap.to(itemImgStroke, .3, {stroke: "#ea4c89"})
})
$(".item").hover(function() {
const itemName = $(this).find(".item-name")
gsap.to(itemName, .3, {opacity: 1, y: 0, ease: Power1.easeOut})
})
$(".item").mouseleave(function() {
if ($(this).hasClass("active")) {
} else {
const itemName = $(this).find(".item-name")
gsap.to(itemName, .3, {opacity: 0, y: 6, ease: Power1.easeOut})
}
})
const itemBrowse = document.querySelector(".browse")
const itemBrowseX = itemBrowse.offsetLeft
const itemProfile = document.querySelector(".profile")
const itemProfileX = itemProfile.offsetLeft
const itemChat = document.querySelector(".chat")
const itemChatX = itemChat.offsetLeft
const itemMenu = document.querySelector(".menu")
const itemMenuX = itemMenu.offsetLeft
const upperBar = document.querySelector(".upper-bar")
const upperBarX = upperBar.offsetLeft
const tl = gsap.timeline();
tl.to(upperBar, .3, {scaleX: 1.5, ease: Back.easeOut})
tl.to(upperBar, .3, {scaleX: 1, ease: Back.easeOut})
tl.pause()
$(itemBrowse).click(function() {
gsap.to(upperBar, .6, {x: itemBrowseX - 23, ease: Back.easeOut})
tl.play()
gsap.to(".items", .6, {rotate: -3, ease: Back.easeOut})
gsap.to(".items", .6, {delay: .15, rotate: 0, ease: Back.easeOut})
setTimeout(function() {
tl.pause()
tl.progress(0)
}, 600)
})
$(itemProfile).click(function() {
gsap.to(upperBar, .6, {x: itemProfileX - 23, ease: Back.easeOut})
tl.play()
gsap.to(".items", .6, {rotate: -1, ease: Back.easeOut})
gsap.to(".items", .6, {delay: .15, rotate: 0, ease: Back.easeOut})
setTimeout(function() {
tl.pause()
tl.progress(0)
}, 600)
})
$(itemChat).click(function() {
gsap.to(upperBar, .6, {x: itemChatX - 23, ease: Back.easeOut})
tl.play()
gsap.to(".items", .6, {rotate: 1, ease: Back.easeOut})
gsap.to(".items", .6, {delay: .15, rotate: 0, ease: Back.easeOut})
setTimeout(function() {
tl.pause()
tl.progress(0)
}, 600)
})
$(itemMenu).click(function() {
gsap.to(upperBar, .6, {x: itemMenuX - 23, ease: Back.easeOut})
tl.play()
gsap.to(".items", .6, {rotate: 3, ease: Back.easeOut})
gsap.to(".items", .6, {delay: .15, rotate: 0, ease: Back.easeOut})
setTimeout(function() {
tl.pause()
tl.progress(0)
}, 600)
})
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/56942480bb.js" crossorigin="anonymous"></script>
<div class="items">
<div class="upper-bar"></div>
<div class="item browse">
<div class="item-img">
<svg version="1.1" id="browse" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 81.7 81.2" style="enable-background:new 0 0 81.7 81.2;" xml:space="preserve">
<style type="text/css">
.itemStroke{fill:none;stroke:#B9C2CD;stroke-width:5;stroke-miterlimit:10;}
.itemFill{fill:#B9C2CD;}
</style>
<circle class="itemStroke" cx="40.8" cy="40.8" r="20.4"/>
<path class="itemFill" d="M23.4,35h37.8v5.8c0,0-17.7-1.9-17.8,20.2l-6.4-0.2c0,0,3.1-20-16.7-20.1V35H23.4z"/>
</svg>
</div>
<p class="item-name">Browse</p>
</div>
<div class="item profile">
<div class="item-img">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 81.7 81.2" style="enable-background:new 0 0 81.7 81.2;" xml:space="preserve">
<style type="text/css">
.itemFill{fill:#B9C2CD;}
</style>
<path class="itemFill" d="M20,57.5v-1c0-7.1,5.7-12.8,12.8-12.8h7.7h8.1c7.2,0,13.1,5.9,13.1,13.1v0.7c0,1.4-1.1,2.5-2.5,2.5H22.5
C21.1,59.9,20,58.8,20,57.5z"/>
<circle class="itemFill" cx="40.8" cy="28.7" r="9.7"/>
</svg>
</div>
<p class="item-name">Profile</p>
</div>
<div class="item chat">
<div class="item-img">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 81.7 81.2" style="enable-background:new 0 0 81.7 81.2;" xml:space="preserve">
<style type="text/css">
.itemFill{fill:#B9C2CD;}
</style>
<path class="itemFill" d="M55.7,19.3H26c-3.4,0-6.1,2.8-6.1,6.1V45c0,3.4,2.8,6.1,6.1,6.1h29.7c3.4,0,6.1-2.8,6.1-6.1V25.4
C61.8,22,59.1,19.3,55.7,19.3z"/>
<path class="itemFill" d="M32.9,57.6c0,1.3,1.2,2.3,2.5,2c1-0.2,2-0.6,2.9-1.6c2-2.3,7.3-7.8,7.3-7.8H32.9V57.6z"/>
</svg>
</div>
<p class="item-name">Chat</p>
</div>
<div class="item menu">
<div class="item-img">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 81.7 81.2" style="enable-background:new 0 0 81.7 81.2;" xml:space="preserve">
<style type="text/css">
.itemFill{fill:#B9C2CD;}
</style>
<path class="itemFill" d="M49.5,55.9h-27c-1,0-1.7-0.8-1.7-1.7v-1.5c0-1,0.8-1.7,1.7-1.7h27c1,0,1.7,0.8,1.7,1.7v1.5
C51.2,55.1,50.4,55.9,49.5,55.9z"/>
<path class="itemFill" d="M59.2,30.2h-27c-1,0-1.7-0.8-1.7-1.7v-1.5c0-1,0.8-1.7,1.7-1.7h27c1,0,1.7,0.8,1.7,1.7v1.5
C61,29.5,60.2,30.2,59.2,30.2z"/>
<path class="itemFill" d="M59.2,43.1H22.5c-1,0-1.7-0.8-1.7-1.7v-1.5c0-1,0.8-1.7,1.7-1.7h36.8c1,0,1.7,0.8,1.7,1.7v1.5
C61,42.3,60.2,43.1,59.2,43.1z"/>
</svg>
</div>
<p class="item-name">Menu</p>
</div>
</div>
<p class="disclaimer">I'm just the developer. Meet the designer on <a href="https://dribbble.com/shots/6923684-Tab-Bar-Interaction-Freebie" target="_blank"><i class="fab fa-dribbble"></i> Dribbble.</p></a>
* {
box-sizing: border-box;
}
body {
height: 100vh;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #dee1e8;
}
.items {
display: flex;
background: white;
border-radius: 24px;
padding: 9px 24px;
box-shadow: 0 12px 24px #ced3da;
position: relative;
transform: scale(.9);
}
.item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 36px;
}
.item-img {
width: 80px;
}
.item-name {
font-family: "Open Sans", sans-serif;
font-size: 18px;
color: #b9c2cd;
margin-top: -6px;
opacity: 0;
}
.upper-bar {
width: 60px;
height: 6px;
background: #ea4c89;
border-radius: 12px;
position: absolute;
top: 0;
left: 69px;
}
.disclaimer {
font-family: "Open Sans", sans-serif;
font-size: 14px;
color: #b9c2cd;
position: relative;
top: 30px;
}
a {
text-decoration: none;
color: #b9c2cd;
}
a:hover {
color: #ea4c89;
}