import * as React from "react" ; import { motion } from "framer-motion" ; export const SlideHorizontally = ( props ) => { const style = { ... props . style || { } , } ; return ( < motion . div initial = { { transform : `translateX(${ props . initialY }%)` } } animate = { { transform : `translateX(${ props . targetY }%)` } } exit = { { transform : `translateX(${ props . initialY }%)` } } style = { style } > { props . children } < /motion.div>); } ; interface IProps { readonly initialY : number ; readonly targetY : number ; readonly style ? : React . CSSProperties ; readonly children : React . ReactElement | React . ReactNode ; }