@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