0 180 0 1 180 0 0 hidden transform 0 .8 top left 1 1 .01 .5 0 .8 1 power4.out top 60% top 10% true 360 180 none .05
1 transform top top bottom top true 20vmin none .001 auto .33 hidden auto 75 3 .15 top center hidden transform 60 .9 0 center 60% play none none reverse 0 1 .01 1 .8 .1

Dropdown Burger Nav

An experimental nav bar with a nifty hamburger animation. Leverages a SoulMagic click event and a custom-made burger icon.

<soulmagic id="burger" users=".burger-parent">
    <set targets=".mobile-nav-panel">
        <opacity>0</opacity>
        <clip-path>inset(0% 0% 0% 100%)</clip-path>
    </set>
    <set targets=".topline">
        <opacity>1</opacity>
        <transform-origin>left</transform-origin>
    </set>
    <set targets=".bottomline">
        <transform-origin>left</transform-origin>
    </set>
    <set targets="li">
        <opacity>0</opacity>
        <x-percent>10</x-percent>
		<backface-visibility>hidden</backface-visibility>
    </set>

    <event type="click" trigger="button" away=".mobile-nav-panel"></event>

    <!-- 	IN TIMELINE -->
    <timeline>
        <to targets=".topline" position="0">
            <rotation>45</rotation>
            <y>-1</y>
            <x>4</x>
            <duration>.4</duration>
        </to>
        <to targets=".midline" position="0">
            <opacity>0</opacity>
            <x-percent>-100</x-percent>
            <duration>.4</duration>

        </to>
        <to targets=".bottomline" position="0">
            <rotation>-45</rotation>
            <y>1</y>
            <x>4</x>
            <duration>.4</duration>

        </to>
        <to targets=".overlay" scope="html" position="0">
            <opacity>1</opacity>
            <duration>.4</duration>
        </to>
        <to targets=".mobile-nav-panel" position="-=.3">
            <opacity>1</opacity>
            <duration>.4</duration>
            <clip-path>inset(0% 0% 0% 0%)</clip-path>
        </to>
        <to targets="li" position="-=.3">
            <opacity>1</opacity>
            <x-percent>0</x-percent>
            <rotation>.01</rotation>

            <stagger>.1</stagger>
        </to>

    </timeline>

    <!-- 	OUT TIMELINE -->
    <timeline>
        <to targets=".topline" position="0">
            <rotation>0</rotation>
            <y>0</y>
            <x>0</x>
            <duration>.2</duration>

        </to>
        <to targets=".midline" position="0">
            <opacity>1</opacity>
            <x-percent>0</x-percent>
            <duration>.2</duration>

        </to>
        <to targets=".bottomline" position="0">
            <rotation>0</rotation>
            <y>0</y>
            <x>0</x>
            <duration>.2</duration>
        </to>

        <to targets=".overlay" scope="html" position="0">
            <opacity>0</opacity>
            <duration>.4</duration>
        </to>
        <to targets=".mobile-nav-panel" position="0">
            <opacity>0</opacity>
            <clip-path>inset(0% 0% 0% 100%)</clip-path>
            <duration>.3</duration>
            <ease>power2.in</ease>

        </to>
        <to targets="li" position="0">
            <opacity>0</opacity>
            <x-percent>10</x-percent>
            <stagger>.05</stagger>
        </to>

    </timeline>
</soulmagic>

<!-- .nava -->
<div class="nava // fixed-ob left-0 top-0 // w-full p--sm z-10 // bg-p-900 text-p-50">
    <div class="flex items-center justify-between // max-w--doc">

        <!-- .logo -->
        <div class="logo">
            <a href="/">Logo / Company</a>
        </div>

        <!-- .globalnav -->
        <div class="globalnav // hidden lg:block // dropdown-parent">
            <button>Menu</button>
        </div>

        <!-- .mobilenav -->
        <div class="mobilenav // lg:hiddenx // burger-parent">

            <!-- .burger -->
            <button class="burger // relative flex flex-col // inline-block z-50" style="width:25px; height:18px">

                <span class="absolute block w-full h-2px bg-p-50 // topline" style="top:0px;"></span>
                <span class="absolute block w-full h-2px bg-p-50 // midline" style="top:8px;"></span>
                <span class="absolute block w-full h-2px bg-p-50 // bottomline" style="top:16px"></span>

            </button>
            <div class="overlay // absolute top-0 left-0 // w-full h-screen bg-p-900 bg-opacity-80 z-10 opacity-0"></div>
            <!-- .mobile-nav-panel -->
            <div class="absolute top-0 left-0 // flex items-center // w-full h-screen px-doc // bg-p-900 z-10 mobile-nav-panel">
                <nav>
                    <ul class="text-5xl md:text-7xl lg:text-8xl font-semibold tracking-tight text-a-200 space-y-4" style="line-height:1">
                        <li>
                            <a href="">About</a>
                        </li>
                        <li>
                            <a href="">Services</a>
                        </li>
                        <li>
                            <a href="">Portfolio</a>
                        </li>
                        <li>
                            <a href="">Contact</a>
                        </li>
                        <li>
                            <a href="">Schmontact</a>
                        </li>
                    </ul>
                </nav>
            </div>

        </div>

    </div>
