framer-motion#motion TypeScript Examples

export default function HeroSection() {
  return (
    <>
      <Flex h={"55vh"} justifyContent="center" align="center">
        <SlideFade in={true} offsetY="50vh">
          <motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
            <Heading
              fontWeight={600}
              fontSize={{ base: "2xl", sm: "4xl", md: "6xl" }}
              lineHeight={"110%"}
            >
              <Text textShadow="1px 1px #9c1786">Make notes for </Text>
              <Text
                as={"span"}
                color={"green.400"}
                bgGradient="linear(to-r, green.200, pink.500)"
                bgClip="text"
              >
                your daily work
              </Text>
            </Heading>
          </motion.div>
        </SlideFade>
      </Flex>
    </>
  );
}

Pool2Row = ({
  apr,
  earned,
  balance,
}: {
  apr: any;
  earned: any;
  balance: any;
}) => {
  const { t } = useTranslation();

  return (
    <motion.tr
      initial={{ opacity: 0, y: -40 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: 40 }}
    >
      <Td>
        <SimpleTooltip label={t("Pool2")} placement="right">
          <Box width="30px">
            <Pool2LogoPNGWhite boxSize="25px" />
          </Box>
        </SimpleTooltip>
      </Td>
      <Td textAlign="right">{t("RGT-ETH")}</Td>
      <Td textAlign="right">
        {balance?.SLP?.toFixed(2)} {t("RGT-ETH")}
      </Td>
      {/* Todo (sharad) - implement RGT earned in poolInfo */}
      <Td textAlign="right">
        {earned?.toFixed(2)} {t("RGT")}
      </Td>
      <Td textAlign="right">{t("N/A")}</Td>
    </motion.tr>
  );
}

NotificationWrapper = styled(motion.div)`
  display: flex;
  align-items: center;
  background-color: ${Colors.White};
  box-shadow: ${Shadows.notification};
  width: 395px;
  border-radius: 10px;
  margin: 15px;
  padding: 10px 20px 10px 20px;
`

StyledContainer = styled(motion.div)<any>(
  {
    backgroundColor: 'transparent',
    position: 'fixed',
    opacity: 0,
    display: 'flex',
    justifyContent: 'center',
    WebkitOverflowScrolling: 'touch',
    '@media (max-width: 640px)': {
      zIndex: 11,
    },
  },
  position,
  layout,
  color,
)

function Animate({
  children,
  ...props
}: IBaseComponent & { variants: any; onClick?: () => void }) {
  return (
    <motion.div
      className="w-full"
      initial="initial"
      animate="enter"
      exit="exit"
      {...props}
    >
      {children}
    </motion.div>
  );
}

ActionButton: React.FC<{
  onClick?: () => void;
  flavor?: string;
  disabled?: boolean;
  type?: 'button' | 'submit' | 'reset';
  children?: unknown;
}> = ({ onClick, children, flavor, disabled, type = 'button' }) => (
  <motion.button
    className={`action-button${setFlavor(flavor)}`}
    type={type}
    whileTap={{ scale: 0.96 }}
    onClick={onClick}
    disabled={disabled}
  >
    {children}
  </motion.button>
)

MouvingArrow = () => (
	<motion.div
		animate={{
			y: [0, 0, 0, -3, 4, 0],
		}}
		transition={{
			duration: 1.5,
			delay: 1,
			repeat: Infinity,
			repeatDelay: 0,
		}}
	>
		<img src={openmojiURL('pointer')} css="width: 1.5rem;" />
	</motion.div>
)

DraggableH1 = ({ initialX, className, text }: DraggableHeadingProps) => {
  return (
    <motion.h1
      drag
      dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
      dragElastic={1}
      initial="initial"
      animate="enter"
      exit="exit"
      transition={{ delay: 0.2 }}
      variants={{
        initial: { opacity: 0, x: initialX },
        enter: { opacity: 1, x: 0 },
        exit: { opacity: 0, x: 10 },
      }}
      className={className}
    >
      {text}
    </motion.h1>
  );
}

Container = styled(motion.div)`
  position: sticky;
  top: 0;
  height: 100vh;
  margin-top: -100vh;
  z-index: 999;

  display: flex;
  flex-direction: column;
  align-items: center;
`

