What does it do?

ScrollEntrance.js is a simple way to animate elements as they appear in the viewport.

See Examples

Fade In

Add data-entrance="fade-in" to fade the element in

<div data-entrance="fade">
    ...
</div>

Animate From the Left...

Add data-entrance="from-left" to animate the element in from the left

<div data-entrance="from-left">
    ...
</div>

Animate From the Right...

Add data-entrance="from-right" to animate the element in from the right

<div data-entrance="from-right">
    ...
</div>

Animate From the Top...

Add data-entrance="from-top" to animate the element in from the top

<div data-entrance="from-top">
    ...
</div>

Animate From the Bottom...

Add data-entrance="from-bottom" to animate the element in from the bottom

<div data-entrance="from-bottom">
    ...
</div>

Custom Animations...

Add data-entrance="my-custom-animation", and define some custom css styles to animate the element

<div data-entrance="my-custom-animation">
    ...
</div>

[data-entrance="my-custom-animation"]{
    transform: rotate(180deg);
    opacity: 0;
}
[data-entrance="my-custom-animation"].has-entered{
    transform: rotate(0deg);
    opacity: 1;
}

View the Documentation on GitHub for more Examples and Getting Started

View Documentation