</div>
<soulmagic id="burger" users=".burger-parent">
    <set targets=".mobile-nav-panel">
        <opacity>0</opacity>
        <clip-path>inset(0% 0% 0% 100%)</clip-path>
    </set>
    <set targets=".topline">
        <opacity>1</opacity>
        <transform-origin>left</transform-origin>
    </set>
    <set targets=".bottomline">
        <transform-origin>left</transform-origin>
    </set>
    <set targets="li">
        <opacity>0</opacity>
        <x-percent>10</x-percent>
		<backface-visibility>hidden</backface-visibility>
    </set>

    <event type="click" trigger="button" away=".mobile-nav-panel"></event>

    <!-- 	IN TIMELINE -->
    <timeline>
        <to targets=".topline" position="0">
            <rotation>45</rotation>
            <y>-1</y>
            <x>4</x>
            <duration>.4</duration>
        </to>
        <to targets=".midline" position="0">
            <opacity>0</opacity>
            <x-percent>-100</x-percent>
            <duration>.4</duration>

        </to>
        <to targets=".bottomline" position="0">
            <rotation>-45</rotation>
            <y>1</y>
            <x>4</x>
            <duration>.4</duration>

        </to>
        <to targets=".overlay" scope="html" position="0">
            <opacity>1</opacity>
            <duration>.4</duration>
        </to>
        <to targets=".mobile-nav-panel" position="-=.3">
            <opacity>1</opacity>
            <duration>.4</duration>
            <clip-path>inset(0% 0% 0% 0%)</clip-path>
        </to>
        <to targets="li" position="-=.3">
            <opacity>1</opacity>
            <x-percent>0</x-percent>
            <rotation>.01</rotation>

            <stagger>.1</stagger>
        </to>

    </timeline>

    <!-- 	OUT TIMELINE -->
    <timeline>
        <to targets=".topline" position="0">
            <rotation>0</rotation>
            <y>0</y>
            <x>0</x>
            <duration>.2</duration>

        </to>
        <to targets=".midline" position="0">
            <opacity>1</opacity>
            <x-percent>0</x-percent>
            <duration>.2</duration>

        </to>
        <to targets=".bottomline" position="0">
            <rotation>0</rotation>
            <y>0</y>
            <x>0</x>
            <duration>.2</duration>
        </to>

        <to targets=".overlay" scope="html" position="0">
            <opacity>0</opacity>
            <duration>.4</duration>
        </to>
        <to targets=".mobile-nav-panel" position="0">
            <opacity>0</opacity>
            <clip-path>inset(0% 0% 0% 100%)</clip-path>
            <duration>.3</duration>
            <ease>power2.in</ease>

        </to>
        <to targets="li" position="0">
            <opacity>0</opacity>
            <x-percent>10</x-percent>
            <stagger>.05</stagger>
        </to>

    </timeline>
</soulmagic>

<!-- .nava -->
<div class="nava // fixed-ob left-0 top-0 // w-full p--sm z-10 // bg-p-900 text-p-50">
    <div class="flex items-center justify-between // max-w--doc">

        <!-- .logo -->
        <div class="logo">
            <a href="/">Logo / Company</a>
        </div>

        <!-- .globalnav -->
        <div class="globalnav // hidden lg:block // dropdown-parent">
            <button>Menu</button>
        </div>

        <!-- .mobilenav -->
        <div class="mobilenav // lg:hiddenx // burger-parent">

            <!-- .burger -->
            <button class="burger // relative flex flex-col // inline-block z-50" style="width:25px; height:18px">

                <span class="absolute block w-full h-2px bg-p-50 // topline" style="top:0px;"></span>
                <span class="absolute block w-full h-2px bg-p-50 // midline" style="top:8px;"></span>
                <span class="absolute block w-full h-2px bg-p-50 // bottomline" style="top:16px"></span>

            </button>
            <div class="overlay // absolute top-0 left-0 // w-full h-screen bg-p-900 bg-opacity-80 z-10 opacity-0"></div>
            <!-- .mobile-nav-panel -->
            <div class="absolute top-0 left-0 // flex items-center // w-full h-screen px-doc // bg-p-900 z-10 mobile-nav-panel">
                <nav>
                    <ul class="text-5xl md:text-7xl lg:text-8xl font-semibold tracking-tight text-a-200 space-y-4" style="line-height:1">
                        <li>
                            <a href="">About</a>
                        </li>
                        <li>
                            <a href="">Services</a>
                        </li>
                        <li>
                            <a href="">Portfolio</a>
                        </li>
                        <li>
                            <a href="">Contact</a>
                        </li>
                        <li>
                            <a href="">Schmontact</a>
                        </li>
                    </ul>
                </nav>
            </div>

        </div>

    </div>
</div>

Ready to use this component in your Beaver Builder sites?

Install SoulMagic and SoulSections, then copy and paste the above code into a SoulSections module.