Radial Menu Animation

Developer
Anton Mudrenok
Size
7,341 Kb
Views
20,240
  1. Radial Menu Animation Previews
  2. Radial Menu Animation HTML Codes
  3. Radial Menu Animation CSS Codes
  4. Radial Menu Animation JS Codes

How do I make an radial menu animation?

Dribbble Shot by tubikstudio. What is a radial menu animation? How do you make a radial menu animation? This script and codes were developed by Anton Mudrenok on 28 September 2022, Wednesday.

Radial Menu Animation Previews
IQ Test

Radial Menu Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Radial Menu Animation</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="0" height="0" display="none"> <symbol id="twitter" viewBox="0 0 512 512"> <path d="M419.6 168.6c-11.7 5.2-24.2 8.7-37.4 10.2 13.4-8.1 23.8-20.8 28.6-36 -12.6 7.5-26.5 12.9-41.3 15.8 -11.9-12.6-28.8-20.6-47.5-20.6 -42 0-72.9 39.2-63.4 79.9 -54.1-2.7-102.1-28.6-134.2-68 -17 29.2-8.8 67.5 20.1 86.9 -10.7-0.3-20.7-3.3-29.5-8.1 -0.7 30.2 20.9 58.4 52.2 64.6 -9.2 2.5-19.2 3.1-29.4 1.1 8.3 25.9 32.3 44.7 60.8 45.2 -27.4 21.4-61.8 31-96.4 27 28.8 18.5 63 29.2 99.8 29.2 120.8 0 189.1-102.1 185-193.6C399.9 193.1 410.9 181.7 419.6 168.6z"></path> </symbol> <symbol id="codepen" viewBox="0 0 512 512"> <path d="M427 201.9c-0.6-4.2-2.9-8-6.4-10.3L264.2 87.3c-4.9-3.3-11.4-3.3-16.3 0L91.4 191.6c-4 2.7-6.5 7.4-6.5 12.2v104.3c0 4.8 2.5 9.6 6.5 12.2l156.4 104.3c4.9 3.3 11.4 3.3 16.3 0L420.6 320.4c4-2.6 6.6-7.4 6.6-12.2V203.9C427.1 203.2 427.1 202.6 427 201.9 427 201.7 427.1 202.6 427 201.9zM270.7 127.1l115.2 76.8 -51.5 34.4 -63.8-42.7V127.1zM241.3 127.1v68.6l-63.8 42.7 -51.5-34.4L241.3 127.1zM114.3 231.4l36.8 24.6 -36.8 24.6V231.4zM241.3 384.9L126.1 308.1l51.5-34.4 63.8 42.6V384.9zM256 290.8l-52-34.8 52-34.8 52 34.8L256 290.8zM270.7 384.9V316.3l63.8-42.6 51.5 34.4L270.7 384.9zM397.7 280.6l-36.8-24.6 36.8-24.6V280.6z"></path> </symbol> <symbol id="dribbble" viewBox="0 0 512 512"> <path d="M256 68.4C152.4 68.4 68.4 152.4 68.4 256c0 103.6 84 187.6 187.6 187.6S443.6 359.6 443.6 256C443.6 152.4 359.6 68.4 256 68.4zM410.6 247.3c-40.3-6.6-77.3-7-111-1.1 -3.8-8.8-7.8-17.6-12-26.3 36.1-15.6 65.1-36.9 86.7-63.8C395.4 181 408.6 212.6 410.6 247.3zM350.5 133.4c-18.8 24.3-44.8 43.5-78 57.5 -15.9-29.1-34-57.5-54.5-85 12.2-3.1 24.9-4.9 38-4.9C291.6 101 324.3 113.2 350.5 133.4zM186.1 117.9c20.8 27.2 39.3 55.3 55.3 84.1 -38 11.2-83.4 16.9-135.8 17.3C116.4 175 146.3 138.1 186.1 117.9zM101 256c0-1.3 0.2-2.7 0.2-4 60.2-0.1 112.1-7 155.6-20.7 3.6 7.4 7.1 14.9 10.5 22.4 -52.8 16.5-96.4 50.4-130.3 101.3C114.5 328.2 101 293.6 101 256zM160.9 378.1c30.8-48.3 70.1-79.7 118.8-94.2 14.5 37.8 25.2 76.8 31.9 116.6 -17.3 6.7-36 10.5-55.6 10.5C220.1 411 187.2 398.6 160.9 378.1zM342 384.8c-6.9-36.8-16.9-72.8-30-107.8 29.3-4.1 61.6-3.1 96.9 3.1C402.1 323.6 377.2 361.3 342 384.8z"></path> </symbol>
</svg>
<div class="content"> <div class="header"> <div class="header__topBar"> </div> <div class="header__botBar"> </div> </div> <div class="content__items--wrap"> <div class="content__items"> <div class="item"> </div> <div class="item"> </div> <div class="item"> </div> <div class="item"> </div> <div class="item"> </div> <div class="item"> </div> </div> <div class="content__menu"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320"> <circle class="crc-bg" cx="320" cy="320" r="100" fill="#fff"></circle> <circle class="crc-arc" cx="320" cy="320" r="150" fill="none" visibility="hidden" stroke-width="200" stroke="#E81B59" stroke-dasharray="10, 350" stroke-dashoffset="-230" ></circle> <a class="svg__link" target="_blank" xlink:href="https://codepen.io/mudrenok/"> <use class="link-cdpn" xlink:href="#codepen" width="50" height="50" x="300" y="300" fill="#21264b"></use> </a> <a class="svg__link" target="_blank" xlink:href="https://dribbble.com/shots/3377940-Home-Budget-App-Interactions"> <use class="link-drbl" xlink:href="#dribbble" width="50" height="50" x="300" y="300" fill="#fff"></use> </a> <a class="svg__link" target="_blank" xlink:href="https://twitter.com/AntonMudrenok"> <use class="link-twtr" xlink:href="#twitter" width="50" height="50" x="300" y="300" fill="#21264b"></use> </a> <radialGradient id="grd"> <stop offset="0" style="stop-color:rgba(0,0,0, 0)"> </stop> <stop offset="0.85" style="stop-color:rgba(0,0,0, 0.85)"> </stop> <stop offset="1" style="stop-color:rgba(0,0,0, 0)"> </stop> </radialGradient> <circle class="crc-sd" cx="320" cy="320" r="105" fill=url(#grd)></circle> <circle class="crc-sm" cx="320" cy="320" r="100" fill="#fff"></circle> <g class="burger"> <line class="brgr-top" stroke-width="5.5" stroke="#21264b" stroke-linecap="round" x1="270" y1="270" x2="296" y2="270" ></line> <line class="brgr-mid" stroke-width="5.5" stroke="#21264b" stroke-linecap="round" x1="270" y1="282" x2="296" y2="282" ></line> <line class="brgr-bot" stroke-width="5.5" stroke="#21264b" stroke-linecap="round" x1="270" y1="294" x2="296" y2="294" ></line> </g> </svg> </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Radial Menu Animation - Script Codes CSS Codes

*, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0;
}
html, body { min-height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #1c86cf; font-size: 62.5%; font-family: Helvetica, sans-serif;
}
@media screen and (max-width: 520px) { html, body { width: 100%; overflow-x: hidden; font-size: 50%; }
}
.content { position: relative; width: 50vw; min-width: 50rem; max-width: 70rem; max-height: 70rem; min-height: 55rem; height: 90vh; box-shadow: 0 0 4rem black; background-color: #21264b;
}
@media screen and (max-width: 520px) { .content { width: 100%; min-width: 30rem; min-height: 100vh; max-height: 100vh; }
}
.content__items--wrap { position: relative; width: 100%; height: calc(100% - 25rem); overflow: hidden;
}
.content__items { overflow-y: auto; height: 100%; width: calc(100% + 17px);
}
.content__menu { position: absolute; right: 0; bottom: 0; width: 36rem; height: 36rem; pointer-events: none;
}
.header { position: relative; height: 25rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
}
.header__topBar { width: 70%; height: 7.6rem; border-radius: 3.8rem; margin-bottom: 2.4rem; background-image: -webkit-linear-gradient(top, #fff 0%, #e5f1fe 100%); background-image: linear-gradient(to bottom, #fff 0%, #e5f1fe 100%);
}
.header__botBar { width: 50%; height: 6rem; border-radius: 3rem; background-color: #f34a33;
}
.header:after { content: ""; display: block; position: absolute; top: 100%; left: 0; width: 100%; height: 0.2rem; background-image: -webkit-linear-gradient(left, #202747 0%, #28345e 50%, #202747 100%); background-image: linear-gradient(to right, #202747 0%, #28345e 50%, #202747 100%);
}
.item { width: 95%; height: 12rem; margin: 1.2rem 0 1.2rem 0; border-radius: 0 6rem 6rem 0; background-color: #28305a;
}
.crc-sm, .svg__link { pointer-events: auto;
}

Radial Menu Animation - Script Codes JS Codes

"use strict";
var qs = document.querySelector.bind(document);
var menuParts = { crcSm: qs(".crc-sm"), crcBg: qs(".crc-bg"), crcArc: qs(".crc-arc"), crcSd: qs(".crc-sd"), brgr: qs(".burger"), brgrTop: qs(".brgr-top"), brgrMid: qs(".brgr-mid"), brgrBot: qs(".brgr-bot"), linkDrbl: qs(".link-drbl"), linkCdpn: qs(".link-cdpn"), linkTwtr: qs(".link-twtr"), colBg: "#21264b"
};
(function () { TweenMax.set(menuParts.crcArc, { transformOrigin: "50% 50%", x: 120, y: 120, visibility: "visible" }); TweenMax.set([menuParts.crcBg, menuParts.crcSm, menuParts.crcArc, menuParts.crcSd, menuParts.brgrTop, menuParts.brgrMid, menuParts.brgrBot], { transformOrigin: "50% 50%" }); //TweenMax.globalTimeScale(0.5);
})();
var menuOn = function menuOn(onComplete) { var tl = arguments.length <= 1 || arguments[1] === undefined ? new TimelineMax() : arguments[1]; var brgrShft = 10; var brgrRt = 12; tl.to(menuParts.crcBg, 1.2, { scale: 2.5, ease: Elastic.easeOut.config(1.2, 0.5) }, 0).to(menuParts.crcSm, 0.8, { scale: 1.3, ease: Elastic.easeOut.config(5, 1) }, 0.1).to(menuParts.crcSd, 0.8, { scale: 1.3, ease: Elastic.easeOut.config(5, 1) }, 0.1).to(menuParts.crcSm, 0.6, { ease: Power4.easeOut, fill: menuParts.colBg }, 0.1).to(menuParts.brgr, 0.3, { x: -brgrShft, y: -brgrShft }, 0.2).to(menuParts.brgrTop, 0.2, { y: brgrRt }, 0.1).to(menuParts.brgrBot, 0.2, { y: -brgrRt }, 0.1).to(menuParts.brgrTop, 0.4, { rotation: 45, stroke: "#fff" }, 0.1).to(menuParts.brgrMid, 0.4, { rotation: 45, stroke: "rgba(255,255,255,0)" }, 0.1).to(menuParts.brgrBot, 0.4, { rotation: -45, stroke: "#fff" }, 0.1).to(menuParts.crcArc, 0.4, { x: 0, y: 0, ease: Power3.easeOut }, 0.2).to(menuParts.crcArc, 0.3, { strokeDasharray: "85, 275", strokeDashoffset: "-186" }, 0.6).to(menuParts.linkCdpn, 0.25, { x: -190, y: -40, ease: Power1.easeOut }, "-=0.75").to(menuParts.linkDrbl, 0.25, { x: -138, y: -138, ease: Power1.easeOut }, "-=0.65").to(menuParts.linkTwtr, 0.25, { x: -40, y: -190, ease: Power1.easeOut }, "-=0.55").set(menuParts.brgrBot, { onComplete: onComplete }).pause(); return tl;
};
var menuOff = function menuOff(onComplete) { var tl = arguments.length <= 1 || arguments[1] === undefined ? new TimelineMax() : arguments[1]; tl.to(menuParts.linkTwtr, 0.25, { x: 0, y: 0, ease: Power2.easeIn }).to(menuParts.linkDrbl, 0.25, { x: 0, y: 0, ease: Power2.easeIn }, "-=0.1").to(menuParts.linkCdpn, 0.25, { x: 0, y: 0, ease: Power2.easeIn }, "-=0.1").to(menuParts.crcBg, 0.55, { scale: 1, ease: Back.easeIn.config(3) }, 0.05).to(menuParts.crcSm, 0.45, { fill: "#fff", ease: Power4.easeIn }, 0.15).to(menuParts.crcSm, 0.45, { scale: 1, ease: Back.easeIn.config(3) }, 0.15).to(menuParts.crcSd, 0.45, { scale: 1, ease: Back.easeIn.config(3) }, 0.15).to(menuParts.crcArc, 0.4, { strokeDasharray: "0, 359", strokeDashoffset: "-240" }, 0.1).set(menuParts.crcArc, { strokeDasharray: "10, 350", strokeDashoffset: "-230", x: 120, y: 120 }, 0.51).to(menuParts.brgr, 0.4, { x: 0, y: 0, ease: Power1.easeIn }, 0.2).to(menuParts.brgrTop, 0.3, { rotation: 0, stroke: menuParts.colBg, ease: Power1.easeIn }, 0.2).to(menuParts.brgrMid, 0.3, { rotation: 0, stroke: menuParts.colBg, ease: Power1.easeIn }, 0.2).to(menuParts.brgrBot, 0.3, { rotation: 0, stroke: menuParts.colBg, ease: Power1.easeIn }, 0.2).to(menuParts.brgrTop, 0.1, { y: 0 }, 0.5).to(menuParts.brgrBot, 0.1, { y: 0 }, 0.5).set(menuParts.brgrBot, { onComplete: onComplete }).pause(); return tl;
};
var toggle = function toggle() { var on = false; var time = true; var onComplete = function onComplete() { time = true; }; var tlOff = menuOff(onComplete); var tlOn = menuOn(onComplete); return function (e) { if (time) { time = false; on ? tlOff.play(0) : tlOn.play(0); on = !on; } };
};
menuParts.crcSm.addEventListener("click", toggle());
Radial Menu Animation - Script Codes
Radial Menu Animation - Script Codes
Home Page Home
Developer Anton Mudrenok
Username mudrenok
Uploaded September 28, 2022
Rating 4.5
Size 7,341 Kb
Views 20,240
Do you need developer help for Radial Menu Animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anton Mudrenok (mudrenok) Script Codes
Name
Swipeable Video Cards
Gomoku JS
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!