framer-motion#motion TypeScript Examples

The following examples show how to use framer-motion#motion. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.

Example #1

Source File: hero-section.tsx From notebook with MIT License

7 votes

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>
    </>
  );
}

Example #2

Source File: Pool2Row.tsx From rari-dApp with GNU Affero General Public License v3.0

7 votes

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>
  );
}

Example #3

Source File: History.tsx From useDApp with MIT License

7 votes

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;
`

Example #4

Source File: SlideDrawer.tsx From test with BSD 3-Clause "New" or "Revised" License

7 votes

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,
)

Example #5

Source File: Animate.tsx From frontend-boilerplate with MIT License

7 votes

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>
  );
}

Example #6

Source File: action-button.tsx From bitpay-browser-extension with MIT License

7 votes

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>
)

Example #7

Source File: KmHelp.tsx From nosgestesclimat-site with MIT License

7 votes

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>
)

Example #8

Source File: draggableHeading.tsx From dhafit.xyz with MIT License

7 votes

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>
  );
}

Example #9

Source File: styles.ts From tesla-homepage-ui-clone with MIT License

7 votes

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

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

Example #10

Source File: Pill.tsx From chroma-react with MIT License

7 votes

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>
    );
  }
)

Example #11

Source File: note-modal.tsx From notebook with MIT License

6 votes

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>
  );
}

Example #12

Source File: motion.tsx From portfolio with MIT License

6 votes

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} />;
  })
)

Example #13

Source File: index.tsx From gatsby-markdown-typescript-personal-website with MIT License

6 votes

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>
    </>
  );
}

Example #14

Source File: TransactionForm.tsx From useDApp with MIT License

6 votes

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

Example #15

Source File: PoolSelection.styles.ts From frontend-v1 with GNU Affero General Public License v3.0

6 votes

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);
  }
`)

Example #16

Source File: card-header.tsx From bitpay-browser-extension with MIT License

6 votes

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>
)

Example #17

Source File: animate.tsx From nosgestesclimat-site with MIT License

6 votes

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>
)

Example #18

Source File: draggableHeading.tsx From dhafit.xyz with MIT License

6 votes

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>
  );
}

Example #19

Source File: PrimaryNavigationSubItem.tsx From chroma-react with MIT License

6 votes

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>
    );
  }
)

Example #20

Source File: Landing.tsx From happy with MIT License

6 votes

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>
  );
}

Example #21

Source File: Button.tsx From Meshtastic with GNU General Public License v3.0

6 votes

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>
  );
}

Example #22

Source File: ChatWindow.tsx From chat-widget with MIT License

6 votes

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>
  );
}

Example #23

Source File: Notice.tsx From phosphor-home with MIT License

6 votes

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>
  );
}

Example #24

Source File: Arrows.tsx From rcvr-app with GNU Affero General Public License v3.0

6 votes

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>
  )
}

Example #25

Source File: index.tsx From rainbow-button with MIT License

6 votes

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%;
  }
`

Example #26

Source File: animatedmessages.tsx From samuelkraft-next with MIT License

6 votes

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>
  )
}

Example #27

Source File: Demo.tsx From postel with MIT License

6 votes

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>
  );
})

Example #28

Source File: AnimateAppear.tsx From calories-in with MIT License

6 votes

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>
  )
}

Example #29

Source File: Container.tsx From vignette-web with MIT License

6 votes

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>
  )
}