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

Pancakes with Iframes

Stack your pancakes here! ↓

Drag and drop these ‘pancakes’ into the dotted box.

<soulmagic id="splitter" users=".splitter-parent">

    <split targets=".headline" name="headline">
        <type>words</type>
    </split>

    <split targets=".subheadline" name="subheadline">
        <type>lines</type>
    </split>

    <split targets=".buttonlink" name="buttonlink">
        <type>chars</type>
    </split>

    <set targets="headline.words">
        <opacity>0</opacity>
        <y>60</y>
    </set>

    <set targets="subheadline.lines">
        <opacity>0</opacity>
        <y>20</y>
    </set>

    <set targets=".button">
        <scale>.5</scale>
        <opacity>0</opacity>
        <rotation>36</rotation>
    </set>

    <set targets="buttonlink.chars">
        <opacity>0</opacity>
        <y>20</y>
    </set>

    <event type="scroll">
        <start>top center</start>
    </event>

    <timeline>

        <to targets="headline.words">
            <opacity>1</opacity>
            <y>0</y>
            <rotation>.001</rotation>
            <stagger>.05</stagger>
            <ease>back</ease>
        </to>

        <to targets="subheadline.lines">
            <opacity>1</opacity>
            <y>0</y>
            <rotation>.001</rotation>
            <duration>1</duration>
            <stagger>.1</stagger>
        </to>

        <to targets=".button" position="-=.5">
            <scale>1</scale>
            <opacity>1</opacity>
            <rotation>0</rotation>
            <ease>power2</ease>
        </to>

        <to targets="buttonlink.chars" position="-=.25">
            <opacity>1</opacity>
            <y>0</y>
            <rotation>.001</rotation>
            <stagger>.025</stagger>
        </to>
    </timeline>
</soulmagic>

<!-- .tba -->
<div class="tba // p--2xl // bg-p-50 // splitter-parent">
    <div class="flex flex-col items-center // max-w--doc">
        <!-- .core -->
        <div class="core // flex flex-col items-start">
            <p class="type-10xl max-w-head // headline">Lorem, ipsum dolor sit amet consectetur adipisicing.</p>
            <p class="type-lg max-w-subhead // subheadline">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat blanditiis culpa necessitatibus facilis obcaecati dolorum.</p>
            <div class="mt-xs bg-a-600 text-p-50 rounded-button shadow // button"> <a class="inline-block px-5 py-3 // type-button // buttonlink" href="#">Get Started Here →</a> </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>
<!-- .bb2xlc -->
<div class="bb2xlc // p--2xl // bg-p-900 text-p-50">

    <!-- .subsection -->
    <div class="subsection // flex flex-col items-center // max-w--doc">

        <!-- .core -->
        <div class="core // flex flex-col items-center // text-center">

            <!-- .eyebrow -->
            <p class="eyebrow // type-eyebrow opacity-sm">Lorem Ipsum</p>

            <!-- .headline -->
            <p class="headline // max-w-head // type-10xl">A sensible, responsive starting point for Beaver Builders.</p>

            <!-- .subhead -->
            <p class="subhead // max-w-subhead // opacity-md type-xl">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat blanditiis culpa necessitatibus facilis obcaecati dolorum.</p>

            <!-- .cta -->
            <div class="cta // mt-sm // bg-a-600 hover:bg-a-700 text-p-50 rounded-button shadow">
                <a class="inline-block px-5 py-3 // type-button" href="#">Get Started</a>
            </div>

        </div>
    </div>
