import * as React from 'react' ; import VisibilitySensor from 'react-visibility-sensor' ; import { Card } from '@twilio-paste/card' ; import { useSpring , animated } from '@twilio-paste/animation-library' ; const AnimatedCard = animated ( Card ) ; interface GetStartedCardProps { animationDelay ? : number ; } export const GetStartedCard = ( { animationDelay = 0 , children } ) => { const [ show , setShow ] = React . useState ( false ) ; const handleVisibilityChange = ( isVisible ) : void => { if ( ! show ) { setShow ( isVisible ) ; } } ; const props = useSpring ( { height : '100%' , width : '100%' , opacity : show ? 1 : 0 , transform : show ? 'translateY(0px)' : 'translateY(25px)' , delay : animationDelay , config : { mass : 1 , tension : 280 , friction : 40 } , } ) ; const cardProps = { opacity : 0 } ; return ( < VisibilitySensor onChange = { handleVisibilityChange } partialVisibility minTopValue = { 90 } > < AnimatedCard style = { props } { ... cardProps } padding = "space70" > { children } < /AnimatedCard> < /VisibilitySensor>); } ;