Framer motion Flashcards
What is framer motion?
Motion is a production-ready motion library for React from Framer. It brings declarative animations, effortless layout transitions and gestures while maintaining HTML and SVG semantics.
What is the motion method?
motion is a wrapper that is used in order to target the elements, that we would like to animate in or out in the App.
We need to return them in the Component like:
Div content
What does animate attribute do?
animate={{}} (pass an object) - animates the element to a specific state
What does initial attribute do?
initial={{}} - specifies the initial state of the element. We can then animate it into animate state.
What does transition attribute do?
transition={{}} - describes how animation transitions from start to end (from initial to animate)
available properties:
delay,
type - type of the animation (default: spring)
What are attributes that we can use together with spring animation?
stiffness - (only with type: spring, the higher the number, the more stiff, defaults to around 100)
mass - (higher mass means it moves slower)
damping: (strength of the opposing force, 0 - would oscilate indefinitely)
What are attributes that we can use together with tween animation?
duration - (only with type: twin)
What attribute is used for hover effects?
whileHover={{}}
we can pass properties exactly like in animate attribute.
What are variants?
- Variants can be used to animate entire sub-trees of components with a single animate prop. (In other words, we can extract our attributes into a separate object and reference them from each element)
variants={variants}
initial=”propName”
animate=”propName2”
- Variants automatically propagate animation attributes down to the children motion elements. Motion will know that we are using propName for initial state and propName2 for animate state.
- Options like when and staggerChildren can be used to declaratively orchestrate these animations. (which allows us to create timing relationships between parent motions and children motions using transition orchestration properties)
What are transition orchestration properties?
- One of the transition orchestration properties can be used with “when” property. We just add it to the transition object that we have defined in a variant.
transition:{
type: “spring”,
delay: 0.5,
when: “beforeChildren”
}
options: afterChildren, beforeChildren
- “staggerChildren” - staggers animation of each children, by X amount.
How do we apply keyframes for the animations using framer-motion?
In order to apply keyframes, we need to put the values for a property in an array.
hover: {
scale: [1,1.1,1,1.1.1,1]
}
will pulsate the button a few times.
In order to make it repeat indefinitely, we need to add a “yoyo” attribute to the transition and change its value to Infinity (in fact, we can put any number we want here)
hover: {
scale: 1.1,
yoyo: Infinity,
duration: 0.3,
},
},
How can we animate something out of a component?
We use the AnimatePresence component that comes with framer-motion.
1) We need to wrap the element that we would like to animate out in AnimatePresence component.
2) We need to pass motion.h2 element
3) While using AnimatePresence component, we can add exit attribute to the element that we are animating out
How do we add exit animations for routes?
1) We will need to use AnimatePresence component that will wrap Switch Component.
2) We also need to use useLocation hook, that comes by default with react-router-dom and pass location={location} and key={location.key} props to the Switch.
This way AnimatePresence will know about changes in the location.
3) We can add exit attribute to every component we would like to animate out when exitting router
4) It might be necessary, to put exitBeforeEnter attribute on the AnimatePresence
What does onExitComplete prop do and where can we use it?
We can use this prop whenever we are animating elements out of the display.
We attach it to AnimatePresence component, like:
What does initial={false} prop do on AnimatePresence?
It will ensure, that any time we refresh or load the page without transitioning into the page from another directory, it’s going to disable any initial animations.
