framer-motion

basics.tsx

import { motion } from 'framer-motion';

<motion.div
    initial={{ x: -100 }}
    animate={{ x: 0 }}
    transition={{ type: 'spring', duration: 1, bounce: 0.3 }}
>
    Foo
</motion.div>

on-intersection-animation-variants.tsx

/* eslint-disable react/self-closing-comp */
/* eslint-disable react/jsx-closing-tag-location */
import * as React from 'react';
import { useEffect } from 'react';
import { motion, useAnimation } from 'framer-motion';
import { useInView } from 'react-intersection-observer';

const boxVariants = {
  hidden: { scale: 0 },
  visible: {
    scale: 1,
    transition: {
      duration: 0.5,
    },
  },
};

const Box = () => {
  const controls = useAnimation();
  // wait until >20% of component is in view
  const { ref, inView } = useInView({ threshold: 0.2 });

  useEffect(() => {
    if (inView) {
      controls.start('visible');
    }
    if (!inView) {
      controls.start('hidden');
    }
  }, [controls, inView]);

  return (
    <motion.div
      ref={ref}
      className='Box'
      initial='hidden'
      animate={controls}
      variants={boxVariants}
      style={{
        height: '200px',
        width: '200px',
        background: 'limegreen',
        margin: '200px auto',
        textAlign: 'center',
      }}
    ></motion.div>
  );
};

export default function Framer() {
  console.log('rendering: <Framer />');
  return (
    <div
      style={{
        background: '#ccc',
        fontFamily: 'sans-serif',
        color: '#555',
        padding: '200px',
      }}
    >
      <Box />
      <Box />
      <Box />
      <Box />
      <Box />
      <Box />
      <Box />
      <Box />
      <Box />
      <Box />
    </div>
  );
}

on-intersection-animation.tsx

/* eslint-disable react/self-closing-comp */
/* eslint-disable react/jsx-closing-tag-location */
import * as React from 'react';
import { useEffect } from 'react';
import { motion, useAnimation } from 'framer-motion';
import { useInView } from 'react-intersection-observer';

const Box = () => {
  const controls = useAnimation();
  // wait until >20% of component is in view
  const { ref, inView } = useInView({ threshold: 0.2 });

  useEffect(() => {
    if (inView) {
      controls.start({
        x: 0,
        transition: {
          typre: 'spring',
          duration: 1,
          bounce: 0.3,
        },
      });
    }
    if (!inView) {
      controls.start({
        x: -100,
      });
    }
  }, [inView, controls]);

  return (
    <motion.div
      ref={ref}
      className='Box'
      animate={controls}
      style={{
        height: '200px',
        width: '200px',
        background: 'limegreen',
        margin: '200px auto',
        textAlign: 'center',
      }}
    ></motion.div>
  );
};

export default function Framer() {
  console.log('rendering: <Framer />');
  return (
    <div
      style={{
        background: '#ccc',
        fontFamily: 'sans-serif',
        color: '#555',
        padding: '200px',
      }}
    >
      <Box />
      <Box />
      <Box />
      <Box />
      <Box />
      <Box />
      <Box />
      <Box />
      <Box />
      <Box />
    </div>
  );
}

WithBouncingAnimation.tsx

import { ReactNode } from 'react';
import { motion } from 'framer-motion';

type Props = {
  children: ReactNode;
  delay?: number;
};

export default function WithBouncingAnimation({ children, delay }: Props) {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0 }}
      animate={{
        opacity: [null, 0.9, 0.9, 0.9, 1],
        scale: [null, 1.5, 0.7, 1],
      }}
      transition={{
        duration: 1.5,
        times: [0, 0.15, 0.3, 0.5],
        ease: 'easeInOut',
        delay: delay ? delay : 1.5,
      }}
    >
      {children}
    </motion.div>
  );
}

WithFadeInAnimation.tsx

import { ReactNode } from 'react';
import { motion } from 'framer-motion';

type Props = {
  children: ReactNode;
};

export default function WithFadeInAnimation({ children }: Props) {
  return (
    <motion.div
      initial={{ opacity: 0 }}
      animate={{ opacity: 1 }}
      transition={{ duration: 1 }}
    >
      {children}
    </motion.div>
  );
}

WithSlideUpAnimation.tsx

import { ReactNode } from 'react';
import { motion } from 'framer-motion';

type Props = {
  children: ReactNode;
};

export default function WithBouncingAnimation({ children }: Props) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 40 }}
      animate={{
        opacity: [null, 1],
        y: [null, 1],
      }}
      transition={{
        duration: 1,
        times: [0, 1],
        ease: 'easeInOut',
        delay: 0.5,
      }}
    >
      {children}
    </motion.div>
  );
}

WithSyncedBouncingAnimation.tsx

import { ReactNode } from 'react';
import { motion } from 'framer-motion';

type Props = {
  children: ReactNode;
  delay?: number;
};

export default function WithSyncedBouncingAnimation({
  children,
  delay,
}: Props) {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0 }}
      animate={{
        opacity: [null, 0.9, 1],
        scale: [null, 1.5, 1],
      }}
      transition={{
        duration: 1.5,
        times: [0, 0.15, 0.5],
        ease: 'easeInOut',
        delay: delay ? delay : 1.5,
      }}
    >
      {children}
    </motion.div>
  );
}