kis-animate v2.3.0

kis-animate

Lightweight library that helps you to animate elements on your pages.

All the animations are written using CSS @keyframes and transition properties what makes them as smooth as possible. You can also add your own animations by supplementing css. All source files are placed in src/lib directory.

Usage

Install library

npm install kis-animate

Import library and initialize animation instance

// your-file.js

import 'kis-animate/style'
import { KisAnimate, KisAnimateText } from 'kis-animate'

const animation = new KisAnimate();
animation.init();

const customisedAnimation = new KisAnimate({
	items: '.items-selector', // or NodeListOf<HTMLElement>
	delayStep: 200,
	duration: 500,
	// ...
	// You can find more parameters in API section bellow
});
customisedAnimation.init();

const textAnimation = new KisAnimateText();
textAnimation.init();

const customisedTextAnimation = new KisAnimateText({
	items: '.text-selector', // or NodeListOf<HTMLElement>
	symbolDelay: 20,
	// ...
	// You can find more parameters in API section bellow
});
customisedTextAnimation.init();

API

KisAnimate

List of available animation types

- fade-in
- fade-out
- grow-in
- grow-out
- slide-in-from-bottom
- slide-in-from-top

KisAnimateText

List of available text animation types

- slide-in-from-bottom
- slide-in-from-bottom-mask
- slide-in-from-bottom-mask-with-rotation-anticlockwise