How to use the framer-motion.motion.custom function in framer-motion

import * as React from "react";
import { useState } from "react";
import { Accordion, Box, Stack, useTheme } from "@chakra-ui/core";
import { motion, AnimatePresence } from "framer-motion";
import Label from "~/components/Label";
import Result from "~/components/Result";
import useConfig from "~/components/HyperglassProvider";
import useMedia from "~/components/MediaProvider";

const AnimatedResult = motion.custom(Result);
const AnimatedLabel = motion.custom(Label);

const labelInitial = {
  left: {
    sm: { opacity: 0, x: -100 },
    md: { opacity: 0, x: -100 },
    lg: { opacity: 0, x: -100 },
    xl: { opacity: 0, x: -100 }
  },
  center: {
    sm: { opacity: 0 },
    md: { opacity: 0 },
    lg: { opacity: 0 },
    xl: { opacity: 0 }
  },
  right: {
    sm: { opacity: 0, x: 100 },

{text}
      
    
  )
);

const AnimatedSubtitle = motion.custom(SubtitleOnly);

const TextOnly = ({ text, mediaSize, showSubtitle, ...props }) => (
  
    
      
    
    
      {showSubtitle && (

import * as React from "react";
import { motion, AnimatePresence } from "framer-motion";
import Layout from "~/components/Layout";
import HyperglassForm from "~/components/HyperglassForm";
import Results from "~/components/Results";
import { useHyperglassState } from "~/components/HyperglassProvider";

const AnimatedForm = motion.custom(HyperglassForm);

const LookingGlass = () => {
  const {
    isSubmitting,
    setSubmitting,
    formData,
    setFormData,
    greetingAck,
    setGreetingAck
  } = useHyperglassState();

  return (
    
      {isSubmitting && formData && (

import React from "react";
import { Flex, useColorMode } from "@chakra-ui/core";
import { motion, AnimatePresence } from "framer-motion";
import ResetButton from "~/components/ResetButton";
import useMedia from "~/components/MediaProvider";
import useConfig, { useHyperglassState } from "~/components/HyperglassProvider";
import Title from "~/components/Title";
import { ColorModeToggle } from "~/components/ColorModeToggle";

const AnimatedFlex = motion.custom(Flex);
const AnimatedResetButton = motion.custom(ResetButton);

const titleVariants = {
  sm: {
    fullSize: { scale: 1, marginLeft: 0 },
    smallLogo: { marginLeft: "auto" },
    smallText: { marginLeft: "auto" }
  },
  md: {
    fullSize: { scale: 1 },
    smallLogo: { scale: 0.5 },
    smallText: { scale: 0.8 }
  },
  lg: {
    fullSize: { scale: 1 },
    smallLogo: { scale: 0.5 },
    smallText: { scale: 0.8 }

ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
  useColorMode,
  useDisclosure
} from "@chakra-ui/core";
import Markdown from "~/components/Markdown";
import { motion } from "framer-motion";

const bg = { light: "white", dark: "black" };
const color = { light: "black", dark: "white" };

const AnimatedModalContent = motion.custom(ModalContent);
const AnimatedModalOverlay = motion.custom(ModalOverlay);

const Greeting = ({ greetingConfig, content, onClickThrough }) => {
  const { isOpen, onOpen, onClose } = useDisclosure(true);
  const { colorMode } = useColorMode();

  const handleClick = () => {
    onClickThrough(true);
    onClose();
  };

  return (

import * as React from "react";
import { useState } from "react";
import { Accordion, Box, Stack, useTheme } from "@chakra-ui/core";
import { motion, AnimatePresence } from "framer-motion";
import Label from "~/components/Label";
import Result from "~/components/Result";
import useConfig from "~/components/HyperglassProvider";
import useMedia from "~/components/MediaProvider";

const AnimatedResult = motion.custom(Result);
const AnimatedLabel = motion.custom(Label);

const labelInitial = {
  left: {
    sm: { opacity: 0, x: -100 },
    md: { opacity: 0, x: -100 },
    lg: { opacity: 0, x: -100 },
    xl: { opacity: 0, x: -100 }
  },
  center: {
    sm: { opacity: 0 },
    md: { opacity: 0 },
    lg: { opacity: 0 },
    xl: { opacity: 0 }
  },
  right: {

ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
  useColorMode,
  useDisclosure
} from "@chakra-ui/core";
import Markdown from "~/components/Markdown";
import { motion } from "framer-motion";

const bg = { light: "white", dark: "black" };
const color = { light: "black", dark: "white" };

const AnimatedModalContent = motion.custom(ModalContent);
const AnimatedModalOverlay = motion.custom(ModalOverlay);

const Greeting = ({ greetingConfig, content, onClickThrough }) => {
  const { isOpen, onOpen, onClose } = useDisclosure(true);
  const { colorMode } = useColorMode();

  const handleClick = () => {
    onClickThrough(true);
    onClose();
  };

  return (

import React from "react";
import { Flex, useColorMode } from "@chakra-ui/core";
import { motion, AnimatePresence } from "framer-motion";
import ResetButton from "~/components/ResetButton";
import useMedia from "~/components/MediaProvider";
import useConfig, { useHyperglassState } from "~/components/HyperglassProvider";
import Title from "~/components/Title";
import { ColorModeToggle } from "~/components/ColorModeToggle";

const AnimatedFlex = motion.custom(Flex);
const AnimatedResetButton = motion.custom(ResetButton);

const titleVariants = {
  sm: {
    fullSize: { scale: 1, marginLeft: 0 },
    smallLogo: { marginLeft: "auto" },
    smallText: { marginLeft: "auto" }
  },
  md: {
    fullSize: { scale: 1 },
    smallLogo: { scale: 0.5 },
    smallText: { scale: 0.8 }
  },
  lg: {
    fullSize: { scale: 1 },
    smallLogo: { scale: 0.5 },

import {
  IconButton,
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalCloseButton,
  useDisclosure,
  useColorMode,
  useTheme
} from "@chakra-ui/core";
import { motion, AnimatePresence } from "framer-motion";
import MarkDown from "~/components/MarkDown";

const AnimatedIcon = motion.custom(IconButton);

const HelpModal = ({ item, name }) => {
  const { isOpen, onOpen, onClose } = useDisclosure();
  const { colors } = useTheme();
  const { colorMode } = useColorMode();
  const bg = { light: "whiteFaded.50", dark: "blackFaded.800" };
  const color = { light: "black", dark: "white" };
  const iconColor = {
    light: colors.primary[500],
    dark: colors.primary[300]
  };
  return (
    <>

import * as React from "react";
import { Button, Flex } from "@chakra-ui/core";
import { motion } from "framer-motion";

const AnimatedFlex = motion.custom(Flex);

const FooterButton = React.forwardRef(
  ({ onClick, side, children, ...props }, ref) => {
    return (