📝Animate.css

Read before using: We support the most popular animate.css animations, and you can also use any other third-party animation library. However, we have integrated animate.css in a very different way. If you are using our script on the Browser side <script>, you can directly use the animate.css CDN link. But if you are using require() or import, then we have separated all the animations into different classes (by default pulled from the animate folder under node modules of breww). This way, you can make your project much more lightweight by importing only the animations you need.

How to use:

To use animate.css, you need to add the class animate__animated and the attribute anim-type="THEANIMATIONNAME" to your element.

<div id="section4" anim-type="animate__headShake" class="animate__animated container >
//you section code
</div>

<script>
  var animate = new AnimateCss();
    let sec;
    const options = {
        sectionSelector: '.animate__animated',  // Query selector to your sections
        targetSelector: '[data-jump]', // Query selector to your elements that will be added `active` class
        topOffset: [
            { maxWidth: 767, topOffset: 300 },
            { minWidth: 768, maxWidth: 991, topOffset: 250 },
            { minWidth: 992, maxWidth: 4999, topOffset: 400 },
        ],
        easing: {
            enabled: true,
            type: BrewwEasings.linear
        },
        activeClass: ['activer', 'highlight'],
        onLastScrollInView: () => console.log("last"),
        onFirstScrollInView: () => console.log("hi"),
        animation: { enabled: true, animType: 'anim-type' },
        onScroll: (section, sections, animationOptions) => {
            sec = sections;
            animate.animateTwoWay(section, sections, animationOptions);   
            //animate.animateOneWay(section, sections, animationOptions);        
        },       
    }
    const scroller = new SpyScroll(document.getElementById('nav'), options);

</script>

Currently, we need to use animation methods inside onScroll or other available hooks, and the most recommended one is onScroll. This also applies to third-party libraries that execute brew animation.

---

Name	Type	Description
animateTwoWay	method	(It requires three parameters: section, sections and animationOptions.)
animateOneWay	method	(It requires three parameters: section, sections and animationOptions.)

Learn More about:

👊pageTwoWay Vs OneWay

---

Require or Import

To use require or import, you need to do something like this. These two are mandatory to import as they are the default CSS initializers.

//two mandatory imports to use Animate.css with breww
import "@breww/scroll-spyer/dist/styles/Animate-Css/_base.css";
import "@breww/scroll-spyer/dist/styles/Animate-Css/_vars.css";

To use a specific animation from animate.css, you can import it like this. For example, if you want to use the headShake and rubberBand animations, you can do this:

import "@breww/scroll-spyer/dist/styles/Animate-Css/attention_seekers/rubberBand.css";
import "@breww/scroll-spyer/dist/styles/Animate-Css/attention_seekers/headShake.css";

You can find more animations from animate.css here https://animate.style/ .

<script> Browser side

For browser script, you need to add this link tag to import the animate.css CDN:

But do not use this approach for import or require() if you want your application to be lightweight.

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>

Animate.css | A cross-browser library of CSS animations.