jumping gooey navigation using css js

HTML

[code language=”html”]
<h1>Jumping Gooey Nav</h1>
<p>smooth & gooey goodness</p>
<svg id="demo" xmlns="http://www.w3.org/2000/svg" width="600" height="200" viewBox="0 0 600 200">
<defs>
<filter id="gooFilter">
<fegaussianblur in="SourceGraphic" stdDeviation="10" result="blur" />
<fecolormatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -8" result="goo" />
<feblend in="SourceGraphic" in2="goo" operator="atop"/>
</filter>
</defs>

<g filter="url(#gooFilter)">
<rect class="jumper goop" x="10" y="72" width="80" height="80" rx="26" ry="26" />
<rect class="jumper goop" x="10" y="72" width="80" height="80" rx="26" ry="26" />

</g>
<g id="icons">
<g>
<rect x="15" y="77" width="70" height="70"/>
<path d="M34.74,109.29V130h4.91V112.92h6.86V130H65.24V109.29L50,97.32Zm16.74,3.63H61v8.68H51.48Zm-22.54-6.34L50,90l9.09,7.14V90.78h4.54v9.92l7.44,5.85-1.77,2.79L50,94.22,30.7,109.34Z"/>
</g>
<g>
<rect x="115" y="77" width="70" height="70"/>
<path d="M161.13,117.8a8.38,8.38,0,0,0,2.11-.84c-6.74-4.92-1.11-8.9-1-16.11.06-4.43-4.53-9.86-7.39-8.32-1-5.29-19.27-2.11-18.17,7.87A11.11,11.11,0,0,1,139.3,98c-5.68,8.17,5.26,15.21-2.93,19a5.87,5.87,0,0,0,2.36.84c-3.34,1.6-6,3.72-6,5.62V130h34.48v-6.5C167.24,121.57,164.54,119.42,161.13,117.8Zm-19.39-12.87.45-.13v-.46a2.35,2.35,0,0,0-.06-.65c3-1.76,13.66-.14,14.74-4.55a1.1,1.1,0,0,1,.65.49,11.9,11.9,0,0,1,.38,4.71l-.05.46.45.13c.24.07,1,.28.84,1.65a3.53,3.53,0,0,1-1.77,2.79l-.36.07-.09.35c-.8,3.25-3.89,5.89-6.88,5.89s-6.08-2.64-6.88-5.89l-.09-.35-.36-.07a3.53,3.53,0,0,1-1.77-2.79C140.79,105.21,141.5,105,141.74,104.93Zm2.58,9.28a8.15,8.15,0,0,0,5.68,2.6,7.85,7.85,0,0,0,5-2,2,2,0,0,0,.42,2,10.24,10.24,0,0,1-5.43,1.62,10.53,10.53,0,0,1-6-2A2.76,2.76,0,0,0,144.32,114.21Zm-2.55,3.64a4.51,4.51,0,0,0,1-.39l.44-.14a11.24,11.24,0,0,0,13.27.14h.05a13.13,13.13,0,0,0,1.65.37,13.31,13.31,0,0,1-16.46,0Zm18.06,9.52h-6.55V126h6.55ZM150,112.43a4.42,4.42,0,0,1-2.47-.69l.48-.64a4.11,4.11,0,0,0,4.1,0l.44.66A4.84,4.84,0,0,1,150,112.43Z"/>
</g>
<g>
<rect x="215" y="77" width="70" height="70"/>
<path d="M263.58,103.84c-.36.81-.73,1.68-1.06,2.51l2.81,1.14v18.42l-13.91-5.62V101.87l4.63,1.87a22.48,22.48,0,0,0-1.58-3.09h0L254,100l-4-1.61-18.18,7.34V130L250,122.66,268.18,130V105.7Zm-15,16.45-13.91,5.62V107.49l13.91-5.62Zm17.11-24.72a5.86,5.86,0,0,0-11.7,0,6.71,6.71,0,0,0,1.1,3.36,91.68,91.68,0,0,1,4.75,10.38,92.42,92.42,0,0,1,4.74-10.38,6.62,6.62,0,0,0,1.11-3.36Zm-5.85,3a11.79,11.79,0,1,1,.06,0h-.06ZM237.72,113.4c.65.54.65.71,0,1.25s-.76.6-1.32,0-.63-.71,0-1.26S237.15,112.79,237.72,113.4Zm2.17-2c-.63.55-.63.72,0,1.26s.75.59,1.32,0,.64-.71,0-1.25S240.45,110.84,239.89,111.45Zm3.73,1.13c-.63.55-.63.72,0,1.26s.74.59,1.31,0,.64-.7,0-1.25S244.18,112,243.62,112.58Zm2.06,3.55c-.63.55-.63.72,0,1.26s.74.59,1.32,0,.63-.7,0-1.24S246.24,115.52,245.68,116.13Zm7.48.53c-.63.55-.63.72,0,1.26s.75.59,1.32,0,.64-.7,0-1.24-.76-.63-1.32,0Zm3.86-1.1c-.63.54-.63.72,0,1.25s.74.6,1.32,0,.64-.7,0-1.25-.76-.56-1.34,0Zm1.92-3.56c-.63.54-.63.72,0,1.25s.74.6,1.32,0,.63-.71,0-1.25-.76-.62-1.32,0Z"/>
</g>
<g>
<rect x="315" y="77" width="70" height="70"/>
<path d="M372.7,110c0-3-5.34-5-12.33-6,.34-.84.64-1.65.92-2.44a4.63,4.63,0,0,1-1.67-.47c-.3.87-.64,1.76-1,2.68-1.56-.17-3.17-.29-4.8-.37-.87-1.35-1.79-2.68-2.73-4,3.81-4.94,7.2-7.72,9-7.72a.83.83,0,0,1,.46.11,1.43,1.43,0,0,1,.55.94,4.41,4.41,0,0,1,1.77.12,3.32,3.32,0,0,0-1.45-2.56A2.61,2.61,0,0,0,360,90c-2.69,0-6.45,3.46-10,8-3.57-4.58-7.33-8-10-8a2.56,2.56,0,0,0-1.33.34c-1.74,1-2,4-.76,8.57a43.77,43.77,0,0,0,1.74,5.1c-1,.13-1.94.29-2.85.47a4.45,4.45,0,0,1,.58,1.66c.94-.18,1.93-.34,3-.48q.93,2.13,2.07,4.34c-.76,1.47-1.46,2.93-2.07,4.35-7.16-1-11.29-2.87-11.29-4.35a1.2,1.2,0,0,1,.33-.73,4.39,4.39,0,0,1-.73-1.69A3.19,3.19,0,0,0,327.3,110c0,3,5.34,5,12.33,6a43.77,43.77,0,0,0-1.74,5.1c-1.25,4.6-1,7.56.76,8.57A2.55,2.55,0,0,0,340,130c2.69,0,6.45-3.46,10-8,.41.53.83,1,1.24,1.54a4.37,4.37,0,0,1,1.19-1.27c-.45-.53-.9-1.09-1.36-1.68.94-1.28,1.86-2.61,2.73-4,1.63-.08,3.24-.2,4.8-.37a45.17,45.17,0,0,1,1.84,5.32c1.15,4.25.74,6.22,0,6.62a.83.83,0,0,1-.46.11,3,3,0,0,1-1.15-.29,4.43,4.43,0,0,1-1.17,1.34A5.08,5.08,0,0,0,360,130a2.56,2.56,0,0,0,1.33-.34c2.6-1.5,1.67-7.13-1-13.67C367.36,115,372.7,113,372.7,110Zm-14.82-4.55c-.39.88-.82,1.78-1.27,2.69-.27-.5-.55-1-.83-1.48l-.86-1.46C355.93,105.27,356.92,105.35,357.88,105.45Zm-6.19-2.11h-3.38c.56-.86,1.13-1.68,1.69-2.45.56.77,1.13,1.59,1.69,2.45Zm-12.13-4.88c-1.15-4.25-.74-6.22,0-6.62a.83.83,0,0,1,.46-.11c1.75,0,5.14,2.78,9,7.72-.94,1.28-1.86,2.61-2.73,4-1.63.08-3.25.2-4.8.37a44.82,44.82,0,0,1-1.88-5.36Zm2.56,7c1-.1,1.95-.18,3-.25l-.86,1.46-.83,1.48c-.49-.92-.92-1.82-1.31-2.7Zm1.27,6.41.83,1.48.86,1.46q-1.54-.09-3-.24c.43-.9.86-1.8,1.31-2.71ZM340,128.27a.83.83,0,0,1-.46-.11c-.7-.4-1.11-2.37,0-6.62a45.17,45.17,0,0,1,1.84-5.32c1.55.17,3.17.29,4.8.37.87,1.35,1.79,2.68,2.73,4C345.12,125.49,341.73,128.27,340,128.27Zm10-9.16c-.56-.77-1.13-1.59-1.69-2.45h3.38c-.56.86-1.13,1.68-1.69,2.45Zm2.83-4.21h-5.66c-.48-.78-1-1.59-1.45-2.43s-.93-1.65-1.37-2.47c.44-.82.89-1.65,1.37-2.47s1-1.65,1.45-2.42c.93,0,1.88,0,2.83,0s1.9,0,2.83,0c.48.77,1,1.58,1.45,2.42s.93,1.65,1.37,2.47c-.44.82-.89,1.65-1.37,2.47S353.31,114.12,352.83,114.9Zm2.09-.1.86-1.46.83-1.48c.45.91.88,1.81,1.27,2.7-.94.1-1.88.18-3,.24Zm4.76-.45c-.62-1.44-1.32-2.89-2.08-4.35q1.15-2.2,2.08-4.34a45.14,45.14,0,0,1,5.54,1.07c4.24,1.13,5.75,2.47,5.75,3.27,0,1.48-4.13,3.39-11.29,4.35ZM353.63,110a3.63,3.63,0,1,1-3.63-3.63,3.64,3.64,0,0,1,3.63,3.63Zm8-15.5a2.66,2.66,0,1,0,2.66,2.66,2.66,2.66,0,0,0-2.66-2.66Zm-4,31.33a2.66,2.66,0,1,1-2.66-2.66h0a2.66,2.66,0,0,1,2.69,2.63v0Zm-22-19.11a2.66,2.66,0,1,1-2.66-2.66,2.66,2.66,0,0,1,2.66,2.66Z"/>
</g>
<g>
<rect x="415" y="77" width="70" height="70"/>
<path d="M440.14,130a3.72,3.72,0,0,1-3.51-2.56l-5.86-17.52h38.46l-5.86,17.52a3.72,3.72,0,0,1-3.51,2.56Zm16.44-17.43a1.12,1.12,0,0,0-1.11.93l-1.93,12.61a1.07,1.07,0,0,0,.2.79,1.16,1.16,0,0,0,.76.45h.16a1.13,1.13,0,0,0,1.11-.94l1.93-12.61a1.07,1.07,0,0,0-.2-.79,1.17,1.17,0,0,0-.76-.44Zm-13.16,0h-.16a1.17,1.17,0,0,0-.76.44,1.07,1.07,0,0,0-.2.79l1.93,12.61a1.13,1.13,0,0,0,1.11.94h.16a1.16,1.16,0,0,0,.76-.45,1.07,1.07,0,0,0,.2-.79l-1.93-12.61A1.12,1.12,0,0,0,443.42,112.57Zm19.62.16a1.12,1.12,0,0,0-1.09.8l-3.59,12.29a1.07,1.07,0,0,0,.11.84,1.1,1.1,0,0,0,.69.5,1.31,1.31,0,0,0,.28,0,1.13,1.13,0,0,0,1.09-.81l3.59-12.28a1.07,1.07,0,0,0-.1-.82,1.17,1.17,0,0,0-.7-.53,1.15,1.15,0,0,0-.32,0Zm-26.08,0a1.31,1.31,0,0,0-.28,0,1.19,1.19,0,0,0-.69.51,1.05,1.05,0,0,0-.11.83l3.59,12.3a1.12,1.12,0,0,0,1.09.8,1.31,1.31,0,0,0,.28,0,1.17,1.17,0,0,0,.7-.53,1,1,0,0,0,.1-.81l-3.59-12.29a1.12,1.12,0,0,0-1.05-.81Zm13-.23a1.11,1.11,0,0,0-1.13,1.09h0v12.48a1.13,1.13,0,0,0,2.26,0h0V113.59A1.11,1.11,0,0,0,450,112.5Zm2.4-4.83a3.06,3.06,0,0,0,.37-.35l3.5-3.89h13.91a2.12,2.12,0,1,1,0,4.24Zm-22.58,0a2.12,2.12,0,1,1,0-4.24h16.83a4,4,0,0,0-.25,1.53,3.83,3.83,0,0,0,1.19,2.59l.14.12Zm20.27-.73a1.68,1.68,0,0,1-1.15-.45l-.43-.41a1.73,1.73,0,0,1-.1-2.43l10.16-11.28a1.09,1.09,0,0,1,1.57-.07l1.29,1.2a1.21,1.21,0,0,1,.36.78,1.15,1.15,0,0,1-.3.81l-10.16,11.29a1.69,1.69,0,0,1-1.24.56Z"/>
</g>
<g>
<rect x="515" y="77" width="70" height="70"/>
<path d="M558.91,128.14S559.16,130,555,130H537.29c-3.94,0-3.94-1.86-3.94-1.86a.66.66,0,0,1,.65-.66h24.26A.66.66,0,0,1,558.91,128.14Zm7.74-13.3a5.54,5.54,0,0,1-5.53,5.53h0a5.45,5.45,0,0,1-3.54-1.29c-1.92,4.55-6.29,7.25-7.08,7.25h-8.74c-1,0-8-4.5-8-11.63v-8a1.85,1.85,0,0,1,1.85-1.84h21a1.86,1.86,0,0,1,1.84,1.84V110a5.56,5.56,0,0,1,8.2,4.82v0Zm-24.54,9h1.71c-1.51-1-4.59-4-4.59-7.68v-5H556v-3.8H536.29v7.32c0,4.94,4.55,8.53,5.82,9.14Zm21.65-9a2.64,2.64,0,0,0-5.28,0h0a2.64,2.64,0,0,0,5.28,0ZM546.92,96c0,2.69-3,4.09-.62,6.78-.23-3.13,3-4,3.23-7s-4.69-3.22-5.24-6.52C542.3,92.56,546.92,93.11,546.92,96Z"/>
</g>
</g>
<path id="main" d="" fill="none" stroke-miterlimit="10" />
</svg>

