JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 15
  • Score
    100M100P100Q45290F
  • License MIT

Simple animation functions for inertion scrolling

Package Exports

  • @slidy/animation
  • @slidy/animation/dist/index.cjs
  • @slidy/animation/dist/index.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@slidy/animation) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

npm version npm bundle size npm downloads github issues npm license

@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