Basics of Framer Motion

Framer Motion is now just Motion and is now open source!

Find Motion animation library at Main site or for their github

Playing around with Framer Motion, its quick and easy use for a lot of things in React

https://framerbook.com/animation/example-animations/2-spring/

https://framerbook.com

the Following are some samples of framer-motion a newer animation library I am testing out.

 Getting started with framer-motion in Reactinstall the library "framer-motion" yarn add framer-motion
import the libraryimport {
  motion,
  useMotionTemplate,
  useMotionValue,
  useSpring,
  useTransform,
} from "framer-motion";
set up the motion values you'll want to use (if needed)
set up the motion transforms & templates you'll want to use. (if needed)

Animate something as the page comes into view

Below you can see that the initial and the animate define the 'variants' that should be refrenced.


            <motion.div
              initial="hidden"
              animate="visible"
              variants={{
                hidden: {
                  scale: 0.3,
                  opacity: 0,
                },
                visible: {
                  scale: 1,
                  opacity: 1,
                  transition: {
                    delay: 0.4,
                    duration: 5,
                  },
                },
              }}
            ></motion.div>

animate a draged element


       const backgroundColorV = useMotionTemplate`rgba(100, 100, ${backgroundChange}, 0.8)`         
       const x = useMotionValue(0);
       
       <motion.div
          drag="x"
          dragConstraints={{ left: 0, right: 200, top: 200 }}
          style={{
            backgroundColor: backgroundColorV,
            width: "200px",
            x,
            // opacity: opacityV,
          }}
        >
          drag me
        </motion.div>

Something new coming soon!

this is the shadow test

drag me

card flip example

Stiffness Playground

change the stiffness value: 90

Damping

change the Damping value: 7

Mass

change the mass value: 0.75

card tab example hover over me