Pill = React.forwardRef<HTMLSpanElement, PillProps>(
  (
    { children, className, color, label, variant = 'default', ...rootProps },
    ref
  ) => {
    const classes = useStyles({});

    return (
      <motion.span
        ref={ref}
        className={clsx(
          classes.root,
          {
            [classes.default]: variant === 'default',
            [classes.highlight]: variant === 'highlight',
          },
          {
            [classes.primaryColor]: color === 'primary',
          },
          className
        )}
        {...rootProps}
      >
        {label}
        {children}
      </motion.span>
    );
  }
)

NoteModal: React.SFC<NoteFormProps> = ({
  isOpen,
  onClose,
  selectedNote
}) => {
  return (
    <AnimatePresence>
      <motion.div layoutId={selectedNote?.id}>
        <Modal
          isOpen={isOpen}
          onClose={onClose}
          scrollBehavior={"inside"}
          isCentered
          motionPreset="slideInBottom"
        >
          <ModalOverlay />
          <ModalContent>
            <motion.div>
              <ModalHeader isTruncated paddingRight="10">
                {selectedNote?.title}
              </ModalHeader>
            </motion.div>
            <ModalCloseButton />
            <motion.div>
              <ModalBody pb={6}>{selectedNote?.body}</ModalBody>
            </motion.div>
          </ModalContent>
        </Modal>
      </motion.div>
    </AnimatePresence>
  );
}

MotionFlex = motion.custom(
  forwardRef((props, ref) => {
    const chakraProps = Object.fromEntries(
      // do not pass framer props to DOM element
      Object.entries(props).filter(([key]) => !isValidMotionProp(key))
    );
    return <Flex ref={ref} {...chakraProps} />;
  })
)

