@slidy/animation
v1.0.8
Published
Simple animation functions for inertion scrolling
Downloads
135
Maintainers
valexrReadme
@slidy/animation
Simple animation functions for inertion scrolling.
Try the DEMO
Getting started 🚀
The package is available via NPM:
npm i -D @slidy/animationor from CDN:
<script src="https://unpkg.com/@slidy/animation"></script>Usage
Animation functions available via named import as MJS/CJS module or via global Window.Slidy object props as IIFE.
Includes fade, flip, matrix, rotate, scale, stairs, translate & blur, deck, shuffle in progress as functions.
type Options = {
index: number, // current active slide index
snap: Snap; // snapping side
position: number; // current position
vertical: boolean, // node children flow
reverse: boolean, // node children reverse flow
}
type Snap = 'start' | 'center' | 'end' | 'deck' | undefined;
interface Child extends HTMLElement {
i: number; // child index in array
index: number; // child index
active: number; // `options.loop ? cix : options.index`
size: number; // `size + gap` by axis
dist: number; // distance to snap position
track: number; // move to the size of the slide from its snap point +/- in the direction
turn: number; // `-1 <- child.track / child.size -> 1`
exp: number; // interpolated child.track `0 <- exp -> 1`
}
type AnimationArgs = {
node: HTMLElement; // target slidy node
child: Child; // extended childNode object
options: Options; // options: index, position, vertical, reverse, snap
translate: string; // basic translate needed in any function `{ transform: translate }`
};
type AnimationFunc = (args: AnimationArgs) => CSSStyleDeclaration;MJS/CJS module import
<head>
<script type="module">
import * as animation from 'https://unpkg.com/@slidy/animation/dist/index.mjs'; // MJS module
// OR
import * as animation from 'https://unpkg.com/@slidy/animation/dist/index.cjs'; // CJS module
</script>
</head>IIFE as Window Object
<head>
<script src="https://unpkg.com/@slidy/animation/dist/index.js"></script>
</head>
<script>
window.onload = () => animation = SlidyAnimation.matrix()
</script>As third party module in any frameworks
<!-- Svelte -->
<script>
import { fade } from '@slidy/animation';
<Slidy animation={fade} />
</script>Arguments
| Name | Type | Description |
| :---------- | :------------ | :---------- |
| node | HTMLElement | Target slidy Node |
| child | Child | Extended childNode object |
| options | Options | Helped options from @slidy/core |
| translate | string | Basic translate needed in any function { transform: translate } |
Child
| Name | Type | Description |
| :------- | :------- | :---------- |
| i | number | Index in array |
| index | number | Index in core |
| active | number | options.loop ? cix : options.index |
| size | number | size + gap by options.vertical |
| dist | number | Distance to snap position |
| track | number | Move by slide size from its snap point +/- in the direction |
| turn | number | -1 <- child.track / child.size -> 1 |
| exp | number | Interpolated child.track 0 <- exp -> 1 |
Options
| Name | Type | Description |
| :--------- | :-------- | :---------- |
| index | number | Current active slide index |
| snap | Snap | Snapping side: 'start', 'center', 'end', 'deck', undefined |
| position | number | Current position |
| vertical | boolean | Children vertical flow |
| reverse | number | Children reverse flow: -1 or 1 |
Custom
Like example fade() function. More in animation.ts file.
function fade({ child, translate }: AnimationArgs) {
return {
opacity: child.exp, // custom fade by exp
transform: translate, // basic translate for coordinates
};
}MIT © Valexr