react-animate-z
Version:
React hook animate (lib)
27 lines (26 loc) • 1.95 kB
TypeScript
/// <reference types="react" />
export type AnimateType = 'blur' | 'bounce' | 'effect3D' | 'flash' | 'float' | 'glowing' | 'jelly' | 'pulse' | 'shadow' | 'spin' | 'swing' | 'fadeIn' | 'fadeInFromLeft' | 'fadeInFromRight' | 'fadeInFromTop' | 'fadeInFromBottom' | 'fadeOut' | 'fadeOutToLeft' | 'fadeOutToRight' | 'fadeOutToTop' | 'fadeOutToBottom' | 'flip' | 'flipIn' | 'flipOut' | 'flipSlowDown' | 'flipFromTop' | 'flipToTop' | 'flipFromBottom' | 'flipToBottom' | 'flipFromLeftToCenter' | 'fold' | 'unfold' | 'hangOnLeft' | 'hangOnRight' | 'rotateSlowDown' | 'rotateCW' | 'rotateACW' | 'shakeMix' | 'shakeHorizontal' | 'shakeVertical' | 'squeezeMix' | 'squeezeHorizontal' | 'squeezeVertical' | 'slideInFromLeft' | 'slideInFromRight' | 'slideOutToLeft' | 'slideOutToRight' | 'slideInFromTop' | 'slideInFromBottom' | 'slideOutToTop' | 'slideOutToBottom' | 'zoomIn' | 'zoomOut' | 'popIn' | 'popOut' | 'rubberBand' | 'jello' | 'wobble' | 'rollIn' | 'jackInTheBox' | 'typewriter';
export interface ICursorProps {
cursorColor?: string | null;
}
export interface IAnimationTypingProps extends ICursorProps {
heading?: string;
className?: string;
dataText?: string[] | string;
children?: React.ReactNode | string[] | string;
}
export interface IBaseStyledElementProps {
type?: AnimateType;
duration?: string;
timing?: 'ease' | 'easeIn' | 'easeOut' | 'easeInOut' | 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
delay?: string;
iteration?: string | number | 'infinite';
direction?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
fillMode?: 'none' | 'forwards' | 'backwards' | 'both';
}
export interface IAnimationProps extends IBaseStyledElementProps, React.HTMLAttributes<HTMLDivElement> {
tagName?: keyof JSX.IntrinsicElements | React.ElementType;
children?: React.ReactNode | string;
typingWrite?: IAnimationTypingProps;
onAnimationEnd?: () => void;
}