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:
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.
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>
Pro tip: if your animation targets are above the fold, giving them the additional class of sm-curtain
will keep the targets hidden until they’re animated in, which prevents an unsightly flash of unset content (FOUC).
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.
See something misspelled, missing, or otherwise buggy? Let Dave know.