Navigation
Posted in
10683
3:11 am, September 18, 2021
Blob Navigation Menu Selection Animated
This seemingly innocent menu has a hidden animation in it, just click on each icon to see the change, something different and out of the box for this one.
Blob Navigation Menu Selection Animated Demo
View Demo Full Screen View Demo New Tab
Blob Navigation Menu Selection Animated Code
HTML
<div class="menu-bar">
<div class="selected" id="selected"></div>
<div onclick="home()">
<svg class="svg-icon" id="homesvg" width="45px" viewBox="0 0 20 20">
<path fill="#03254c" d="M18.121,9.88l-7.832-7.836c-0.155-0.158-0.428-0.155-0.584,0L1.842,9.913c-0.262,0.263-0.073,0.705,0.292,0.705h2.069v7.042c0,0.227,0.187,0.414,0.414,0.414h3.725c0.228,0,0.414-0.188,0.414-0.414v-3.313h2.483v3.313c0,0.227,0.187,0.414,0.413,0.414h3.726c0.229,0,0.414-0.188,0.414-0.414v-7.042h2.068h0.004C18.331,10.617,18.389,10.146,18.121,9.88 M14.963,17.245h-2.896v-3.313c0-0.229-0.186-0.415-0.414-0.415H8.342c-0.228,0-0.414,0.187-0.414,0.415v3.313H5.032v-6.628h9.931V17.245z M3.133,9.79l6.864-6.868l6.867,6.868H3.133z"></path>
</svg>
</div>
<div onclick="notificationfn()">
<svg class="svg-icon" id="notificationsvg" width="45px" viewBox="0 0 20 20">
<path fill="#d0efff" d="M14.38,3.467l0.232-0.633c0.086-0.226-0.031-0.477-0.264-0.559c-0.229-0.081-0.48,0.033-0.562,0.262l-0.234,0.631C10.695,2.38,7.648,3.89,6.616,6.689l-1.447,3.93l-2.664,1.227c-0.354,0.166-0.337,0.672,0.035,0.805l4.811,1.729c-0.19,1.119,0.445,2.25,1.561,2.65c1.119,0.402,2.341-0.059,2.923-1.039l4.811,1.73c0,0.002,0.002,0.002,0.002,0.002c0.23,0.082,0.484-0.033,0.568-0.262c0.049-0.129,0.029-0.266-0.041-0.377l-1.219-2.586l1.447-3.932C18.435,7.768,17.085,4.676,14.38,3.467 M9.215,16.211c-0.658-0.234-1.054-0.869-1.014-1.523l2.784,0.998C10.588,16.215,9.871,16.447,9.215,16.211 M16.573,10.27l-1.51,4.1c-0.041,0.107-0.037,0.227,0.012,0.33l0.871,1.844l-4.184-1.506l-3.734-1.342l-4.185-1.504l1.864-0.857c0.104-0.049,0.188-0.139,0.229-0.248l1.51-4.098c0.916-2.487,3.708-3.773,6.222-2.868C16.187,5.024,17.489,7.783,16.573,10.27"></path>
</svg>
</div>
<div onclick="profile()"><svg class="svg-icon" id="profilesvg" width="45px" viewBox="0 0 20 20">
<path fill="#d0efff" d="M12.075,10.812c1.358-0.853,2.242-2.507,2.242-4.037c0-2.181-1.795-4.618-4.198-4.618S5.921,4.594,5.921,6.775c0,1.53,0.884,3.185,2.242,4.037c-3.222,0.865-5.6,3.807-5.6,7.298c0,0.23,0.189,0.42,0.42,0.42h14.273c0.23,0,0.42-0.189,0.42-0.42C17.676,14.619,15.297,11.677,12.075,10.812 M6.761,6.775c0-2.162,1.773-3.778,3.358-3.778s3.359,1.616,3.359,3.778c0,2.162-1.774,3.778-3.359,3.778S6.761,8.937,6.761,6.775 M3.415,17.69c0.218-3.51,3.142-6.297,6.704-6.297c3.562,0,6.486,2.787,6.705,6.297H3.415z"></path>
</svg>
</div>
<div onclick="setting()">
<svg class="svg-icon" width="45px" viewBox="0 0 20 20" id="settingsvg">
<path fill="#d0efff" d="M17.498,11.697c-0.453-0.453-0.704-1.055-0.704-1.697c0-0.642,0.251-1.244,0.704-1.697c0.069-0.071,0.15-0.141,0.257-0.22c0.127-0.097,0.181-0.262,0.137-0.417c-0.164-0.558-0.388-1.093-0.662-1.597c-0.075-0.141-0.231-0.22-0.391-0.199c-0.13,0.02-0.238,0.027-0.336,0.027c-1.325,0-2.401-1.076-2.401-2.4c0-0.099,0.008-0.207,0.027-0.336c0.021-0.158-0.059-0.316-0.199-0.391c-0.503-0.274-1.039-0.498-1.597-0.662c-0.154-0.044-0.32,0.01-0.416,0.137c-0.079,0.106-0.148,0.188-0.22,0.257C11.244,2.956,10.643,3.207,10,3.207c-0.642,0-1.244-0.25-1.697-0.704c-0.071-0.069-0.141-0.15-0.22-0.257C7.987,2.119,7.821,2.065,7.667,2.109C7.109,2.275,6.571,2.497,6.07,2.771C5.929,2.846,5.85,3.004,5.871,3.162c0.02,0.129,0.027,0.237,0.027,0.336c0,1.325-1.076,2.4-2.401,2.4c-0.098,0-0.206-0.007-0.335-0.027C3.001,5.851,2.845,5.929,2.77,6.07C2.496,6.572,2.274,7.109,2.108,7.667c-0.044,0.154,0.01,0.32,0.137,0.417c0.106,0.079,0.187,0.148,0.256,0.22c0.938,0.936,0.938,2.458,0,3.394c-0.069,0.072-0.15,0.141-0.256,0.221c-0.127,0.096-0.181,0.262-0.137,0.416c0.166,0.557,0.388,1.096,0.662,1.596c0.075,0.143,0.231,0.221,0.392,0.199c0.129-0.02,0.237-0.027,0.335-0.027c1.325,0,2.401,1.076,2.401,2.402c0,0.098-0.007,0.205-0.027,0.334C5.85,16.996,5.929,17.154,6.07,17.23c0.501,0.273,1.04,0.496,1.597,0.66c0.154,0.047,0.32-0.008,0.417-0.137c0.079-0.105,0.148-0.186,0.22-0.256c0.454-0.453,1.055-0.703,1.697-0.703c0.643,0,1.244,0.25,1.697,0.703c0.071,0.07,0.141,0.15,0.22,0.256c0.073,0.098,0.188,0.152,0.307,0.152c0.036,0,0.073-0.004,0.109-0.016c0.558-0.164,1.096-0.387,1.597-0.66c0.141-0.076,0.22-0.234,0.199-0.393c-0.02-0.129-0.027-0.236-0.027-0.334c0-1.326,1.076-2.402,2.401-2.402c0.098,0,0.206,0.008,0.336,0.027c0.159,0.021,0.315-0.057,0.391-0.199c0.274-0.5,0.496-1.039,0.662-1.596c0.044-0.154-0.01-0.32-0.137-0.416C17.648,11.838,17.567,11.77,17.498,11.697 M16.671,13.334c-0.059-0.002-0.114-0.002-0.168-0.002c-1.749,0-3.173,1.422-3.173,3.172c0,0.053,0.002,0.109,0.004,0.166c-0.312,0.158-0.64,0.295-0.976,0.406c-0.039-0.045-0.077-0.086-0.115-0.123c-0.601-0.6-1.396-0.93-2.243-0.93s-1.643,0.33-2.243,0.93c-0.039,0.037-0.077,0.078-0.116,0.123c-0.336-0.111-0.664-0.248-0.976-0.406c0.002-0.057,0.004-0.113,0.004-0.166c0-1.75-1.423-3.172-3.172-3.172c-0.054,0-0.11,0-0.168,0.002c-0.158-0.312-0.293-0.639-0.405-0.975c0.044-0.039,0.085-0.078,0.124-0.115c1.236-1.236,1.236-3.25,0-4.486C3.009,7.719,2.969,7.68,2.924,7.642c0.112-0.336,0.247-0.664,0.405-0.976C3.387,6.668,3.443,6.67,3.497,6.67c1.75,0,3.172-1.423,3.172-3.172c0-0.054-0.002-0.11-0.004-0.168c0.312-0.158,0.64-0.293,0.976-0.405C7.68,2.969,7.719,3.01,7.757,3.048c0.6,0.6,1.396,0.93,2.243,0.93s1.643-0.33,2.243-0.93c0.038-0.039,0.076-0.079,0.115-0.123c0.336,0.112,0.663,0.247,0.976,0.405c-0.002,0.058-0.004,0.114-0.004,0.168c0,1.749,1.424,3.172,3.173,3.172c0.054,0,0.109-0.002,0.168-0.004c0.158,0.312,0.293,0.64,0.405,0.976c-0.045,0.038-0.086,0.077-0.124,0.116c-0.6,0.6-0.93,1.396-0.93,2.242c0,0.847,0.33,1.645,0.93,2.244c0.038,0.037,0.079,0.076,0.124,0.115C16.964,12.695,16.829,13.021,16.671,13.334 M10,5.417c-2.528,0-4.584,2.056-4.584,4.583c0,2.529,2.056,4.584,4.584,4.584s4.584-2.055,4.584-4.584C14.584,7.472,12.528,5.417,10,5.417 M10,13.812c-2.102,0-3.812-1.709-3.812-3.812c0-2.102,1.71-3.812,3.812-3.812c2.102,0,3.812,1.71,3.812,3.812C13.812,12.104,12.102,13.812,10,13.812"></path>
</svg>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="shadowed-goo">
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="16" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
<feGaussianBlur in="goo" stdDeviation="3" result="shadow" />
<feColorMatrix in="shadow" mode="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -0.2" result="shadow" />
<feOffset in="shadow" dx="1" dy="1" result="shadow" />
<feComposite in2="shadow" in="goo" result="goo" />
<feComposite in2="goo" in="SourceGraphic" result="mix" />
</filter>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />
<feComposite in2="goo" in="SourceGraphic" result="mix" />
</filter>
</defs>
</svg>
CSS
body {
filter: url("#goo");
background-color: #03254c;
background: linear-gradient(#03254c, black);
}
.menu-bar {
position: relative;
display: flex;
background-color: #1167b1;
background: linear-gradient(#02457a, #1167b1);
box-shadow: 1px 1px 5px #21cdfc;
max-width: max-content;
margin: 45vh auto;
border-radius: 20px;
padding: 20px;
}
.menu-bar div {
cursor: pointer;
z-index: 1;
padding-right: 40px;
}
.menu-bar div:last-of-type {
padding-right: 0px;
}
.selected {
position: absolute;
width: 18px;
height: 55px;
border-radius: 50%;
background-color: #d0efff;
background: linear-gradient(#d0efff, #1167b1);
z-index: 0;
left: 14px;
top: 17px;
}
.notification {
animation: notification 1s;
left: 100px;
transition: left 1.5s;
}
.profile {
animation: profile 1s;
left: 182px;
transition: left 1.5s;
}
.setting {
animation: setting 1s;
left: 268px;
transition: left 1.5s;
}
.home {
animation: home 1s;
left: 15px;
transition: left 1.5s;
}
@keyframes profile {
50% {
top: -60px;
}
}
@keyframes setting {
50% {
top: -60px;
}
}
@keyframes notification {
50% {
top: -60px;
}
}
@keyframes home {
50% {
top: -60px;
}
}
Scripts
<script src="https://cdn.jsdelivr.net/npm/gsap@3.0.1/dist/gsap.min.js"></script>
Javascript
const selected = document.getElementById("selected");
const notsvg = document.getElementById("notificationsvg").firstElementChild;
const homesvg = document.getElementById("homesvg").firstElementChild;
const settingsvg = document.getElementById("settingsvg").firstElementChild;
const profilesvg = document.getElementById("profilesvg").firstElementChild;
function notificationfn() {
selected.classList.add("notification");
selected.classList.remove("setting");
selected.classList.remove("profile");
selected.classList.remove("home");
notsvg.style.fill = "#03254c";
homesvg.style.fill = "#d0efff";
settingsvg.style.fill = "#d0efff";
profilesvg.style.fill = "#d0efff";
var action = gsap.timeline();
action
.to("#notificationsvg", { duration: 0.2, rotation: 10 })
.to("#notificationsvg", { duration: 0.2, rotation: -30 })
.to("#notificationsvg", { duration: 0.2, rotation: 30 })
.to("#notificationsvg", { duration: 0.2, rotation: 0 });
}
function setting() {
notsvg.style.fill = "#d0efff";
homesvg.style.fill = "#d0efff";
settingsvg.style.fill = "#03254c";
profilesvg.style.fill = "#d0efff";
var action = gsap.timeline();
action
.to("#settingsvg", { duration: 0.4, rotation: 600 })
.to("#settingsvg", { duration: 0.4, rotation: 0 });
selected.classList.remove("notification");
selected.classList.add("setting");
selected.classList.remove("profile");
selected.classList.remove("home");
}
function profile() {
notsvg.style.fill = "#d0efff";
homesvg.style.fill = "#d0efff";
settingsvg.style.fill = "#d0efff";
profilesvg.style.fill = "#03254c";
var action = gsap.timeline();
action
.to("#profilesvg", { duration: 0.4, y: -8 })
.to("#profilesvg", { duration: 0.4, y: 0 });
selected.classList.remove("notification");
selected.classList.remove("setting");
selected.classList.add("profile");
selected.classList.remove("home");
}
function home() {
notsvg.style.fill = "#d0efff";
homesvg.style.fill = "#03254c";
settingsvg.style.fill = "#d0efff";
profilesvg.style.fill = "#d0efff";
var action = gsap.timeline();
action
.to("#homesvg", { duration: 0.4, x: 6 })
.to("#homesvg", { duration: 0.4, x: 0 });
selected.classList.remove("notification");
selected.classList.remove("setting");
selected.classList.remove("profile");
selected.classList.add("home");
}
External Link for Blob Navigation Menu Selection Animated
Add Comment
Other Items in Navigation
Related Search Terms
Other Categories in Code
404 pages animation animations background effects boxes buttons css css & javascript css animation css animations css backgrounds css cursors css framework css frameworks css modal css positions css reset css shadows css slider css text effects css text formatting css tips css tools css z-index content slider cookie alerts design html css sections html canvas html sections icons image zoom interactive images lightbox link effects loading animation modals mouse effects navigation notifications parallax profiles quick css seo sections text ui web developer checklists animations backgrounds bootstrap buttons css css animated css animations css framework css grid footers forms html image effects images javascript scroll effects sections show your work svg text animation timeline
css animations
css animations
HTML Canvas
javascript