Design comparison
SolutionDesign
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