SoulMagic

Dynamic web components and slick animations, all in super-editable HTML.

SoulMagic abstracts cutting-edge JS frameworks into HTML that’s way easier to understand and tweak, so you can do amazing things without having to know a lick of JavaScript.

Watch Screencasts Explore Templates
  • Introduction
  • Getting Started
  • Installation

SoulMagic is a plugin that helps WordPress designers and developers compose professional animations using simple, easy-to-understand HTML.

Creating really awesome-looking web animations is difficult, so most WordPressers resort to using basic, on-or-off CSS animations via a page-builder or plugin in an attempt to spice up their layouts.

These amateur-facing settings don’t give you the parameters that you need to perform precise functions like staggering, easing, start/end controls, scrubbing, templating, etc. The no-code interfaces are limited by design, and, in a lot of cases the designer is better off excluding them as they can make layouts look tacky pretty quickly. 

The precise, powerful web animation tools (like Greensock) are rooted in JavaScript, a language which most page-builder-users don’t use (and one that can crash your page-builder if you make a mistake).

HTML is the middleground. It’s expressive enough to deliver animation data to more complex JavaScript functions, but 'friendly' and 'chunked' enough to be approachable by anyone who can edit a paragraph tag.

HTML is portable, too, so an animation written on one site can be copy/pasted to another without any special configuration. And because every WordPress page-builder has an HTML module/block/widget, SoulMagic will work across the WordPress ecosystem.

SoulMagic animations are expressed as invisible HTML elements called components that you place in your WordPress layouts.

<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.
A simple fade-in-on-scroll component.

The result of this ‘recipe’ is a smooth, graceful entry animation for text:

0 100 1 0 .75 .1 .001

Lorem Ipsum

Lorem ipsum dolor sit amet consectetur adipisicing.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, eveniet quas? Dignissimos illo sed magni tenetur esse, tempora dolores architecto ab maxime eum!

Easily toggle scrubbing and bind your animation to the scrollbar with three lines of HTML:

0 70 true top 50% bottom 50% 1 0 1 .125 .001

Lorem Ipsum

Lorem ipsum dolor sit amet consectetur adipisicing.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam, eveniet quas? Dignissimos illo sed magni tenetur esse, tempora dolores architecto ab maxime eum!

To get started with SoulMagic after installing and activating the plugin, you’ll need

  • a page or post layout with some content to animate, and
  • a place to put HTML in that layout

 

<soulmagic>

The <soulmagic> element is the housing for any SoulMagic animation. It has two main attributes: id and users.

id

The id attribute is the 'name' for the component, for your own reference. The id attribute doesn’t impact the component, but it does need to be unique and benefits from being descriptive, e.g. 'fadeUpOnScroll'

users

<set>

<split>

<event>

<timeline>

<to>

The to element defines a single animation step within a timeline: you’re animating one or more targets to a new state. In the following component, we’re animating paragraphs to a style of opacity = 1 and y = 0.

The ‘to’ element.

position

The ‘to’ element.

The position attribute helps you time an animation step exactly when you want it to occur. It accepts values relative to the previous animation step, or to the entire timeline.

 

 

 

Style Tags

 

 

 

 

 

 

Attribute Description
id A 'name' for the component, for your own reference. The id attribute doesn’t impact the component, but it does need to be unique and benefits from being descriptive, e.g. 'fadeUpOnScroll'
users A selector (class, id, etc) to which this component will be 'bound.' For scroll animations, the user element is the 'trigger;' scrolling to it will fire the animation accordion to the values provided to <start>.