Pixel-Animate

Very simple and lightweight for animate on scroll plugin for SvelteKit. Fully Typed.

Supports svelte 3 and 4

To install package run:

# installation
npm install pixel-animate

Usage

Import animate plugin and animation type. Then, use it in your tag. Delay and duration are not required params. Use class "a-class" to prevent showing element on server side (if you want to).

<script>
  import {animate, slide} from 'pixel-animate';
</script>

<div class="a-class" use:animate={{name: slide.in, delay: 1, duration: 0.5}}>Some text for animation</div>

Animation types

export declare const slide: {
    inRight: string;
    inLeft: string;
    inTop: string;
    inBottom: string;
};
export declare const fade: {
    in: string;
    inTop: string;
    inDown: string;
    inLeft: string;
    inRight: string;
    out: string;
};
export declare const text: {
    expand: string;
    contract: string;
};
export declare const scale: {
    in: string;
    out: string;
};
export declare const flip: {
    default: string;
    inTop: string;
    inBottom: string;
};