@primer/react-brand
Version:
Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.
47 lines (46 loc) • 2.04 kB
TypeScript
import React, { PropsWithChildren } from 'react';
/**
* Design tokens
*/
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/animation/base.css';
export declare const AnimationVariants: readonly ["fade-in", "fade-out", "slide-in-up", "slide-in-down", "slide-in-left", "slide-in-right", "scale-in-up", "scale-in-down", "scale-in", "fill-in-top", "scale-in-right", "scale-in-left", "fill-in-right"];
type Variant = (typeof AnimationVariants)[number];
type VariantAdvanced = {
variant: Variant;
delay?: number;
duration?: number;
ease?: string;
};
export type AnimateProps = Variant | VariantAdvanced;
type AnimationTrigger = 'click' | 'on-visible';
type IntersectionVisibilityeOptions = 'bottom-of-screen' | 'middle-of-screen' | 'about-to-leave' | number;
type AnimationProviderProps = {
/**
* Prevents animations from running inside the provider
*/
disableAnimations?: boolean;
/**
* Controls the trigger method for the animation. One of `click` or `on-visible`.
*/
animationTrigger?: AnimationTrigger;
/**
* Controls the intersection observer options for the animation.
* One of `bottom-of-screen`, `middle-of-screen`, `about-to-leave`, or a number between 0 and 1.
*/
visibilityOptions?: IntersectionVisibilityeOptions;
/**
* Will persist the animation end-state after the animation has completed
*/
runOnce?: boolean;
/**
* Will stagger the animations of the children using an incrementing delay
*/
autoStaggerChildren?: boolean;
/**
* Stagger delay increment. Should be used alongside `autoStaggerChildren`.
*/
staggerDelayIncrement?: number;
};
export declare const AnimationContext: React.Context<AnimationProviderProps>;
export declare function AnimationProvider({ children, disableAnimations, animationTrigger, visibilityOptions, runOnce, autoStaggerChildren, staggerDelayIncrement, }: PropsWithChildren<AnimationProviderProps>): import("react/jsx-runtime").JSX.Element;
export {};