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

Pancakes

Stack your pancakes here! ↓

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

words lines chars 0 60 0 20 .5 0 36 0 20 top center 1 0 .001 .05 back 1 0 .001 1 .1 1 1 0 power2 1 0 .001 .025

Lorem, ipsum dolor sit amet consectetur adipisicing.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat blanditiis culpa necessitatibus facilis obcaecati dolorum.

<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>

Lorem Ipsum

A sensible, responsive starting point for Beaver Builders.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat blanditiis culpa necessitatibus facilis obcaecati dolorum.

<!-- .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>

Lorem Ipsum

A sensible, responsive starting point for Beaver Builders.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat blanditiis culpa necessitatibus facilis obcaecati dolorum.

<!-- .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>
0 hidden 1 hidden 0 auto
Enter alt text here

Jane Doe

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi dolore tenetur optio.

Enter alt text here

Jane Doe is the CEO of this company.

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.

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.

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.

<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>

Lorem Ipsum

The first thing that you really want to point out to the visitor.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat blanditiis culpa necessitatibus facilis obcaecati dolorum.

Enter alt text here

Lorem Ipsum

The second thing that you really want to point out to the visitor.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat blanditiis culpa necessitatibus facilis obcaecati dolorum.

Enter alt text here
<!-- .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>

Lorem Ipsum

Professional-looking components, designed to beef up your folio.

A capable library.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, saepe?

A capable library.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, saepe?

A capable library.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, saepe?

<!-- .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