react-animate-observer/dist/animation/ScrollAnimator.d.ts

A React component for scroll animations using Intersection Observer

import { ReactNode, CSSProperties, ReactElement } from 'react';
import { IntersectionObserverProps, StyleProps, TransitionProps } from '../animation/types';
/**
 * The properties expected by the ScrollAnimator component.
 */
type BaseScrollAnimatorProps = {
    /** The children to be rendered inside the ScrollAnimator. */
    children: ReactNode;
    /** The starting styles for the animation. */
    start?: Omit<StyleProps, keyof TransitionProps>;
    /** The ending styles for the animation. */
    end?: Omit<StyleProps, keyof TransitionProps>;
    /** The transition properties for the animation. */
    transition?: TransitionProps;
    /** Whether or not to use custom styling. */
    customStyle?: boolean;
    /** Options for the IntersectionObserver. */
    observerOptions?: IntersectionObserverProps;
    /** Styles other than ScrollAnimator. */
    style?: Omit<CSSProperties, keyof TransitionProps>;
};
type ScrollAnimatorProps<T extends keyof JSX.IntrinsicElements> = BaseScrollAnimatorProps & {
    /** The HTML element to render as. */
    as?: T;
} & Omit<JSX.IntrinsicElements[T], 'style'>;
/**
 * ScrollAnimator component. This component is used to animate its children on scroll.
 * It observes whether its root element is in the viewport and applies the appropriate
 * CSS transformations based on its `start` and `end` properties.
 *
 * @param {ScrollAnimatorProps} props The properties of the ScrollAnimator.
 * @returns {React.ReactElement} The rendered ScrollAnimator component.
 */
declare const ScrollAnimator: <T extends keyof JSX.IntrinsicElements>({ children, start, end, transition, as, customStyle, observerOptions, style, ...props }: ScrollAnimatorProps<T>) => ReactElement;
export default ScrollAnimator;