How to use framer-motion - 10 common examples

import { Flexbox, Typography, Icon, Box, useKeyPress } from '../..';

const Backdrop = styled(Flexbox)`
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2;

  ${({ theme }) => theme.media.greaterThan(theme.breakpoints.sm)} {
    background-color: ${({ theme }) => theme.color.modalBackdrop};
  }
`;

export const Dialog = styled(motion.div)`
  box-sizing: border-box;
  padding: ${({ theme }) => theme.spacing.unit(5)}px;
  border: 0;
  background: ${({ theme }) => theme.color.card};

  ${({ theme }) => theme.media.lessThan(theme.breakpoints.sm)} {
    width: 100%;
    height: 100%;
    transform: none !important; /* disables the appear animation */
  }

  ${({ theme }) => theme.media.greaterThan(theme.breakpoints.sm)} {
    width: ${({ theme }) => theme.spacing.unit(120)}px;
    box-shadow: 0 2px 2px 0 ${({ theme }) => theme.color.shadowModal};
  }
`;

})}
          
        
      
    
  );
};

// 
//

const MainContainer = styled.div`
  position: relative;
`;

const TransitionableScreen = styled(motion.div)`
  width: 100%;
  position: absolute;
`;

ScreenTransitionHandler.propTypes = {
  screens: PropTypes.array.isRequired,
  basePath: PropTypes.string.isRequired
};

export default ScreenTransitionHandler;

export function useParallax(positiveOffset: MotionValue, ...rangeFunPairs) {
  const processedRangeFunPairs = preprocessRangeFun(rangeFunPairs)
  const getRange = index =>
    processedRangeFunPairs[index] && processedRangeFunPairs[index][0]
  const getFun = index =>
    processedRangeFunPairs[index] && processedRangeFunPairs[index][1]

  return useTransform(positiveOffset, v => {
    let lastV = 0
    for (let i = 0; i < processedRangeFunPairs.length; i++) {
      const range = getRange(i)
      const fun = getFun(i)
      if (v < range[0]) {
        const prevFun = getFun(i - 1)
        const prevRange = getRange(i - 1)
        prevFun && (lastV = prevFun(prevRange[1]))
      } else if (v <= range[1]) {
        const nv = fun(v - range[0]) + lastV
        return nv
      } else {
        /* v > range[1] */
        lastV = fun(range[1] - range[0]) + lastV
      }
    }

import { isBoolean, isElement } from '../../common/utils';
import {
  Flexbox,
  Typography,
  Icon,
  Box,
  useKeyPress,
  FadedScroll,
  Portal,
  useMedia,
  Button,
} from '../..';

const displayName = 'Drawer';

const Container = styled(motion.div)`
  box-sizing: border-box;
  padding: ${({ theme }) => theme.spacing.unit(5)}px;
  width: 100%;
  height: 100%;
  background: ${({ theme }) => theme.color.card};
  position: fixed;
  z-index: ${({ theme }) => theme.zIndex.overlay};
  right: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -10px 16px 0 ${({ theme }) => theme.color.shadowModal};

  ${({ theme }) => theme.media.greaterThan(theme.breakpoints.sm)} {
    width: ${({ theme }) => theme.spacing.unit(100)}px;
  }

const App = () => {
  const controls = useAnimation();
  const footer = useAnimation();
  const results = useAnimation();
  const loadingAnimation = useAnimation();
  const classes = useStyles();
  const [state, dispatch] = useReducer(submitReducer, initialState);
  const [blockNumber, setBlockNumber] = useState('');
  const [invalidInput, setInvalidInput] = useState(false);
  const [gasUsed, setGasUsed] = useState('');
  const [feesPaid, setFeesPaid] = useState('');
  const [values, setValues] = useState({
    ethAddress: '',
    lowerBound: '',
    upperBound: '',
  });

  const handleSubmit = () => {
    if (
      /^(0x)+[0-9a-fA-F]{40}$/i.test(values.ethAddress) &&

const App = () => {
  const controls = useAnimation();
  const footer = useAnimation();
  const results = useAnimation();
  const loadingAnimation = useAnimation();
  const classes = useStyles();
  const [state, dispatch] = useReducer(submitReducer, initialState);
  const [blockNumber, setBlockNumber] = useState('');
  const [invalidInput, setInvalidInput] = useState(false);
  const [gasUsed, setGasUsed] = useState('');
  const [feesPaid, setFeesPaid] = useState('');
  const [values, setValues] = useState({
    ethAddress: '',
    lowerBound: '',
    upperBound: '',
  });

  const handleSubmit = () => {
    if (
      /^(0x)+[0-9a-fA-F]{40}$/i.test(values.ethAddress) &&
      Number(values.lowerBound) < Number(values.upperBound) &&

}};
  ${focusBorderColor}
  ${hoverIfNotDisabled}
`;

const DensedTypography = styled(Typography)`
  line-height: ${LINE_HEIGHT_INFO_BELOW}px;
  display: inline-block;
`;

const InlineFlexbox = styled(Flexbox)`
  display: flex;
  width: 100%;
`;

const BottomWrapper = styled(motion.span)`
  width: 100%;
`;

const CleanFlexbox = React.forwardRef((props: any, ref: React.Ref) => (
  
));

const InnerWrapperFlexbox = styled(CleanFlexbox)`
  position: relative;
  ${height}
  box-sizing: border-box;

  ${outerFlexboxBorderColor}

  background-color: #ffffff;
  box-shadow: 0 1px 3px ${p => p.theme.color.shadowInput};

}

const MainContainer = styled(motion.div)`
  background-color: ${PANEL_COLORS[1]};
  height: ${NAVIGATION_TAB_HEIGHT}px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-top: ${NAVIGATION_TAB_SPACING}px;
  padding-left: 20px;
  padding-right: 20px;
  cursor: pointer;
`;

const Text = styled(motion.div)`
  text-transform: uppercase;
  font-size: ${BASE_FONT_SIZE}pt;
  letter-spacing: ${LETTER_SPACING}px;
  font-weight: ${BASE_FONT_WEIGHT};
  margin-left: 10px;
  white-space: nowrap;
`;

export default Tab;

import React from 'react';
import styled from 'styled-components';
import { motion, AnimatePresence } from 'framer-motion';
import { Props } from './FormField.types';
import { VisuallyHidden, FormLabel, Typography, Fieldset, Legend } from '../..';
import { assert } from '../../common/utils';

const hasError = (error?: Props['error']) => error && error !== '';

const Wrapper = styled.div<{ width?: string | number }>`
  ${p => (p.width ? `width: ${p.width};` : 'width: 200px;')}
  display: inline-block;
`;

const BottomWrapper = styled(motion.div)``;
export const FormField: React.FC = React.forwardRef(
  (
    {
      children,
      className,
      error,
      extraInfo,
      fieldId,
      forId,
      group,
      hideLabel,
      label,
      id,
      required = false,
      showRequired = false,
      width,

const { icon, onClick } = this.props;

    const Icon = icon;

    return (
      
        
      
    );
  }
}

const MainContainer = styled(motion.div)`
  background-color: ${PANEL_COLORS[0]};
  -webkit-app-region: no-drag;
  width: ${HEADER_HEIGHT * 0.6}px;
  height: ${HEADER_HEIGHT * 0.6}px;
  margin-right: ${HEADER_HEIGHT * 0.2}px;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
`;

export default HeaderButton;