Novicell Frontend

animate-on-scroll-wrapper 

<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. */
  • Content: 
    'use strict';
var novicell = novicell || {};
var AOS = AOS || {};

novicell.animateOnScroll =
    novicell.animateOnScroll ||
    new function () {
        this.init = () => {
            AOS.init({});
        };
    }();
  • URL: /components/raw/animate-on-scroll-wrapper/animate-on-scroll-wrapper.js
  • Filesystem Path: patterns/02-molecules/animate-on-scroll-wrapper/animate-on-scroll-wrapper.js
  • Size: 222 Bytes

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