Introduction : 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.
Getting Started
After you have installed SoulMagic, you'll see a new menu item in your Dashboard titled SoulMagic.
Entering your license
Visit the License page within that menu item, 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.
Your first timeline
Animations in SoulMagic are called Timelines, because they can have multiple steps, and each step can have separate properties, durations, and starting points.
To create a new Timeline, select Add New from the SoulMagic menu.
The Timeline form has two main editing areas: the Trigger, and below that, Steps. The Trigger fields specify when your animation timeline will start. The Steps define the actual animations that will be performed.
Start by giving your timeline a title and entering a selector (a CSS class, ID, or HTML tag) in the Trigger field. This Timeline will start when the Trigger enters the viewport. You can leave the other Trigger Fields blank - they're optional.
Continue by defining your first Step. Enter an element selector (a CSS class, ID, or HTML tag) in the Target field. This element will animate once the Timeline starts.
Then select one or more animations from the Properties list.
That's it - hit Publish to save your Timeline. Refresh the page that contains your trigger/target elements and you should see the target animate as the trigger enters the viewport.
If you're having trouble getting SoulMagic to work, you can open a support ticket here and we'll help you out. Or request an invite to the GSR Slack group: a place for GSR community members to talk shop.
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
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
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 Trigger enters the viewport and 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 Parent?
Optional, default is unchecked. Animate the parent of the Target element instead of the actual Target element defined in the Target field. If you're having trouble finding Target classes, this may help.
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.
