Your First Animation

Once you’ve installed SoulMagic and entered your license key, you’re ready to start animating.

In this example, we’re going to fade a few elements in and up when the page scrolls to an element.

To prepare this, you’ll need to do three things:

• designate the ‘user’ element that contains your animation targets (e.g. a row, column, or ‘parent’ div),
• designate the actual targets of your animation (e.g. modules or any other ‘child’ elements), and
• create an HTML instance (like an HTML module/widget/block) in a WordPress layout. SoulMagic animation components are defined in HTML, and as long as the HTML is on the same page as the target element(s) when the page loads, everything should work.

Designating Users & Targets

The easiest way to designate users and targets for animation is to give the targets a class (e.g. fademe), then give their shared parent a class (e.g. fadeparent). Most page-builders give you the option to add a custom class to anything in your layout.

Try giving multiple targets the class of fademe, then move on to the next step.

Pasting HTML

If you’re using a page-builder, bring an empty HTML module, widget, or block into your layout. This will be the SoulMagic Controller: the place where you can create, edit, and organize your animations.

Here’s an example animation component called ‘fades.’ Copy the following block of code and paste it into the HTML instance you created.

<soulmagic id="fades" users=".fadeparent">

    <set targets=".fademe" vars='{"opacity":"0","y":"50"}'></set>

    <trigger event="scroll" vars='{"start":"top center"}'></trigger>

    <timeline>
        <to targets=".fademe" vars='{"opacity":"1","y":"0","duration":".5","stagger":"0","ease":"power2.in"}'></to>
    </timeline>

</soulmagic>

Once you’ve designated your targets and pasted the animation component, save and preview your layout. You should see your animation targets fade in when the top of the ‘user’ element hits the center of the viewport, on scroll.

Congrats! You’re successfully animating with SoulMagic, and you’ve successfully repurposed animation code.

Next, let’s get to know the syntax of an animation component so we can tweak the animation to our liking.