<div class="aos-wrapper" data-aos="zoom-out" data-aos-offset="" data-aos-delay="" data-aos-duration="" data-aos-easing="" data-aos-mirror="" data-aos-once="" data-aos-anchor-placement="">
<p class="paragraph ">Paragraph text lorem ipsum dolor sit, amet consectetur adipisicing elit labore</p>
</div>
<div class="aos-wrapper" {{#if animation}} data-aos="{{ animation }}" {{else}} data-aos="zoom-out"{{/if}} data-aos-offset="{{ offset }}" data-aos-delay="{{ delay }}" data-aos-duration="{{ duration }}" data-aos-easing="{{ easing }}" data-aos-mirror="{{ mirror }}" data-aos-once="{{ once }}" data-aos-anchor-placement="{{ placement }}">
{{#block "aos-wrapper-content"}}
{{ render '@paragraph'}}
{{/block}}
</div>
/* No context defined for this component. */
import AOS from 'aos';
AOS.init({});
You can put anything inside of this wrapper that you wish to animate. As you render animate-on-scroll-wrapper, you can pass it specific data-aos attributes, such as animation, delay and duration. The default animation for the wrapper is “zoom-out”. A good example of its application can be found under the page: aos-page. Please refer to aos.js documentation for further explanation of the different data-aos attributes !!IMPORTANT Please note that animations such as flip-up are not supported by IE. Some code will have to detect IE and alter the passed animation attribute if neccesary