diff --git a/src/components/Header.tsx b/src/components/Header.tsx index daf4a13..b625879 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -40,6 +40,13 @@ const Header = () => { pointerEvents: 'none', ease: 'power4.in' }); + gsap.to(mobile.current!.querySelector(':scope nav > .mobile ul li sup'), { + x: 15, + opacity: 0, + duration: .15, + pointerEvents: 'none', + ease: 'power4.in' + }); setIsMobileNavOpen(false); } else { gsap.to('main, #app > article, footer', { @@ -58,6 +65,14 @@ const Header = () => { pointerEvents: 'all', ease: 'power4.out' }); + gsap.to(mobile.current!.querySelector(':scope nav > .mobile ul li sup'), { + x: 0, + opacity: 1, + delay: .16, + duration: .025, + pointerEvents: 'all', + ease: 'power4.out' + }); setIsMobileNavOpen(true); } } diff --git a/src/styles/app.scss b/src/styles/app.scss index f824cce..c004b3a 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -344,7 +344,8 @@ header { pointer-events: none; li { - display: block; + display: flex; + flex-direction: row-reverse; overflow: hidden; pointer-events: none; @@ -358,7 +359,11 @@ header { } sup { - display: none; + display: grid; + opacity: 0; + margin: auto auto 1.8rem; + height: 10px; + transform: translateX(15px); } } }