<div class="branding">
<p>see the tutorial on</p>
<h2><span>motion</span>tricks.com</h2>
<a href="https://www.motiontricks.com/gooey-navigation/" target="_blank">Tutorial</a>
</div>

[/code]

CSS

[code language=”css”]
body {
font-family: "proxima-nova", sans-serif;
color: white;
display: flex;
height: 100vh;
background: #111;
overflow: hidden;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0;
margin: 0;
background-image: linear-gradient(
0deg,
#382B8C,
#746BB0
);
}
#demo {
width: 90vw;
height: auto;
max-width: 720px;
overflow: visible;
}
#icons path {

fill: white;
}

text {
font-weight: 700;
font-size: 20px;
text-transform: uppercase;
fill: rgba(0,0,0,0.5);
}

#icons g {
cursor: pointer;

}

#icons rect {
fill: transparent;
}

.goop {
fill: #1C4861;
fill: #5C51A6;
fill: #382B8C;
}

#main {
stroke: #00688e;
stroke: none;
stroke-width: 1px;
}

h1, h2,
p {
margin: 0;

}

a {
background: #5cceee;
color: white;
padding: 10px;
text-decoration: none;
border-radius: 3px;
margin-top: 10px;
}

a:hover {
background: white;
color: #5cceee;
}
h1, h2,
p {
margin: 0;
}
h2 {
font-weight: 400;
}
h2 span {
font-weight: 700;
color: #5cceee;
}
p span {
font-weight: 700;
color: #5cceee;
}

.branding {

display: flex;
flex-direction: column;
align-items: center;
/* position: absolute;
bottom: 1rem; */
}

[/code]

JS

[code language=”js”]
console.clear();
gsap.registerPlugin(MotionPathPlugin);

let targets = gsap.utils.toArray("#icons g");
let dotCenters = [50, 150, 250, 350, 450, 550];
let yCenter = 112;
let maxTravel = 500;
let minTravel = 100;
let mapper = gsap.utils.mapRange(minTravel, maxTravel, 0.5, 1);
let anim;
let activeDot = 0;
let targetDot;
let maxDur = 1;
let maxArc = 150;
let staggers = [0.2, 0.16, 0.135, 0.12, 0.11];

targets.forEach((obj, i) => {
obj.index = i;
obj.addEventListener("click", letsGoo);
});

function letsGoo() {
targetDot = this.index;
if (targetDot != activeDot) {
if (anim && anim.isActive()) {
anim.progress(1);
}

let oldX = dotCenters[activeDot];
let newX = dotCenters[targetDot];
let travel = Math.abs(oldX – newX);
let factor = mapper(travel);
let newArc = yCenter – maxArc * factor;
let dur = maxDur * factor;
let newStagger = staggers[travel / 100 – 1];
let newPath = `M${oldX},${yCenter} Q${
travel / 2 + Math.min(oldX, newX)
},${newArc} ${newX},${yCenter}`;

gsap.set("#main", { attr: { d: newPath } });
anim = gsap
.timeline()
.to(".jumper", {
motionPath: {
path: "#main",
align: "#main",
alignOrigin: [0.5, 0.5]
},
stagger: newStagger,
duration: dur,
ease: "sine.inOut"
})
.to(
".jumper",
{ duration: dur / 2, attr: { rx: 40, ry: 40 }, yoyo: true, repeat: 1 },
0
);
} else {
return;
}

activeDot = targetDot;
}

[/code]

Animated navigation menu js

The post Jumping Gooey Navigation Using CSS and JS appeared first on csshint - A designer hub.