<!-- For navigation bar-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script>
// get elements
let menuLink = $(".link_nav_menu_flyout");
let content = $(".wrapper_flyout-list");
let menuBG = $(".flyout");
let dropdownWrap = $(".wrapper_flyout");
let menuArrow = $(".pointer_flyout");
gsap.defaults({
 duration: 0.4
});function revealDropdown(currentLink, currentContent) {
 dropdownWrap.css("display", "flex");
 showDropdown.restart();
 gsap.set(menuArrow, {
   width: currentLink.outerWidth(),
   x: currentLink.offset().left
 });
 gsap.set(menuBG, {
   width: currentContent.outerWidth(),
   height: currentContent.outerHeight()
 });
 gsap.set(content, {
   opacity: 0
 });
 gsap.set(currentContent, {
   opacity: 1,
   x: "0em"
 });
}function switchDropdown(currentLink, previousContent, currentContent) {
 gsap.to(menuArrow, {
   width: currentLink.outerWidth(),
   x: currentLink.offset().left
 });
 gsap.to(menuBG, {
   width: currentContent.outerWidth(),
   height: currentContent.outerHeight()
 });
 // invert moveDistance if needed
 let moveDistance = 10;
 if (currentContent.index() < previousContent.index()) {
   moveDistance = moveDistance * -1;
 }
 gsap.fromTo(
   previousContent,
   { opacity: 1, x: "0em" },
   {
     opacity: 0,
     x: moveDistance * -1 + "em",
     duration: 0.3
   }
 );
 gsap.fromTo(
   currentContent,
   { opacity: 0, x: moveDistance + "em" },
   {
     opacity: 1,
     x: "0em",
     duration: 0.3
   }
 );
}// Open dropdown animation
let showDropdown = gsap.timeline({
 paused: true,
 onReverseComplete: () => {
   dropdownWrap.css("display", "none");
   menuLink.removeClass("active");
 }
});
showDropdown.from(dropdownWrap, { opacity: 0, rotateX: -10, duration: 0.2 }).to(menuArrow, { opacity: 1, duration: 0.2 }, "<");// Link Hover In
menuLink.on("mouseenter", function () {
 // get elements
 let previousLink = menuLink.filter(".active").removeClass("active");
 let currentLink = $(this).addClass("active");
 let previousContent = content.filter(".active").removeClass("active");
 let currentContent = content.eq($(this).index()).addClass("active");
 // play animations
 if (previousLink.length === 0) {
   revealDropdown(currentLink, currentContent);
 } else if (previousLink.index() !== currentLink.index()) {
   switchDropdown(currentLink, previousContent, currentContent);
 }
});// Menu Hover Out
$(".wrapper_menu-flyout").on("mouseleave", function () {
 showDropdown.reverse();
});
</script>