</div>
<!-- .tbxlc -->
<div class="tbxlc // p--xl">

    <!-- .subsection -->
    <div class="subsection // flex flex-col items-center // max-w--doc">

        <!-- .core -->
        <div class="core // flex flex-col items-center // text-center">

            <!-- .eyebrow -->
            <p class="eyebrow // type-eyebrow-sm opacity-sm">Lorem Ipsum</p>

            <!-- .headline -->
            <p class="headline // max-w-head // type-8xl">A sensible, responsive starting point for Beaver Builders.</p>

            <!-- .subhead -->
            <p class="subhead // max-w-subhead // opacity-md type-lg">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat blanditiis culpa necessitatibus facilis obcaecati dolorum.</p>

            <!-- .cta -->
            <div class="cta // mt-sm // bg-a-600 hover:bg-a-700 text-p-50 rounded-button shadow">
                <a class="inline-block px-5 py-3 // type-button" href="#">Get Started</a>
            </div>
			
        </div>
    </div>
</div>
<soulmagic id="team-grid" users=".card">
    <set targets=".longerbio">
        <auto-alpha>0</auto-alpha>
        <backface-visibility>hidden</backface-visibility>
    </set>
    <event type="click" trigger="button" away="false" closer=".overlay, .closer"></event>
    <timeline>
        <to targets=".longerbio">
            <auto-alpha>1</auto-alpha>
        </to>
        <to targets="body" position="0" scope="html">
            <overflow>hidden</overflow>
        </to>
    </timeline>
    <timeline>
        <to targets=".longerbio">
            <auto-alpha>0</auto-alpha>
        </to>
        <to targets="body" position="0" scope="html">
            <overflow>auto</overflow>
        </to>
    </timeline>
</soulmagic>

<!-- SOULSECTIONS -->
<!-- .bb2xlc -->
<div class="bb2xlc // p--xl">

    <!-- .subsection -->
    <div class="subsection // flex flex-col items-center // max-w--doc">

        <!-- .grid -->
        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-x-md gap-y-lg">

            <!-- .card -->
            <div class="card relative // rounded-ctr shadow-md overflow-hidden">

                <img src="https://source.unsplash.com/collection/39199601/1600x900" alt="Enter alt text here" />

                <!-- .core -->
                <div class="core // p-sm lc-mb-0i">
                    <p class="mb-4i // type-xl font-600i">Jane Doe</p>
                    <p class="type-xs opacity-md">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi dolore tenetur optio.</p>
                    <button class="mt-sm text-a-600 type-xs">Full Bio</button>

                </div>
                <!-- .longerbio -->
                <div class="hidden-ib longerbio // fixed z-10 inset-0 // flex flex-col items-center justify-center // w-full h-screen">

                    <!-- .overlay -->
                    <div class="overlay absolute inset-0 // h-full w-full // bg-p-900 bg-opacity-95"></div>
                    <!-- .core -->
                    <div class="core relative // max-w-3xl p-md // shadow-lg bg-p-50 overflow-y-scroll" style="max-height: 75vh;"><button class="closer absolute right-8 top-4 // flex items-center // text-p-900 text-4xl opacity-50">×</button>
                        <img class="w-16 md:w-48 rounded-full mb-md" src="https://source.unsplash.com/collection/39199601/1000x1000" alt="Enter alt text here" />
                        <p class="type-5xl">Jane Doe is the CEO of this company.</p>
                        <p class="type-base">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem odio expedita, commodi qui esse adipisci iusto dolorem magni, eos maxime itaque recusandae fuga quos porro. Quibusdam corporis odio quia ipsa.</p>
                        <p class="type-base">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem odio expedita, commodi qui esse adipisci iusto dolorem magni, eos maxime itaque recusandae fuga quos porro. Quibusdam corporis odio quia ipsa.</p>
                        <p class="type-base">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem odio expedita, commodi qui esse adipisci iusto dolorem magni, eos maxime itaque recusandae fuga quos porro. Quibusdam corporis odio quia ipsa.</p>
                        <button class="px-5 py-3 // bg-a-600 text-p-50 rounded-button">Email</button>

                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<!-- .tba -->
