Copy of SoulMagic

Compose animations and behaviors with HTML.

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.

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

The Position Attribute

When you need to execute an animation step at exactly the right moment in a timeline, use the position parameter.

Elements and Options

<soulmagic>

The <soulmagic> element is the housing for any SoulMagic animation.

 

 

 

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

 

The SOulMagic Element asdf

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt corporis, alias suscipit nam asperiores deserunt odio labore? Iste quidem non, molestias nihil unde mollitia impedit distinctio. Amet illo incidunt veritatis!

Elements and Options

<soulmagic>

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

The id attribute

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'

The users attribute

 

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

A simple fade-on-scroll component.