Skip to main content

Basic usage: CSS classes

Get up and running quickly by linking the provided CSS and adding classes the HTML elements you wish to animate in.

This method uses the default threshold of 0.75, meaning the animation will be triggered when 75% of the element is visible in the viewport.

  1. Add the CSS and JS to your page.
<link href="path/to/animate-into-view.css" rel="stylesheet"/>
<script src="path/to/animate-into-view.js" type="module"></script>
  1. Add animate-into-view and aiv- classes to the element(s) you want to animate in.
<section class="animate-into-view aiv-fadeIn">
    <p>Some content</p>
</section>

You can adjust the duration of the animation by overriding the animation-duration property in .animate-into-view in your own CSS.

Add your own animations​

Add your own animations in your CSS by creating the relevant animation and aiv- class. Below is an example of how fadeIn works:

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.animate-into-view.aiv-visible.aiv-fadeIn {
    animation-name: fadeIn;
}

Essential styles are applied to .animate-into-view and .aiv-visible (the latter is added by the JavaScript), so you must still add the animate-into-view class to the element for your custom animation to work.

Override animation settings​

You can also add overrides in your CSS, for example to change the animation duration or add a delay:

/** Globally **/
.animate-into-view {
    animation-duration: 1s; /* Default is 1s*/
    animation-delay: 0.3s; /* No delay by default, add yours here if desired */
}

/** To a specific-element **/
.foo {
    animation-duration: 1s; /* Default is 1s*/
    animation-delay: 0.3s; /* No delay by default, add yours here if desired */
}