This extension allows you to add animation effect in the object/element once it is visible to the viewport.
The Element Peek is required for this extension.
Additional Setup
– The “style.animate” is the same file used for Scroll Animation.
wp_enqueue_style('aios-animate', 'https://cdn.thedesignpeople.net/agentimage-libraries/style.animate.min.css');
Inline Options
| Option | Default value | Description/Callback signature |
|---|---|---|
| data-aios-reveal | false | This options controls wether to activate or inactivate the binded animation attribute |
| data-aios-animation | fadeIn | You can find the list of animation on this link https://daneden.github.io/animate.css/ |
| data-aios-animation-delay | 0s | This will delay the animation before it runs |
| data-aios-animation-reset | false | This will reset the animation when the object/element is not visible in viewport. |
| data-aios-animation-offset | 0.3 | Percentage of the height of the viewport that the target element must occupy before being considered visible. A higher value means longer delay before ‘onViewportIn’ is triggered. |
Sample Usage
Single Element
<div data-aios-reveal="true" data-aios-animation="fadeIn" data-aios-animation-delay="0s" data-aios-animation-reset="false" data-aios-animation-offset="0.5">
<!-- Content -->
</div>
Group Element
<div data-aios-staggered-parent="true" data-aios-animation-offset="0.5" data-aios-animation-reset="true">
<div data-aios-staggered-child="true" data-aios-animation="fadeIn" data-aios-animation-delay="0s">
test 1
</div>
<div data-aios-staggered-child="true" data-aios-animation="fadeInLeft" data-aios-animation-delay="1s">
test 2
</div>
<div data-aios-staggered-child="true" data-aios-animation="fadeInRight" data-aios-animation-delay="2s">
test 3
</div>
<div data-aios-staggered-child="true" data-aios-animation="fadeIn" data-aios-animation-delay="3s">
test 4
</div>
<div data-aios-staggered-child="true" data-aios-animation="fadeIn" data-aios-animation-delay="4s">
test 5
</div>
</div>