<div class="tba // p--xl pb-0i">
    <!-- yo -->
    <div class="flex flex-col items-center lg:flex-row  lg:justify-between // max-w-screen-lg mx-auto">

        <!-- .core -->
        <div class="core // flex flex-col items-center lg:items-start // mb-lg lg:mb-0 lg:w-45% // text-center lg:text-left">
            <p class="type-eyebrow opacity-eyebrow">Lorem Ipsum</p>
            <p class="type-6xl max-w-head">The first thing that you really want to point out to the visitor.</p>
            <p class="type-base max-w-subhead opacity-lg">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat blanditiis culpa necessitatibus facilis obcaecati dolorum.</p>
            <div class="mt-xs bg-a-600 hover:bg-a-700 text-p-50 rounded-button shadow"> <a class="inline-block px-5 py-3 // type-button" href="#">Get Started</a> </div>
        </div>

        <!-- .art -->
        <div class="art md:w-65% lg:w-45% // rounded-ctr overflow-hidden bg-a-300">
            <img class="opacity-75" src="https://source.unsplash.com/collection/39199601/1000" alt="Enter alt text here" style="filter:grayscale(1)">
        </div>

    </div>
</div>

<!-- .tba -->
<div class="tba // p--xl">
    <!-- yo -->
    <div class="flex flex-col items-center lg:flex-row-reverse lg:justify-between // max-w-screen-lg mx-auto">

        <!-- .core -->
        <div class="core // flex flex-col items-center lg:items-start // mb-lg lg:mb-0 lg:w-45% // text-center lg:text-left">
            <p class="type-eyebrow opacity-eyebrow">Lorem Ipsum</p>
            <p class="type-6xl max-w-head">The second thing that you really want to point out to the visitor.</p>
            <p class="type-base max-w-subhead opacity-lg">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat blanditiis culpa necessitatibus facilis obcaecati dolorum.</p>
            <div class="mt-xs bg-a-600 hover:bg-a-700 text-p-50 rounded-button shadow"> <a class="inline-block px-5 py-3 // type-button" href="#">Get Started</a> </div>
        </div>

        <!-- .art -->
        <div class="art md:w-65% lg:w-45% // rounded-ctr overflow-hidden bg-a-300">
            <img class="opacity-75" src="https://source.unsplash.com/collection/39199601/1000" alt="Enter alt text here" style="filter:grayscale(1)">
        </div>

    </div>
</div>
<!-- .tbb -->
<div class="tbb // p--xl // bg-a-100 bg-opacity-25">
    <div class="flex flex-col items-center // max-w--doc">
        <!-- .core -->
        <div class="core // flex flex-col items-center // lc-mb-0i mb-lg // text-center">
            <p class="type-eyebrow opacity-eyebrow">Lorem Ipsum</p>
            <p class="type-6xl max-w-head">Professional-looking components, designed to beef up your folio.</p>

        </div>

        <!-- GRID -->
        <div class="grid lg:grid-cols-3 gap-lg lg:gap-md">

            <!-- GRID ITEM -->
            <div class="flex flex-col items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mb-sm text-a-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
                </svg>
                <div class="core flex flex-col items-center // max-w-subhead lc-mb-0i // text-center">
                    <h3 class="type-2xl font-600i mb-4i">A capable library.</h3>
                    <p class="type-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, saepe?</p>
                </div>

            </div>

            <!-- GRID ITEM -->
            <div class="flex flex-col items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mb-sm text-a-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
                </svg>
                <div class="core flex flex-col items-center // max-w-subhead lc-mb-0i // text-center">
                    <h3 class="type-2xl font-600i mb-4i">A capable library.</h3>
                    <p class="type-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, saepe?</p>
                </div>

            </div>

            <!-- GRID ITEM -->
            <div class="flex flex-col items-center">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mb-sm text-a-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" />
                </svg>
                <div class="core flex flex-col items-center // max-w-subhead lc-mb-0i // text-center">
                    <h3 class="type-2xl font-600i mb-4i">A capable library.</h3>
                    <p class="type-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, saepe?</p>
                </div>

            </div>

        </div>

    </div>
</div>
Preview HTML