Nav Titlebar with reveal on scroll up

  • uses GSAP to show titlebar when scrolling back up
<div class="bg-gray-150 content-section-bg-image" style="background-position: bottom -50px right 70px; background-size: 400px;">
    <div class="flex flex-wrap uppercase py-4 sm:py-8 md:py-12 max-w-6xl mx-auto justify-center text-center text-base font-bold">

        <div class="w-1/2 md:w-1/4 p-4">
            <a class="group block h-full" href="">
                <div class="h-full flex items-center justify-center px-3 py-4 border text-purple-900 hover:text-white border-2 border-purple-900 bg-transparent group-hover:bg-purple-950 leading-tight transition-transform duration-300 transform ease-in-out">
                    <div class="transition-transform duration-300 transform ease-in-out group-hover:scale-115 group-hover:-translate-x-px">
                        <svg class="mr-2 mb-1 h-7 w-7 fill-current" xmlns="http://www.w3.org/2000/svg" version="1.0" width="24" height="24">
                            <g>
                                <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10">
                                    <path d="M1 22.5l1-1 2 2 2-2 2 2 2-2 2 2 2-2 2 2 2-2 2 2 2-2 1 1" />
                                    <path d="M4.5 23l-4-8.5 9 3h14l-1.5 4" />
                                    <path d="M6.5 16.5v-7H11l3 3h7.5M20.5 12.5l1 5" />
                                    <path d="M9 9.5L11 4l5.5 2-2.5 6.5M10.176 6.26l5.422 2.086M14.5 1.5l1-1 2 2 2-2 2 2 2-2M21.117 15.5H14.5v-3M17.5 15.5v-3M6.5 12.5h4v2h-4" />
                                </g>
                            </g>
                        </svg>
                    </div>
                    <div class="transition-transform duration-300 transform ease-in-out group-hover:scale-105 group-hover:translate-x-px">
                        Boat Rentals
                    </div>
                </div>
            </a>
        </div>

        <div class="w-1/2 md:w-1/4 p-4">
            <a class="group block h-full" href="">
                <div class="h-full flex items-center justify-center px-3 py-4 border text-purple-900 hover:text-white border-2 border-purple-900 bg-transparent group-hover:bg-purple-950 leading-tight transition-transform duration-300 transform ease-in-out">
                    <div class="transition-transform duration-300 transform ease-in-out group-hover:scale-115 group-hover:-translate-x-px">
                        <svg class="mr-2 mb-1 h-7 w-7 fill-current" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
                            <path d="M15 3v5h2V3zM7.5 6.09l-1.41 1.4 3.53 3.56 1.43-1.44zm17 0l-3.57 3.53 1.43 1.43 3.53-3.57zM16 8.99c-3.86 0-7 3.14-7 7 0 3.85 3.14 7 7 7 3.85 0 7-3.15 7-7 0-3.86-3.15-7-7-7zm0 2c2.77 0 5 2.22 5 5 0 2.77-2.23 5-5 5-2.78 0-5-2.23-5-5 0-2.78 2.22-5 5-5zm-13 4v2h5v-2zm21 0v2h5v-2zM9.625 20.92l-3.54 3.56 1.4 1.4 3.56-3.54zm12.75 0l-1.44 1.43 3.56 3.53 1.4-1.41zM15 23.98v5h2v-5z" />
                        </svg>
                    </div>
                    <div class="transition-transform duration-300 transform ease-in-out group-hover:scale-105 group-hover:translate-x-px">
                        Summer Programs
                    </div>
                </div>
            </a>
        </div>

        <div class="w-1/2 md:w-1/4 p-4">
            <a class="group block h-full" href="">
                <div class="h-full flex items-center justify-center px-3 py-4 border text-purple-900 hover:text-white border-2 border-purple-900 bg-transparent group-hover:bg-purple-950 leading-tight transition-transform duration-300 transform ease-in-out">
                    <div class="transition-transform duration-300 transform ease-in-out group-hover:scale-115 group-hover:-translate-x-px">
                        <svg class="mr-3 mb-1 h-7 w-7 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                            <path d="M0 7c0 1.625 1.832 3 4 3 1.188 0 2.262-.418 3-1.059C7.738 9.582 8.813 10 10 10c1.188 0 2.262-.418 3-1.059.738.641 1.813 1.059 3 1.059 1.188 0 2.262-.418 3-1.059.738.641 1.813 1.059 3 1.059 1.188 0 2.262-.418 3-1.059.738.641 1.813 1.059 3 1.059 2.168 0 4-1.375 4-3h-2c0 .305-.758 1-2 1-1.223 0-2-.703-2-1h-2c0 .305-.758 1-2 1-1.223 0-2-.703-2-1h-2c0 .305-.758 1-2 1-1.223 0-2-.703-2-1h-2c0 .305-.754 1-2 1-1.223 0-2-.703-2-1H6c0 .305-.754 1-2 1-1.223 0-2-.703-2-1zm0 8c0 1.625 1.832 3 4 3 1.188 0 2.262-.418 3-1.059.738.641 1.813 1.059 3 1.059 1.188 0 2.262-.418 3-1.059.738.641 1.813 1.059 3 1.059 1.188 0 2.262-.418 3-1.059.738.641 1.813 1.059 3 1.059 1.188 0 2.262-.418 3-1.059.738.641 1.813 1.059 3 1.059 2.168 0 4-1.375 4-3h-2c0 .305-.758 1-2 1-1.223 0-2-.703-2-1h-2c0 .305-.758 1-2 1-1.223 0-2-.703-2-1h-2c0 .305-.758 1-2 1-1.223 0-2-.703-2-1h-2c0 .305-.754 1-2 1-1.223 0-2-.703-2-1H6c0 .305-.754 1-2 1-1.223 0-2-.703-2-1zm0 8c0 1.625 1.832 3 4 3 1.188 0 2.262-.418 3-1.059.738.641 1.813 1.059 3 1.059 1.188 0 2.262-.418 3-1.059.738.641 1.813 1.059 3 1.059 1.188 0 2.262-.418 3-1.059.738.641 1.813 1.059 3 1.059 1.188 0 2.262-.418 3-1.059.738.641 1.813 1.059 3 1.059 2.168 0 4-1.375 4-3h-2c0 .305-.758 1-2 1-1.223 0-2-.703-2-1h-2c0 .305-.758 1-2 1-1.223 0-2-.703-2-1h-2c0 .305-.758 1-2 1-1.223 0-2-.703-2-1h-2c0 .305-.754 1-2 1-1.223 0-2-.703-2-1H6c0 .305-.754 1-2 1-1.223 0-2-.703-2-1z" />
                        </svg>
                    </div>
                    <div class="transition-transform duration-300 transform ease-in-out group-hover:scale-105 group-hover:translate-x-px">
                        Swim & Soak
                    </div>
                </div>
            </a>
        </div>

        <div class="w-1/2 md:w-1/4 p-4">
            <a class="group block h-full" href="">
                <div class="h-full flex items-center justify-center px-3 py-4 border text-purple-900 hover:text-white border-2 border-purple-900 bg-transparent group-hover:bg-purple-950 leading-tight transition-transform duration-300 transform ease-in-out">
                    <div class="transition-transform duration-300 transform ease-in-out group-hover:scale-115 group-hover:-translate-x-px">
                        <svg class="mr-2 mb-1 h-7 w-7 fill-current" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
                            <path d="M14.51.43a.516.516 0 00-.5-.44H14c-.26 0-.47.19-.5.44l-.74 6.084c-.03.27-.25.476-.52.476s-.5-.21-.52-.5L10.98.42c-.04-.256-.25-.46-.52-.44a.5.5 0 00-.49.47L9.61 6.5a.521.521 0 01-1.04-.02L7.95.41a.504.504 0 00-.48-.45c-.23-.03-.47.15-.52.401L5.44 7.88c-.32 2.106.89 4.077 2.97 4.91l-.98 14.15c0 2.07 1.5 3 3 3 1.87 0 3-1.13 3-3.04l-.98-14.125c2.074-.84 3.28-2.81 2.97-4.92l-1-7.496zm-2.65 11.59c-.22.07-.37.28-.35.51l.99 14.46c0 1.346-.66 2-2 2-.97 0-2-.53-2.01-1.97l1-14.5a.508.508 0 00-.35-.51c-1.55-.5-2.965-1.92-2.67-3.93l.84-4.24.27 2.74c.06.782.72 1.39 1.51 1.39.78 0 1.44-.62 1.51-1.41l.03-.53.06.54c.06.78.72 1.39 1.513 1.39.78 0 1.44-.62 1.51-1.38l.25-2.15.47 3.59c.3 2.03-1.12 3.45-2.66 3.95zM24.31.09a.51.51 0 00-.46-.07c-.06.02-5.34 1.95-5.34 7.97 0 4.47 1.2 6.654 1.81 7.474l-.68.67c-.09.08-.14.19-.15.3L18.5 26.82c-.08.78.18 1.54.73 2.15.58.64 1.4 1.01 2.25 1.01 1.59 0 3-1.41 3-3V.48a.48.48 0 00-.22-.41zm-.79 26.9c0 1.02-.98 2-2 2-.57 0-1.13-.25-1.52-.69-.36-.4-.53-.89-.48-1.39l.97-10.209.87-.88c.09-.1.14-.23.14-.37a.533.533 0 00-.17-.36c-.02-.02-1.84-1.76-1.84-7.13 0-4.116 2.7-6.04 4-6.73v25.724z" />
                        </svg>
                    </div>
                    <div class="transition-transform duration-300 transform ease-in-out group-hover:scale-105 group-hover:translate-x-px">
                        Resort Dining
                    </div>
                </div>
            </a>
        </div>

    </div>
