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?
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
)
Scrolanim has many CSS3 animations to use. No JavaScript animations, better performance.
Works on desktop and portable devices perfectly.
Also, animations names accept an optional parameter infinite
to repeat the animation forever.
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.