@slidy/animation
v1.0.9
Published
Simple animation functions for inertion scrolling
Downloads
88
Maintainers
Readme
@slidy/animation
Simple animation functions for inertion scrolling.
Try the DEMO
Getting started 🚀
The package is available via NPM:
npm i -D @slidy/animation
or 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