Hello everyone!!
i’m trying to make a menu button as half a circle from the corner ,when the animation is reversed by using another animation i’m getting around 30 error messages from css , i checked and some people are saying there’s a syntax error in css but i rewrite the whole thing and nothing changed .
my html :
<ul>
<a href="#"><li>home</li></a>
<a href="#"><li>about us</li></a>
<a href="#"><li>projects</li></a>
<a href="#"><li>products</li></a>
<a href="#"><li>e-catalog</li></a>
<a href="#"><li>contact us</li></a>
</ul>
css :
.nav-list-round{
width: 400px;
height: 400px;
background-color: antiquewhite;
border-radius: 50%;
flex-direction: column;
list-style: none;
position: absolute;
top: -200px;
right: -200px;
}
.nav-item-round{
position: absolute;
top: 200px;
right: 200px;
}
.link-round{
color: rgb(2, 56, 56);
text-decoration: none;
font-size: 20px;
}
and js :
import anime from "animejs";
let menuState = false;
menu.addEventListener('click',()=>{
menuState = !menuState;
if(menuState){
anime({
targets: '.nav-list-round',
width: '400px',
height: '400px',
duration: 3000
})
}
else if(!menuState){
anime({
targets: '.nav-list-round',
width: '0px',
height: '0px',
duration: 3000
})
}
})
i tried rewriting the whole thing , including changing the values in the animation from string to numbers and also tried changing the css values and the animation values of width and height to 0 or more than that iv’e even tried a css validator but nothing worked out .
ps: the animation is working but it get bugy when i run it few times.