react-native-momentum-carousel/lib/typescript/src/useLayoutAnimation.d.ts

A React Native carousel component enables smooth and interactive image or content sliders with swiping capabilities. Ideal for showcasing multiple items or images in a compact space, this carousel can be customized with features like infinite scrolling, p

import { ItemCarouselProps } from './ItemCarousel';
/**
 * useLayoutStackAnimation calculates the animated style for a stack-style carousel animation.
 * It creates an opacity and scaling effect for each carousel item based on the scroll position (scrollX).
 * The items will scale down when not in the center and will move slightly to the left or right as they approach the center.
 */
export declare function useLayoutStackAnimation(data: ItemCarouselProps): {
    opacity: number;
    transform: ({
        scale: number;
        translateX?: undefined;
        translateY?: undefined;
    } | {
        translateX: number;
        scale?: undefined;
        translateY?: undefined;
    } | {
        translateY: number;
        scale?: undefined;
        translateX?: undefined;
    })[];
};
/**
 * useLayoutDefaultAnimation creates a default animation for carousel items.
 * It interpolates opacity and scaling based on the scroll position (scrollX).
 * The default animation scales the items and adjusts their opacity when scrolling.
 */
export declare function useLayoutDefaultAnimation(data: ItemCarouselProps): {
    opacity: number;
    transform: {
        scale: number;
    }[];
};
/**
 * useLayoutTinderAnimation creates a Tinder-style animation for carousel items.
 * It includes a combination of opacity, scale, translation (X and Y), and rotation based on the scroll position (scrollX).
 * This creates a dynamic "card-stack" effect with items rotating and translating as they approach or leave the center.
 */
export declare function useLayoutTinderAnimation(data: ItemCarouselProps): {
    opacity: number;
    transform: ({
        scale: number;
        translateX?: undefined;
        translateY?: undefined;
        rotate?: undefined;
    } | {
        translateX: number;
        scale?: undefined;
        translateY?: undefined;
        rotate?: undefined;
    } | {
        translateY: number;
        scale?: undefined;
        translateX?: undefined;
        rotate?: undefined;
    } | {
        rotate: string;
        scale?: undefined;
        translateX?: undefined;
        translateY?: undefined;
    })[];
};
//# sourceMappingURL=useLayoutAnimation.d.ts.map