Design comparison
Solution retrospective
What are you most proud of, and what would you do differently next time?
I used gsap
to add animation to menu when opening or closing.
import MenuIcon from "/images/icon-hamburger.svg";
import CloseIcon from "/images/icon-close.svg";
import gsap from "gsap";
const btn = document.getElementById("btn") as HTMLImageElement;
const menu = document.getElementById("menu") as HTMLDivElement;
let isMenuOpen = false;
btn.addEventListener("click", () => {
if (isMenuOpen) {
btn.src = MenuIcon;
gsap.to(menu, {
height: "0",
duration: 0.5,
ease: "power2.out",
onComplete: () => {
isMenuOpen = false;
},
});
} else {
btn.src = CloseIcon;
gsap.to(menu, {
height: "auto",
duration: 0.5,
ease: "power2.out",
onComplete: () => {
isMenuOpen = true;
},
});
}
});
Community feedback
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord