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

[feat] attempt to reduce laggy animation

Browse source
This commit is contained in:
Alvalen 2023-09-21 10:32:32 +07:00
parent 87c1ec1b82
commit 2ce97cccb9
1 changed files with 32 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

30
components/Navbar.jsx
View file

@ -13,7 +13,9 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
open: {
clipPath: `circle(1920px at calc(100% - 40px) 40px)`,
transition: {
type: "tween", // Use a linear or ease transition
type: "spring",
stiffness: 400,
damping: 40,
},
},
closed: {
@ -43,7 +45,13 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
// Check screen width and adjust clipPath for smaller screens
if (isMobile) {
navVariant.closed = {
(navVariant.open = {
clipPath: `circle(1920px at calc(100% - 40px) 40px)`,
transition: {
type: "tween",
},
}),
(navVariant.closed = {
clipPath: "circle(0px at calc(100% - 35px) 35px)",
transition: {
delay: 0.5,
@ -51,9 +59,17 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
stiffness: 400,
damping: 40,
},
};
});
} else {
navVariant.closed = {
(navVariant.open = {
clipPath: `circle(1920px at calc(100% - 40px) 40px)`,
transition: {
type: "spring",
stiffness: 400,
damping: 40,
},
}),
(navVariant.closed = {
clipPath: "circle(0px at calc(100% - 120px) 35px)",
transition: {
delay: 0.5,
@ -61,7 +77,7 @@ const NavItems = ({ isNavOpen, setIsNavOpen }) => {
stiffness: 400,
damping: 40,
},
};
});
}
const itemVariants = {
open: {
@ -180,9 +196,7 @@ const Navbar = () => {
<div>
<h1
className={`text-2xl ml-2 md:ml-0 ${
isNavOpen
? "text-white"
: ""
isNavOpen ? "text-white" : ""
}`}>
Alvalens
</h1>