Basic Text Splitting

SoulMagic makes it easy to break text apart into lines, words, and characters, each of which can be animated like any other SoulMagic targets.

Open in new tab

Share on:

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

Ready to use this component in your Beaver Builder sites?

Copy the snippet from the Code tab (above) into a SoulSections module with SoulMagic also installed. That’s it.

Need the Soul Plugins? Get the bundle.