animate-on-view/dist/svelte/index.d.ts

High-performance, zero-dependency animation library for React/Next.js and Svelte with TypeScript support

import * as $ from 'svelte/internal/client';
import * as svelte from 'svelte';

declare function intersectionObserver(element: HTMLElement, options?: {
    threshold?: number;
    rootMargin?: string;
    triggerOnce?: boolean;
    onIntersect?: (isIntersecting: boolean) => void;
}): {
    destroy(): void;
};

interface AnimationVariant {
    initial: Record<string, any>;
    animate: Record<string, any>;
    transition?: {
        duration?: number;
        delay?: number;
        easing?: string;
    };
}
type AnimationType = 'fadeIn' | 'fadeInUp' | 'fadeInDown' | 'fadeInLeft' | 'fadeInRight' | 'slideUp' | 'slideDown' | 'slideLeft' | 'slideRight' | 'scaleIn' | 'scaleOut' | 'scaleX' | 'scaleY' | 'rotateIn' | 'rotateInLeft' | 'rotateInRight' | 'flipX' | 'flipY' | 'zoomIn' | 'zoomInUp' | 'zoomInDown' | 'zoomInLeft' | 'zoomInRight' | 'bounceIn' | 'bounceInUp' | 'bounceInDown' | 'bounceInLeft' | 'bounceInRight' | 'elasticIn' | 'elasticInUp' | 'elasticInDown' | 'blurIn' | 'blurInUp' | 'skewIn' | 'skewInUp' | 'rollIn' | 'lightSpeedIn' | 'jackInTheBox' | 'gentle' | 'soft' | 'smooth' | 'dramatic' | 'explosive';
interface AnimateOnViewProps {
    type?: AnimationType;
    variant?: AnimationVariant;
    threshold?: number;
    rootMargin?: string;
    triggerOnce?: boolean;
    duration?: number;
    delay?: number;
    easing?: string;
    class?: string;
    style?: string;
    onInView?: () => void;
    onOutView?: () => void;
    children?: svelte.Snippet;
}

declare const defaultVariants: Record<string, AnimationVariant>;

declare const createTransitionString: (duration: number, delay: number, easing: string) => string;
declare const createStyleString: (styles: Record<string, any>) => string;

var root = $.from_html(`<div><!></div>`);

function AnimateOnView($$anchor, $$props) {
	$.push($$props, true);

	let type = $.prop($$props, 'type', 3, 'fadeIn'),
		threshold = $.prop($$props, 'threshold', 3, 0.1),
		rootMargin = $.prop($$props, 'rootMargin', 3, '0px'),
		triggerOnce = $.prop($$props, 'triggerOnce', 3, true),
		delay = $.prop($$props, 'delay', 3, 0),
		className = $.prop($$props, 'class', 3, ''),
		style = $.prop($$props, 'style', 3, ''),
		restProps = $.rest_props($$props, [
			'$$slots',
			'$$events',
			'$$legacy',
			'type',
			'variant',
			'threshold',
			'rootMargin',
			'triggerOnce',
			'duration',
			'delay',
			'easing',
			'class',
			'style',
			'onInView',
			'onOutView',
			'children'
		]);

	let isInView = $.state(false);
	const activeVariant = $.derived(() => $$props.variant || defaultVariants[type()]);

	const transition = $.derived(() => ({
		duration: $$props.duration || $.get(activeVariant).transition?.duration || 600,
		delay: delay(),
		easing: $$props.easing || $.get(activeVariant).transition?.easing || 'ease-out'
	}));

	const transitionString = $.derived(() => createTransitionString($.get(transition).duration, $.get(transition).delay, $.get(transition).easing));

	const currentStyles = $.derived(() => $.get(isInView)
		? $.get(activeVariant).animate
		: $.get(activeVariant).initial);

	const finalStyles = $.derived(() => createStyleString({
		transition: $.get(transitionString),
		willChange: 'opacity, transform',
		...$.get(currentStyles)
	}) + (style() ? `; ${style()}` : ''));

	function handleIntersection(intersecting) {
		$.set(isInView, intersecting, true);

		if (intersecting && $$props.onInView) {
			$$props.onInView();
		} else if (!intersecting && $$props.onOutView) {
			$$props.onOutView();
		}
	}

	var div = root();

	$.attribute_effect(div, () => ({ class: className(), style: $.get(finalStyles), ...restProps }));

	var node = $.child(div);

	$.snippet(node, () => $$props.children ?? $.noop);
	$.reset(div);

	$.action(div, ($$node, $$action_arg) => intersectionObserver?.($$node, $$action_arg), () => ({
		threshold: threshold(),
		rootMargin: rootMargin(),
		triggerOnce: triggerOnce(),
		onIntersect: handleIntersection
	}));

	$.append($$anchor, div);
	$.pop();
}

function AnimateDiv($$anchor, $$props) {
	$.push($$props, true);

	let props = $.rest_props($$props, ['$$slots', '$$events', '$$legacy']);

	AnimateOnView($$anchor, $.spread_props(() => props, {
		children: ($$anchor, $$slotProps) => {
			var fragment_1 = $.comment();
			var node = $.first_child(fragment_1);

			$.snippet(node, () => $$props.children ?? $.noop);
			$.append($$anchor, fragment_1);
		},

		$$slots: { default: true }
	}));

	$.pop();
}

var root_1$2 = $.from_html(`<h1><!></h1>`);

function AnimateH1($$anchor, $$props) {
	$.push($$props, true);

	let props = $.rest_props($$props, ['$$slots', '$$events', '$$legacy']);

	AnimateOnView($$anchor, $.spread_props(() => props, {
		children: ($$anchor, $$slotProps) => {
			var h1 = root_1$2();
			var node = $.child(h1);

			$.snippet(node, () => $$props.children ?? $.noop);
			$.reset(h1);
			$.append($$anchor, h1);
		},

		$$slots: { default: true }
	}));

	$.pop();
}

var root_1$1 = $.from_html(`<h2><!></h2>`);

function AnimateH2($$anchor, $$props) {
	$.push($$props, true);

	let props = $.rest_props($$props, ['$$slots', '$$events', '$$legacy']);

	AnimateOnView($$anchor, $.spread_props(() => props, {
		children: ($$anchor, $$slotProps) => {
			var h2 = root_1$1();
			var node = $.child(h2);

			$.snippet(node, () => $$props.children ?? $.noop);
			$.reset(h2);
			$.append($$anchor, h2);
		},

		$$slots: { default: true }
	}));

	$.pop();
}

var root_1 = $.from_html(`<p><!></p>`);

function AnimateP($$anchor, $$props) {
	$.push($$props, true);

	let props = $.rest_props($$props, ['$$slots', '$$events', '$$legacy']);

	AnimateOnView($$anchor, $.spread_props(() => props, {
		children: ($$anchor, $$slotProps) => {
			var p = root_1();
			var node = $.child(p);

			$.snippet(node, () => $$props.children ?? $.noop);
			$.reset(p);
			$.append($$anchor, p);
		},

		$$slots: { default: true }
	}));

	$.pop();
}

export { AnimateDiv, AnimateH1, AnimateH2, AnimateOnView, AnimateP, defaultVariants, intersectionObserver };
export type { AnimateOnViewProps, AnimationType, AnimationVariant };