SoulMagic makes it easy to break text apart into lines, words, and characters, each of which can be animated like any other SoulMagic targets.
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.