Advanced usage: SCSS

You can use SCSS mixins instead of putting classes in your HTML, except for animate-into-view as that's what triggers the IntersectionObserver. (Use in combination with the JS option below to use entirely your own selectors instead). This can keep your HTML a bit cleaner, as well as give you more options such as applying different animations at different breakpoints using media queries.

Example:

<section class="module module__copy animate-into-view">
    <div class="container container--narrow">
        <h2>They don’t know that we know they know we know.</h2>
        <p>You can't just give up. Is that what a dinosaur would do? I just stopped and I said, what if I don't want to be a shoe? What if I want to be a
            purse, you know, or a hat? Santa, the armadillo and I will have a little talk in the kitchen. There's a sentence I never thought I'd say. What
            was I thinking at dinner? "Do you want soup or salad?" Both! Always order both!</p>
        <p>That's a lot of information to get in 30 seconds. I wanna quit the gym! You know what I figure? If I can do laundry, there's nothing I can’t do. I
            understand why Superman is here, but why is there a porcupine at the Easter Bunny's funeral? They don’t know that we know they know we know. Welcome to
            the real world! It sucks. You're gonna love it! I'm a gym member. I try to go four times a week, but I've missed the last twelve hundred times.</p>
        <p>We were on a break! They're as different as night and...later that night. Look at me! I'm Chandler! Could I BE wearing any more clothes? You have really
            great hair. Oh thanks, I grow it myself. </p>
    </div>
</section>

@import 'path/to/animate-into-view/src/mixins';

// Basic
.module {

    &__copy {
        @include animate(fadeIn);
    }
}

@import 'path/to/animate-into-view/src/mixins';

// With media query to change the animation at a set breakpoint
.module {

    &__copy {
        @include animate(fadeIn);

        @media only screen and (min-width: 600px) {
            @include animate(fadeInUp);
        }
    }
}