</div>
<div class="bg-gray-150 content-section-bg-image" style="background-position: bottom -50px right 70px; background-size: 400px;">
    <div class="flex flex-wrap uppercase py-4 sm:py-8 md:py-12 max-w-6xl mx-auto justify-center text-center text-base font-bold">

        <div class="w-1/2 md:w-1/4 p-4">
            <a class="group block h-full" href="">
                <div class="h-full flex items-center justify-center px-3 py-4 border text-purple-900 hover:text-white border-2 border-purple-900 bg-transparent group-hover:bg-purple-950 leading-tight transition-transform duration-300 transform ease-in-out">
                    <div class="transition-transform duration-300 transform ease-in-out group-hover:scale-115 group-hover:-translate-x-px">
                        <svg class="mr-2 mb-1 h-7 w-7 fill-current" xmlns="http://www.w3.org/2000/svg" version="1.0"
                             width="24"
                             height="24">
                            <g>
                                <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                   stroke-miterlimit="10">
                                    <path d="M1 22.5l1-1 2 2 2-2 2 2 2-2 2 2 2-2 2 2 2-2 2 2 2-2 1 1"/>
                                    <path d="M4.5 23l-4-8.5 9 3h14l-1.5 4"/>
                                    <path d="M6.5 16.5v-7H11l3 3h7.5M20.5 12.5l1 5"/>
                                    <path d="M9 9.5L11 4l5.5 2-2.5 6.5M10.176 6.26l5.422 2.086M14.5 1.5l1-1 2 2 2-2 2 2 2-2M21.117 15.5H14.5v-3M17.5 15.5v-3M6.5 12.5h4v2h-4"/>
                                </g>
                            </g>
                        </svg>
                    </div>
                    <div class="transition-transform duration-300 transform ease-in-out group-hover:scale-105 group-hover:translate-x-px">
                        Boat Rentals
                    </div>
                </div>
            </a>
        </div>


        <div class="w-1/2 md:w-1/4 p-4">
            <a class="group block h-full" href="">
                <div class="h-full flex items-center justify-center px-3 py-4 border text-purple-900 hover:text-white border-2 border-purple-900 bg-transparent group-hover:bg-purple-950 leading-tight transition-transform duration-300 transform ease-in-out">
                    <div class="transition-transform duration-300 transform ease-in-out group-hover:scale-115 group-hover:-translate-x-px">
                        <svg class="mr-2 mb-1 h-7 w-7 fill-current"
                             viewBox="0 0 32 32"
                             xmlns="http://www.w3.org/2000/svg">
                            <path d="M15 3v5h2V3zM7.5 6.09l-1.41 1.4 3.53 3.56 1.43-1.44zm17 0l-3.57 3.53 1.43 1.43 3.53-3.57zM16 8.99c-3.86 0-7 3.14-7 7 0 3.85 3.14 7 7 7 3.85 0 7-3.15 7-7 0-3.86-3.15-7-7-7zm0 2c2.77 0 5 2.22 5 5 0 2.77-2.23 5-5 5-2.78 0-5-2.23-5-5 0-2.78 2.22-5 5-5zm-13 4v2h5v-2zm21 0v2h5v-2zM9.625 20.92l-3.54 3.56 1.4 1.4 3.56-3.54zm12.75 0l-1.44 1.43 3.56 3.53 1.4-1.41zM15 23.98v5h2v-5z"/>
                        </svg>
                    </div>
                    <div class="transition-transform duration-300 transform ease-in-out group-hover:scale-105 group-hover:translate-x-px">
                        Summer Programs
                    </div>
                </div>
            </a>
        </div>

        <div class="w-1/2 md:w-1/4 p-4">
            <a class="group block h-full" href="">
                <div class="h-full flex items-center justify-center px-3 py-4 border text-purple-900 hover:text-white border-2 border-purple-900 bg-transparent group-hover:bg-purple-950 leading-tight transition-transform duration-300 transform ease-in-out">
                    <div class="transition-transform duration-300 transform ease-in-out group-hover:scale-115 group-hover:-translate-x-px">
                        <svg class="mr-3 mb-1 h-7 w-7 fill-current" xmlns="http://www.w3.org/2000/svg"
                             viewBox="0 0 32 32">
                            <path d="M0 7c0 1.625 1.832 3 4 3 1.188 0 2.262-.418 3-1.059C7.738 9.582 8.813 10 10 10c1.188 0 2.262-.418 3-1.059.738.641 1.813 1.059 3 1.059 1.188 0 2.262-.418 3-1.059.738.641 1.813 1.059 3 1.059 1.188 0 2.262-.418 3-1.059.738.641 1.813 1.059 3 1.059 2.168 0 4-1.375 4-3h-2c0 .305-.758 1-2 1-1.223 0-2-.703-2-1h-2c0 .305-.758 1-2 1-1.223 0-2-.703-2-1h-2c0 .305-.758 1-2 1-1.223 0-2-.703-2-1h-2c0 .305-.754 1-2 1-1.223 0-2-.703-2-1H6c0 .305-.754 1-2 1-1.223 0-2-.703-2-1zm0 8c0 1.625 1.832 3 4 3 1.188 0 2.262-.418 3-1.059.738.641 1.813 1.059 3 1.059 1.188 0 2.262-.418 3-1.059.738.641 1.813 1.059 3 1.059 1.188 0 2.262-.418 3-1.059.738.641 1.813 1.059 3 1.059 1.188 0 2.262-.418 3-1.059.738.641 1.813 1.059 3 1.059 2.168 0 4-1.375 4-3h-2c0 .305-.758 1-2 1-1.223 0-2-.703-2-1h-2c0 .305-.758 1-2 1-1.223 0-2-.703-2-1h-2c0 .305-.758 1-2 1-1.223 0-2-.703-2-1h-2c0 .305-.754 1-2 1-1.223 0-2-.703-2-1H6c0 .305-.754 1-2 1-1.223 0-2-.703-2-1zm0 8c0 1.625 1.832 3 4 3 1.188 0 2.262-.418 3-1.059.738.641 1.813 1.059 3 1.059 1.188 0 2.262-.418 3-1.059.738.641 1.813 1.059 3 1.059 1.188 0 2.262-.418 3-1.059.738.641 1.813 1.059 3 1.059 1.188 0 2.262-.418 3-1.059.738.641 1.813 1.059 3 1.059 2.168 0 4-1.375 4-3h-2c0 .305-.758 1-2 1-1.223 0-2-.703-2-1h-2c0 .305-.758 1-2 1-1.223 0-2-.703-2-1h-2c0 .305-.758 1-2 1-1.223 0-2-.703-2-1h-2c0 .305-.754 1-2 1-1.223 0-2-.703-2-1H6c0 .305-.754 1-2 1-1.223 0-2-.703-2-1z"/>
                        </svg>
                    </div>
                    <div class="transition-transform duration-300 transform ease-in-out group-hover:scale-105 group-hover:translate-x-px">
                        Swim & Soak
                    </div>
                </div>
            </a>
        </div>

        <div class="w-1/2 md:w-1/4 p-4">
            <a class="group block h-full" href="">
                <div class="h-full flex items-center justify-center px-3 py-4 border text-purple-900 hover:text-white border-2 border-purple-900 bg-transparent group-hover:bg-purple-950 leading-tight transition-transform duration-300 transform ease-in-out">
                    <div class="transition-transform duration-300 transform ease-in-out group-hover:scale-115 group-hover:-translate-x-px">
                        <svg class="mr-2 mb-1 h-7 w-7 fill-current" viewBox="0 0 30 30"
                             xmlns="http://www.w3.org/2000/svg">
                            <path d="M14.51.43a.516.516 0 00-.5-.44H14c-.26 0-.47.19-.5.44l-.74 6.084c-.03.27-.25.476-.52.476s-.5-.21-.52-.5L10.98.42c-.04-.256-.25-.46-.52-.44a.5.5 0 00-.49.47L9.61 6.5a.521.521 0 01-1.04-.02L7.95.41a.504.504 0 00-.48-.45c-.23-.03-.47.15-.52.401L5.44 7.88c-.32 2.106.89 4.077 2.97 4.91l-.98 14.15c0 2.07 1.5 3 3 3 1.87 0 3-1.13 3-3.04l-.98-14.125c2.074-.84 3.28-2.81 2.97-4.92l-1-7.496zm-2.65 11.59c-.22.07-.37.28-.35.51l.99 14.46c0 1.346-.66 2-2 2-.97 0-2-.53-2.01-1.97l1-14.5a.508.508 0 00-.35-.51c-1.55-.5-2.965-1.92-2.67-3.93l.84-4.24.27 2.74c.06.782.72 1.39 1.51 1.39.78 0 1.44-.62 1.51-1.41l.03-.53.06.54c.06.78.72 1.39 1.513 1.39.78 0 1.44-.62 1.51-1.38l.25-2.15.47 3.59c.3 2.03-1.12 3.45-2.66 3.95zM24.31.09a.51.51 0 00-.46-.07c-.06.02-5.34 1.95-5.34 7.97 0 4.47 1.2 6.654 1.81 7.474l-.68.67c-.09.08-.14.19-.15.3L18.5 26.82c-.08.78.18 1.54.73 2.15.58.64 1.4 1.01 2.25 1.01 1.59 0 3-1.41 3-3V.48a.48.48 0 00-.22-.41zm-.79 26.9c0 1.02-.98 2-2 2-.57 0-1.13-.25-1.52-.69-.36-.4-.53-.89-.48-1.39l.97-10.209.87-.88c.09-.1.14-.23.14-.37a.533.533 0 00-.17-.36c-.02-.02-1.84-1.76-1.84-7.13 0-4.116 2.7-6.04 4-6.73v25.724z"/>
                        </svg>
                    </div>
                    <div class="transition-transform duration-300 transform ease-in-out group-hover:scale-105 group-hover:translate-x-px">
                        Resort Dining
                    </div>
                </div>
            </a>
        </div>

    </div>
</div>
/* No context defined. */