SoulMagic

SoulMagic is an animation builder for WordPress. It's designed to help you schedule precise animation timelines, build custom effect combinations, and fire your timelines in response to several different front-end events: all without writing a line of code.

 

Why SoulMagic?

Web animations help websites come to life, but getting professional results requires an advanced knowledge of CSS and JavaScript.

If you're not an expert coder and you'd like to add fully customized animations to your WordPress site, SoulMagic can help.

Installation

After purchasing a SoulMagic license, you'll receive an email with a link to download a zip file. Install that zip file in your WordPress Dashboard under Plugins → Add New.
After you have installed SoulMagic, you'll see a new option in your Dashboard called SoulMagic, with a sub-item called License.

ENTERING YOUR LICENSE

Visit that License page, and enter the license key you received when you bought SoulMagic. Hit Save Changes to save your license. You'll now receive automatic updates as the plugin is improved over time.

Note: Always have a backup and restore solution ready before you install or update any plugins or themes. Not having one in place is asking for a seriously painful loss of work. I've been there, and it sucks. WP Engine has daily automatic backups and one-click restore points, so I recommend that as the easiest option (their hosting is solid as well).   

A short video explaining the basics of SoulMagic.

Getting Started

The best way to get started with SoulSections is to explore the 'Four Fades' animation timeline that comes bundled with SoulMagic. I've recorded a brief video showing how to marry that animation to a SoulSections module - though you don't need SoulSections for SoulMagic to work.

 

Timeline properties: Triggers and Targets

Animations in SoulMagic are called Timelines. Timelines can have multiple steps, and each step can have separate properties, durations, and starting points (relative to the last step or to the entire timeline). Timelines can also be triggered in response to different kinds of events: Page Scroll, Slide Changes, and Hovering.

To view your first Timeline, select the Four Fades timeline from the SoulMagic > Timelines. Four Fades is a Scroll-based timeline, meaning that it will animate several elements in a sequence as the user scrolls the page.

The SoulMagic Timeline form has two main editing areas: the Trigger, and below that, Steps. The Trigger fields specify when your animation timeline will start:

Steps define the targets and animations that will be performed:

The default Timeline behavior is to fire an animation timeline as soon as the Trigger element enters the viewport (on page scroll). Timelines follow the animation Steps in sequential order, and you can add (and re-order) animation steps as you wish. If you're viewing the Four Fades Timeline, you may notice that there are four steps defined, each with a unique Title.

An animation step in the Four Fades timeline.

In the Four Fades animation, the Trigger Element and the Step targets are blank by default, so you can choose your Trigger and Step targets - either via SoulSections (where the Trigger/Target connections can be made from the SoulSections content tab) or with class/ID selectors, if you're a bit more HTML-savvy and want to animate a specific element in your layout.

Once you've defined a Trigger Element and your Step targets, your Timeline will start when your Trigger Element enters the viewport.

Options

Trigger Options

Trigger

Required. Enter a selector (class, ID, or HTML tag) that, when scrolled to, will start this animation timeline. SoulSections users can leave this field blank. For help finding selectors, contact GSR support.

Reverse (Scroll)

Optional, default is unchecked. Animation Timelines start as you scroll down past the Trigger. Checking Reverse will reset animation targets to their initial styles when the page is scrolled upwards past the Trigger, so that the animation will start again when the Trigger enters the viewport on subsequent scrolls down the page.

Offset Distance (Scroll)

Optional, default is 100%. SoulMagic defaults to starting an animation immediately when the Trigger element enters the viewport on scroll or page load. By definition, a 'visible' Trigger needs to be located 100% of the viewport's height (or less) from the top of the viewport.

In most cases, your Trigger element will be closer to the top of the viewport than your Target(s). If your Offset Distance is set to the default 100%, this may have the effect of starting a timeline while Targets are outside of the viewport, compromising the animation.

Therefore, you may choose to adjust this '100%' value, called the Offset Distance, to a lower number, so that the Timeline will start when the Trigger is further up the page.

Delay

Optional, default is blank. Once the Timeline starts, you can delay the first animation step by entering a value in the Delay field, in seconds.

JavaScript On Start

Optional, default is blank. If you're comfortable writing JavaScript/jQuery and you'd like to execute a command when this Timeline begins, you may enter JavaScript code in this textarea.

Step Options

Title

Optional, default is blank. Name this animation step for your own reference. SoulSections users will use this Title to easily assign an animation to an element from within the SoulSections settings form.

Target

Required. Enter a selector (class or ID) that will be the Target of this Step's animation. SoulSections users can leave this field blank. For help finding selectors, contact GSR support.

Use Recipe?

Optional, default is unchecked. If you have multiple steps with the same animation properties, durations, and positions, you can use the Recipe meta box to control your animation definitions from one place. Enter your properties, duration and position values in teh Recipe meta box, and check this box in every step that will 'use' the Recipe. This method can help you construct and edit animations more quickly, so you don't have to edit properties in several different steps as you find the right mix.

Properties

Required. Select one or more properties that will define the animation's start and end states. To select multiple properties, use Command + Click on Mac or Control + Click on PC.

Duration

Required. Default is 1. The length that this step's animation will last, in seconds.

Easing

Required. Default is Linear. Select an easing (acceleration/deceleration) curve for this animation Step. For examples, use this visualizer.

Position

Required. Default is 0. When will this Step start, relative to the previous Step (or to the entire Timeline)? Enter a value in seconds. For help with this setting, contact GSR support.

Purchase Options

Let's build your site.

Purchase GSR plugins individually or for a reduced bundle price. All licenses include one year of support and automatic updates & enhancements. Licenses may be renewed annually at a 40% discount.

SoulMagic

The next-level WordPress animation timeline plugin.

Single Site License

2-5 Site License

Unlimited Site License


SoulSections

The responsive, capable layout tool for Beaver Builder.

Single Site License

2-5 Site License

Unlimited Site License


SoulType

The responsive typography plugin for WordPress.

Single Site License

2-5 Site License

Unlimited Site License


The Soul Bundle

SoulSections, SoulMagic, and SoulType.

Single Site License

2-5 Site License

Unlimited Site License