SoulMagic

SoulMagic is a plugin that helps WordPress designers and developers compose professional animations using simple, easy-to-understand HTML. It was designed as an alternative to the limitations of plugin settings forms and the complexity of custom JavaScript.

How does SoulMagic work?

SoulMagic animations are expressed as HTML elements called components that you place in your WordPress layouts. A <soulmagic> component is like a recipe — it describes the entire life cycle of an animation, like:

setting starting styles for animation targets,
defining an event that triggers an animation, and
executing the animation’s steps along a timeline.

Here’s an example of a SoulMagic component that you can paste into any WordPress layout to fade targets ‘in and up’ when the page is scrolled:

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

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

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

    <!-- execute the animation timeline -->
    <timeline>
        <to targets=".fades-target">
            <y>0</y>
            <opacity>1</opacity>
            <stagger>.1</stagger>
        </to>
    </timeline>
  
</soulmagic>

As long as you can add a CSS class to your animation targets (in this case, .fades-target), you’ll see a smooth, staggered entry animation, like this.

.fades-parent

.fades-target

Refresh this animation

Why HTML?

Using HTML to animate content might feel a little strange at first, especially if you’re used to the mostly code-free environment of a WordPress page-builder. But once you’ve composed a few animations with SoulMagic, you’ll start to notice a few important benefits:

You can animate anything in your layout. As long as an element can be selected, it can be animated. This includes elements as large as the body element and as small as a single character.
You can animate however you want. Most plugins and themes use libraries like Animate CSS to make a limited group of common CSS animations available, but most of those options feel wacky and unprofessional. SoulMagic gives you the power to combine an infinite number of CSS properties into a single animation, so if you want to rotate something, unblur it, and change its color as you scroll, no problem.
You can instantly preview changes. Even if you’re confident with JavaScript, using HTML to control animations within a page-builder allows you to get immediate feedback when you make changes to an animation. SoulMagic’s handy refresh button keeps you from having to save and refresh your layout after every minor adjustment (I’m often tweaking things down to the tenth of a second, so its crucial to be able to change/preview/change/preview until it’s just right).
HTML is forgiving. JavaScript, not so much. If you miss a bracket with HTML, no big deal - your animation may not play exactly how you expected, but your builder doesn’t break. JS errors can be pretty cryptic, too - SoulMagic has some helpful debuggers built right in, so you can correct course without losing your afternoon.
HTML is portable. With SoulMagic, you can easily move your components from site to site, or lift them from a Slack channel, or a Facebook group, forum post, text, email, or tweet — anywhere text can be copied from. That’s powerful. It means that more experienced developers and animators can craft components for you to use, immediately. You don’t need to be an expert to leverage expert work.

How it Works
Why HTML?
Examples

5 red 45

transform

top 90% 75% center true 0 green 0 none .7

black

white 5

initial

initial 1 0 inline-block

initial

0 0 top bottom .5rem red power1.out 1 -1 true

SoulMagic

Examples

A sample of the kinds of animations you can create with SoulMagic.

Entry Fades

.fades-parent

.fades-target

Refresh

→

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

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

Parallax effects

.grid-px-row

→

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

    <!-- define the event -->
    <event type="scroll">
        <start>top 90%</start>
        <end>bottom 60%</end>
        <scrub>true</scrub>
    </event>

    <!-- animate targets FROM a rotated state -->
    <timeline>
        <from targets=".grid-item">
            <rotation-x>360</rotation-x>
            <rotation-y>180</rotation-y>
            <ease>none</ease>
            <stagger>.05</stagger>
        </from>
    </timeline>

</soulmagic>

Click and hover effects

.ctr-row

Use SoulMagic to create click-powered dropdowns, accordions, popups, and tooltips, wherever you need to ‘reveal’ stuff in your designs.Hovers work too. In case your tooltip needs a tooltip.

→

<!-- create component, define users -->
<soulmagic id="click-to-reveal" users=".ctr-row">

    <!-- set initial target values -->
    <set targets=".ctr-target">
        <opacity>0</opacity>
        <scale>.8</scale>
        <rotation-x>90</rotation-x>
    </set>

    <!-- define the event -->
    <event type="click" trigger="button" away=".ctr-target"></event>

    <!-- animate targets in -->
    <timeline>
        <to targets=".ctr-target">
            <opacity>1</opacity>
            <scale>1</scale>
            <rotation-x>0</rotation-x>
            <duration>.5</duration>
        </to>
    </timeline>

    <!-- animate targets out -->
    <timeline>
        <to targets=".ctr-target">
            <opacity>0</opacity>
            <scale>.8</scale>
            <rotation-x>90</rotation-x>
            <duration>1</duration>
            <ease>power4.out</ease>
        </to>
    </timeline>

</soulmagic>

<!-- create component, define users -->
<soulmagic id="hover-to-reveal" users=".htr-row">

    <!-- set initial target values -->
    <set targets=".htr-target">
        <auto-alpha>0</auto-alpha>
    </set>

    <!-- define the event -->
    <event type="hover" trigger="this" away=".htr-target"></event>

    <!-- animate targets in -->
    <timeline>
        <to targets=".htr-target">
            <auto-alpha>1</auto-alpha>
        </to>
        <to targets="#swinger" scope="html" position="0">
            <rotation-y>180</rotation-y>
        </to>
    </timeline>

    <!-- animate targets out -->
    <timeline>
        <to targets=".htr-target">
            <auto-alpha>0</auto-alpha>
        </to>
        <to targets="#swinger" scope="html" position="0">
            <rotation-y>0</rotation-y>
        </to>
    </timeline>

</soulmagic>

Entry Fades

.fades-row

Post Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio repellat aspernatur iusto quasi? Sint, suscipit expedita quae quibusdam est magni. Ipsum eos quos sunt numquam molestiae recusandae iusto veniam id.

Full article →

→

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