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
Animating with SoulMagic is as simple as adding a couple of classes and pasting an HTML snippet.
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.
Examples
A sample of the kinds of animations you can create with SoulMagic.
Entry Fades
.fades-parent
Animating with SoulMagic is as simple as adding a couple of classes and pasting an HTML snippet.
Refresh
Parallax effects
.grid-px-row
Animating with SoulMagic is as simple as adding a couple of classes and pasting an HTML snippet.
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.
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 →
Animating with SoulMagic is as simple as adding a couple of classes and pasting an HTML snippet.