Scrollanim

Scrollanim is a CSS3 and JavaScript library to create stunning scroll animations that work everywhere.

It's open-source (MIT), free and easy to use Oh, and it's 9KB.

Star Fork

Want to see a demo? Ok, keep scrolling.

Easy to use

Scrollanim has many builtin CSS3 animations to use. All you need to do is to add data-kui-anim attribute to your elements.

 
            <div data-kui-anim="fadeIn">
  Show this with a fadeIn animation.
</div>
        

Cool, isn't it?

Advanced mode

Also, this is possible to add the animations using the JavaScript API.

 
            kissuiScrollAnim.add(element, {
  'in': 'fadeIn',
  'out': 'fadeOut'
});
        

Scrolanim supports all available positions for an element on the page. Also, you can use a compound event name (e.g. in center middle)

CSS3 Animations

Scrolanim has many CSS3 animations to use. No JavaScript animations, better performance.

Works on desktop and portable devices perfectly.

Infinite animation

Also, animations names accept an optional parameter infinite to repeat the animation forever.

Perfect event control

Scrollanim controls all elements with an extra care. You can attach events to almost all possible positions of an element on the page.

For instance, this element appears with a fadeIn animation but also gets a pulse animations when it's in the middle of the page.

Did you enjoy?

That's great, we are glad you liked it. The next step is to use the CDN networks or download the project. Meanwhile, you can have a look at the documentation page.

Star Fork