What are some examples of animations in React?

What are some examples of animations in React?

There are several popular libraries for animations in React, such as React Spring and Framer Motion. Would you like to see specific examples?

Yes, please provide an example using React Spring.

Sure! Here's a simple example using React Spring to create a fading effect:

import { useSpring, animated } from 'react-spring';

const FadeInComponent = () => {
  const props = useSpring({ opacity: 1, from: { opacity: 0 }});
  return <animated.div style={props}>Hello, I fade in!</animated.div>;
};

This code will make the text fade in when the component mounts.

That looks great! Can you show me an example with Framer Motion?

Absolutely! Here's a simple example using Framer Motion to create a bounce effect:

import { motion } from 'framer-motion';

const BounceComponent = () => {
  return (
    <motion.div
      animate={{ y: [0, -30, 0] }}
      transition={{ duration: 0.5, repeat: Infinity }}
    >
      I bounce!
    </motion.div>
  );
};

This will make the text bounce up and down continuously.