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

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.

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

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