Simple animation functions for inertion scrolling. Try the DEMO. To learn more how to create your own, read the core-animation-section section.

Getting started

The package is available via NPM:

npm i -D @slidy/animation

or via CDN:

<script src="https://unpkg.com/@slidy/animation"></script>

Usage Examples

There are several options to use predefined animation functions in your project:

ES Module Import

<head>
   <script type="module">
        import * as animation from "https://unpkg.com/@slidy/animation/dist/index.mjs";
    </script>
</head>

CommonJS Require

<head>
   <script type="module">
        import * as animation from "https://unpkg.com/@slidy/animation/dist/index.cjs";
    </script>
</head>

IIFE as `Window` Object

<head>
    <script src="https://unpkg.com/@slidy/animation"></script>
</head>

<script>
    window.onload = () => animation = Slidy.matrix()
</script>

SvelteJS Framework

<script>
    import { fade } from '@slidy/animation';

    <Slidy animation={fade} />
</script>

Available animations:

fade;
flip;
matrix
rotate;
scale;
stairs;
translate;

TODO:

blur;
deck;
shuffle;