v.korobtsev/vkorobtsev-nextJs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[feat] try to improve navbar animation

Browse source
This commit is contained in:
Alvalen 2023-09-06 17:04:47 +07:00
parent 7286380302
commit 54b9389e63
1 changed files with 6 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

12
components/Navbar.jsx
View file

@ -10,14 +10,14 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
setIsNavOpen(false); setIsNavOpen(false);
}; };
const navVariant = { const navVariant = {
open: (height = 1000) => ({ open: {
clipPath: `circle(${height + 400}px at calc(100% - 40px) 40px)`, clipPath: `circle(1920px at calc(100% - 40px) 40px)`,
transition: { transition: {
type: "spring", type: "spring",
stiffness: 400, stiffness: 400,
damping: 30, damping: 20,
}, },
}), },
closed: { closed: {
clipPath: "circle(0px at calc(100% - 120px) 35px)", clipPath: "circle(0px at calc(100% - 120px) 35px)",
transition: { transition: {
@ -46,7 +46,7 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
// Check screen width and adjust clipPath for smaller screens // Check screen width and adjust clipPath for smaller screens
if (isMobile) { if (isMobile) {
navVariant.closed = { navVariant.closed = {
clipPath: "circle(0px at calc(100% - 35px) 35px)", // Adjusted value for mobile screens clipPath: "circle(0px at calc(100% - 35px) 35px)",
transition: { transition: {
delay: 0.5, delay: 0.5,
type: "spring", type: "spring",
@ -81,7 +81,7 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
return ( return (
<> <>
<motion.div <motion.div
className={`fixed z-[45] w-full h-screen flex items-center justify-center backdrop-blur-sm transition-all ease duration-700`} className={`fixed z-[45] w-full h-screen flex items-center justify-center backdrop-blur-sm transition-all ease duration-700 overflow-clip`}
variants={navVariant} variants={navVariant}
animate={isNavOpen ? "open" : "closed"} animate={isNavOpen ? "open" : "closed"}
initial={false}> initial={false}>