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

Build better Beaver Builder sites while you get down with code.

Break free from settings-form limitations and learn to leverage done-for-you HTML snippets to rapidly build (and animate) almost anything you can think of—all inside the Builder.

top 75% top 25% true #090a0f #F9DFC9 opacity 25% top center top .2 true 0 none .001
SoulMagic
lines overflow-hidden words 100 0 0 0 top 75% play none none reverse 1 .75 none 0 1 .001 .8 power3.out .05 .8 .75 none 1 .75 none
SurfaceBanner
0 .66 hidden 0 75 .33 hidden top center auto 1.75 .001 power4.out .2 auto 3 3 .001 power4.out .15
Rotato

SoulMagic for WordPress

Animate content like a pro, with a few lines of HTML.

SoulMagic is an animation plugin that helps you sequence beautifully smooth animations with easily-readable HTML. No settings forms, no JavaScript required.

.fades-parent

.fades-target
.fades-target
.fades-target
.fades-target
.fades-target

Refresh this animation, view more examples, or buy SoulMagic.

<!-- create component, define users -->
<soulmagic id="fades" users=".fades-row">

    <!-- set initial target values -->
    <set targets=".fades-target">
        <y>60</y>
        <opacity>0</opacity>
    </set>

    <!-- define the event -->
    <event type="scroll"></event>

    <!-- animate targets -->
    <timeline>
        <to targets=".fades-target">
            <y>0</y>
            <opacity>1</opacity>
            <stagger>.1</stagger>
        </to>
    </timeline>

</soulmagic>

Groove is in the HTML

Bring layouts to life, without limits.

SoulMagic gives you powerful, expressive animation controls wherever you can paste a snippet of HTML. There’s nothing quite like it.

It’s nice and light.

SoulMagic clocks in at just under 130kb (cacheable), less than the size of a typical background image, so it won’t bog down your site.

It’s mobile-friendly.

SoulMagic animations work great on all devices, regardless of processing power. Missing mobile parallax? Want a different animation on different screen sizes? Gotcha covered.

It’s easy to use.

Build your own scroll effects, popups, tooltips, hover sequences, with a dead-simple element syntax that you can pick up in a few minutes.

Works great with SoulSections.

Let SoulSections serve up responsive structures and styles for SoulMagic to animate, and you’ve got all you need to build everything you see here.

SoulSections for Beaver Builder

The souped-up HTML editor for BB developers.

The ideal companion for SoulMagic, SoulSections is a modern HTML editor for Beaver Builder. Go beyond the constraints of traditional modules while you improve the consistency and responsiveness of your designs.

A fewer-module approach.

Free yourself from having to learn the ins and outs of dozens of limited-scope modules, and start with one capable tool that can build pretty much anything you need.

Design with a system.

SoulSections loads TailwindCSS by default, giving you an incredible amount of customization power without having to write any CSS nor futz with settings forms. Better yet, it keeps you honest, by removing the urge to throw arbitrary styles at your designs.

Break free from settings.

Soul Plugins bring the precision, expressiveness, and the copy-n-paste-ability of HTML to the world of WordPress page-builders.

It’s like a pro editor.

With useful tools like Emmet, code beautifying, folding, attribute toggling, tag matching, and inspection, SoulSections makes it easier than ever to manage HTML. In fact, it‘s really hard to go back to using other code editors after using it.