2.3.0 • Published 3 years ago

kis-animate

Licence

—

Version

2.3.0

Deps

Size

66 kB

Vulns

Weekly

Summary Dependency Versions

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

Name	Attribute	Type	Default	Description
items	`-`	`string` or `NodeListOf<HTMLElement>`	`'[data-a-type]:not([data-a-state])'`	CSS selector or collection of items you want to animate or NodeList of HTML elements.
type	`data-a-type`	`string`	`'slide-in-from-bottom'`	Name of the animation you want to use. Check the list of animations available out of the box.
timingFunction	`data-a-timing-function`	`string`	`'ease'`	Animation timing function.
delay	`data-a-delay`	`number`	`0`	Delay in milliseconds after which the animation starts playing.
delayStep	`-`	`number`	`0`	Delay in milliseconds after which the next item animation will be fired.
duration	`data-a-duration`	`number`	`800`	Animation duration in milliseconds.
offset	`data-a-offset`	`string`	`'0px'`	Allows you to trigger animation a bit later. Technically this is IntersectionObserver rootMargin.
threshold	`data-a-threshold`	`number`	`0.1`	Technically this is IntersectionObserver threshold.

List of available animation types

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

KisAnimateText

Name	Attribute	Type	Default	Description
items	`-`	`string` or `NodeListOf<HTMLElement>`	`'[data-a-text-type]:not([data-a-text-state])'`	CSS selector or collection of items you want to animate or NodeList of HTML elements.
type	`data-a-text-type`	`string`	`'slide-in-from-bottom'`	Name of the animation you want to use. Check the list of animations available out of the box.
timingFunction	`data-a-text-timing-function`	`string`	`'ease'`	Transition timing function.
delay	`data-a-text-delay`	`number`	`0`	Delay in milliseconds after which the animation starts playing.
symbolDelay	`data-a-text-symbol-delay`	`number`	`10`	Delay between each symbol animation. Personal recommendation: use something like half of the element font size in pixels. 20 for 40px text, 8 for 16px text etc..
duration	`data-a-text-duration`	`number`	`800`	Animation duration in milliseconds for each symbol.
offset	`data-a-text-offset`	`string`	`'0px'`	Allows you to trigger animation a bit later. Technically this is IntersectionObserver rootMargin.
threshold	`data-a-text-threshold`	`number`	`0.1`	Technically this is IntersectionObserver threshold.
wordPaddingInline	`data-a-text-word-word-padding-inline`	`string`	`0.5em`	Increase this parameter if your text cuts of on left/right. (We use padding and negative margin combo to make mask effect.)
wordPaddingBlock	`data-a-text-word-word-padding-block`	`string`	`0.2em`	Increase this parameter if your text cuts of on top/bottom. Do not make it huge, it will make your mask animations look worse. (We use padding and negative margin combo to make mask effect.)

List of available text animation types

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