Layout: React.FC<Props> = ({ children }) => {
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `);

  return (
    <>
      <GlobalStyles />
      <AnimatePresence exitBeforeEnter>
        <Styled.Layout>
          <Header siteTitle={data.site.siteMetadata.title} />
          <motion.div
            initial={{ y: 30, opacity: 0 }}
            animate={{ y: 0, opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ delay: 0.2 }}
          >
            {children}
            <Newsletter />
            <Footer />
          </motion.div>
        </Styled.Layout>
      </AnimatePresence>
    </>
  );
}

InformationRow = styled(motion.div)`
  height: 60px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: auto;
`

Item = motion(styled.li`
  padding: 15px 10px 10px;
  display: flex;
  gap: 10px;
  cursor: pointer;
  background-color: var(--color-white);
  color: var(--color-gray);
  transition: background-color 100ms linear;
  &:first-of-type {
    border-radius: calc(var(--radius) / 4) calc(var(--radius) / 4) 0 0;
  }

  &:last-of-type {
    border-radius: 0 0 calc(var(--radius) / 4) calc(var(--radius) / 4);
  }

  &:hover {
    background-color: var(--color-gray-100);
  }

  & > div:last-of-type {
    margin-left: auto;
    color: hsla(${COLORS.gray[500]} / 0.5);
  }
`)

CardHeader: React.FC<{ amount?: number; card: Partial<GiftCard> & UnsoldGiftCard; cardConfig: CardConfig }> = ({
  amount,
  card,
  cardConfig
}) => (
  <motion.div className="card-header" variants={counterPunch} custom={1} animate="visible" initial="hidden">
    <div className="card-header__title">{cardConfig.displayName}</div>
    <div className="card-header__balance">
      <img src={cardConfig.icon} alt={`${cardConfig.displayName} logo`} />
      {formatCurrency(typeof amount === 'undefined' ? card.amount : amount, card.currency, { hideSymbol: true })}
    </div>
  </motion.div>
)

appear = ({ children, delay = 0 }: Props) => (
	<motion.div
		initial={{ opacity: 0, scale: 0.8 }}
		animate={{ opacity: 1, scale: 1 }}
		transition={{ delay }}
		exit={{ opacity: 0, scale: 0.5, transition: { duration: 0.2 } }}
	>
		{children}
	</motion.div>
)

DraggableH2 = ({ initialX, className, text }: DraggableHeadingProps) => {
  return (
    <motion.h2
      drag
      dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
      dragElastic={1}
      initial="initial"
      animate="enter"
      exit="exit"
      transition={{ delay: 0.2 }}
      variants={{
        initial: { opacity: 0, x: initialX },
        enter: { opacity: 1, x: 0 },
        exit: { opacity: 0, x: 10 },
      }}
      className={className}
    >
      {text}
    </motion.h2>
  );
}

PrimaryNavigationSubItem = React.forwardRef<
  HTMLLIElement,
  PrimaryNavigationSubItemProps
>(
  (
    { exact, label, to, className, classes: additionalClasses, ...rootProps },
    ref
  ) => {
    const classes = useStyles({ classes: additionalClasses });
    const { isSidebarCollapsed } = useLayoutManager();

    if (isSidebarCollapsed) {
      return null;
    }

    return (
      <motion.li
        ref={ref}
        className={clsx(classes.root, className)}
        initial={{ opacity: 0 }}
        animate={{ opacity: 1, transition: { duration: inDuration } }}
        exit={{ opacity: 0, transition: { duration: outDuration } }}
        {...rootProps}
      >
        <NavOrExternalLink
          exact={exact}
          className={classes.link}
          activeClassName={classes.linkActive}
          to={to}
        >
          <span role="presentation" aria-hidden className={classes.spacer} />
          <Text size="subbody" className={classes.label}>
            {label}
          </Text>
        </NavOrExternalLink>
      </motion.li>
    );
  }
)

function Landing() {
  return (
    <div id="page-landing">

      <motion.div
        className="wrapper-logo-happy"
        initial={{ scale: 0 }}
        animate={{ scale: 2 }}
        transition={{ duration: 1.5, repeat: 1, repeatType: "reverse" }}
      >
        <img src={markerImg} alt="Logo happy" />
      </motion.div>

      <motion.div
        className="content-wrapper"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 3, duration: 0.8 }}
      >
        <img src={logoImg} alt="Logo da plataforma Happy" />

        <main>
          <h1>Leve felicidade para o mundo</h1>
          <p>Visite orfanatos e mude o dia de muitas crianças.</p>
        </main>

        <div className="location">
          <strong>São Paulo</strong>
          <span>São Paulo</span>
        </div>

        <Link to="/app" className="enter-app">
          <FiArrowRight size={26} color="rgba(8, 0, 0, 0.6)" />
        </Link>
      </motion.div>
    </div>
  );
}

Button = ({ children, ...props }: HTMLMotionProps<'div'>) => {
  return (
    <motion.div
      {...props}
      whileHover={{ scale: 1.1, backgroundColor: 'var(--tertiary)' }}
      whileTap={{ scale: 1.0 }}
      className="m-auto flex cursor-pointer rounded-full bg-secondary p-3 shadow-md"
    >
      <div className="m-auto">{children}</div>
    </motion.div>
  );
}

ChatWindow = (props: Props) => {
  // TODO: add a prop to `ChatWidgetContainer` to indicate when component is not
  // the widget (e.g. it is never toggled open/closed, no need to show notifications)
  return (
    <ErrorBoundary>
      <ChatWidgetContainer {...props} canToggle={false}>
        {(config) => {
          const {sandbox, isLoaded, iframeUrl, query, setIframeRef} = config;

          return (
            <motion.iframe
              ref={setIframeRef}
              className='Papercups-chatWindowContainer'
              sandbox={sandbox}
              animate={isLoaded ? 'open' : 'closed'}
              initial='closed'
              variants={{
                closed: {opacity: 0},
                open: {opacity: 1},
              }}
              transition={{duration: 0.2, ease: 'easeIn'}}
              src={`${iframeUrl}?${query}`}
              sx={{
                opacity: isLoaded ? 1 : 0,
                border: 'none',
                bg: 'background',
                variant: 'styles.ChatWindowContainer',
              }}
            >
              Loading...
            </motion.iframe>
          );
        }}
      </ChatWidgetContainer>
    </ErrorBoundary>
  );
}

Notice: React.FC<NoticeProps> = ({ message, type = "warn", children }) => {
  const isDark = useRecoilValue(isDarkThemeSelector);
  const query = useRecoilValue(searchQueryAtom);

  return (
    <div style={isDark ? { backgroundColor: "#35313D", color: "white" } : {}}>
      <motion.div
        className="empty-list"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 0.5 }}
      >
        {type === "wait" && (
          <HourglassMedium size={128} color="#615C68" weight="duotone" />
        )}
        {type === "help" && (
          <Question size={128} color="#615C68" weight="duotone" />
        )}
        {type === "warn" && (
          <SmileyXEyes size={128} color="#615C68" weight="duotone" />
        )}
        {message ?? (
          <p>
            No results for "<code>{query}</code>"
          </p>
        )}
        {children}
      </motion.div>
    </div>
  );
}

ArrowsRight: React.FC<ArrowsProps> = ({ color, ...rest }) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 28.4 16.4"
      width="28"
      height="16"
      css={css({ color })}
      fill="currentColor"
      {...rest}
    >
      {[0, 1, 2].map((i) => (
        <motion.path
          key={i}
          initial={{ x: 0, opacity: 0 }}
          animate={{ x: 18, opacity: [0, 1, 0] }}
          transition={{
            duration: 3,
            loop: Infinity,
            ease: 'linear',
            delay: i,
          }}
          d="M1.7 0L0 1.7l6.5 6.5L0 14.6l1.7 1.8 8.2-8.2z"
        />
      ))}
    </svg>
  )
}

ExpandedState = styled(motion.div)<{ qr?: boolean }>`
  font-family: SFRounded, ui-rounded, 'SF Pro Rounded', system-ui,
    'Helvetica Neue', Arial, Helvetica, sans-serif;
  align-items: center;
  align-self: center;
  background: transparent;
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 100%;
  margin: 0 42px;
  pointer-events: none;
  width: 1000px;
  @media (max-width: 850px) {
    box-sizing: border-box;
    flex-direction: column;
    margin: 0;
    max-width: 460px;
    padding: 0 30px;
    width: 100%;
  }
  @media (max-width: 650px) {
    max-width: 448px;
    padding: 0 24px;
  }
  @media (max-width: 375px) {
    height: 90%;
    width: 90%;
  }
`

Messages = (): JSX.Element => {
  const [messages, setMessages] = useState(initialMessages)

  useInterval(() => {
    setMessages(curr => {
      const first = curr.shift() // eslint-disable-line
      return [...curr, { text: randomWords(messageConfig), sent: Math.random() > 0.5 }]
    })
  }, 2000)

  return (
    <AnimatePresence>
      <ol className={styles.list} style={{ minHeight: 600 }}>
        {messages.map(({ text, sent }, i) => {
          const isLast = i === messages.length - 1
          const noTail = !isLast && messages[i + 1]?.sent === sent
          return (
            <motion.li
              key={text}
              className={cn(styles.shared, sent ? styles.sent : styles.received, noTail && styles.noTail)}
              initial="initial"
              animate="enter"
              variants={variants}
              layout
            >
              {text}
            </motion.li>
          )
        })}
      </ol>
    </AnimatePresence>
  )
}

DemoContent = React.forwardRef((props: DemoContentProps, ref: any) => {
  const motionProps = props.animated && {
    initial: { scale: 0.98, opacity: 0 },
    animate: { scale: 1, opacity: 1 },
    exit: { scale: 0.98, opacity: 0 },
    transition: {
      ease: "easeInOut",
      duration: 0.12,
    },
  };

  return (
    <AnimatePresence>
      {!props.isTransitioningOut && (
        <div ref={ref} style={{ outline: "none" }}>
          <motion.div
            {...motionProps}
            style={
              typeof props.content === "string" && {
                background: "#000",
                padding: "8px",
                color: "#fff",
                fontSize: "13px",
              }
            }
          >
            {props.content}
          </motion.div>
        </div>
      )}
    </AnimatePresence>
  );
})

function AnimateAppear({ shouldAnimate, children }: Props) {
  return (
    <motion.div
      transition={{
        ease: 'easeInOut',
        duration: shouldAnimate ? 0.35 : undefined,
        delay: 0.5,
      }}
      initial={shouldAnimate ? 'hidden' : false}
      animate="open"
      variants={variants}
    >
      {children}
    </motion.div>
  )
}

Container: React.FC<{
  noMargin?: boolean
  className?: string
  parallax?: boolean
  id?: string
  fadeIn?: boolean
  children?: ReactNode
  offset?: number
}> = ({
  className,
  noMargin,
  children,
  id,
  fadeIn = false,
  parallax,
  offset,
}) => {
  return parallax ? (
    <Parallax
      offset={offset}
      fadeIn={fadeIn}
      id={id}
      className={`${!noMargin && `mx-auto px-4 sm:px-8`} ${className}`}
    >
      {children}
    </Parallax>
  ) : (
    <motion.div
      id={id}
      className={`${!noMargin && `mx-auto px-4 sm:px-8`} ${className}`}
      transition={fadeIn ? { delay: 0.15, duration: 0.3 } : {}}
      initial={fadeIn && { opacity: 0 }}
      whileInView={fadeIn ? { opacity: 1 } : {}}
      viewport={{ once: true }}
    >
      {children}
    </motion.div>
  )
}