# Animation # Target object. For simple animations, we can set values directly on the animate prop. When any value in animate. Target objects are useful for simple, single-component animations. But sometimes we want to create. # Animation controls. Declarative animations are ideal. Hey gang - welcome to your first Frame Motion (for React) tutorial. In this tutorial I'll explain what Framer Motion is and what you'll need to know already. 9 alternative and related products to Framer Motion. A truly simple production-ready React animation library. Super excited to announce Framer Motion! It's the successor to Pose and is the same simple animation and gesture library that's been powering the Framer Library API. Now production-ready and open source. The input range must be a linear series of numbers. The output range can be any value type supported by Framer Motion: numbers, colors, shadows, etc. Every value in the output range must be of the same type and in the same format. Framer-motion is a great animation library that allows you to create animations in web application and inside Framer X using the same intuitive API. In this course we'll cover all the features that FM has to offer - from basic animations and layout transitions, to more complex imperative animations, working with gestures, and crafting low-level interactions.
- Framer Motion React Native
- Framer Motion React Native
- Framer Motion Opacity
- Framer Motion
- Framer Motion 2
- React Framer
I've been testing several React animation libraries and Framer Motion made the highest impression on me. In this post we'll explore how to use Framer Motion to animate Next.js page transitions.
Here's an example:
You can download the source code on GitHub.
What is Framer Motion
Framer Motion is the newest React animation library, a successor to Popmotion Pose. It also powers animations in Framer X, a powerful prototyping tool.
I used Popmotion Pose before, so the concepts behind Framer Motion weren't foreign to me, but I was still amazed by the simple API that makes even complex animations easy to implement.
Framer Motion comes with the server-side rendering support out of the box, so it's also perfect for Next.js apps.
To get started with Framer Motion in a React project, install the framer-motion package from npm:
Note: Framer Motion requires React 16.8 or greater.
Once installed, import
motion
into your components:The core of the Motion API are
motion
components. To animate elements, we need to replace primitive DOM elements (like div
, svg
, etc.) with their Motion counterparts: motion.div
, motion.svg
, etc. These components offer extra props that allow you to declaratively add animations and gestures.Framer Motion React Native
Crossover 19 0 15.
motion
components are animated via the animate
prop which can accept an object, variant label(s), or a reference to imperative animation controls.Here's a simple component that animates a single div element:
Using Framer Motion for Next.js page transitions
Framer Motion provides an AnimatePresence component which makes it possible to animate React components as they mount and unmount.
To be able to animate page transitions,
AnimatePresence
must be a direct parent component of individual page components.In Next.js we can use a special
pages/_app.js
file to create a custom <MyApp>
component where we can include parent components to pages.This is how an _app.js file looks like by default:
Framer Motion React Native
The
<Component {..pageProps} />
part represents individual pages, so we can add Framer Motion AnimatePresence
as their parent component like this:Notice that I also added a
key
prop to <Component>
and set it to the current route. This is important so that AnimatePresence
can track the presence of child components in the tree.I also added
exitBeforeEnter
prop to AnimatePresence to make sure the exiting page finishes its exit animation before the next page starts animating.If you need to add a global layout component for your pages, you can do it like this:
I wrote about Next.js layouts in more detail in a previous post.
Framer Motion Opacity
For the example site, I created two pages, homepage as the 'post index' and a dynamic post page, and defined enter and exit animations for both.
Framer Motion provides Variants, which are sets of pre-defined target objects. They allow us to animate entire sub-trees of components with a single animate prop.
For the post index page I created a parent
motion.div
component with the variants
prop where I defined how the child elements will transition on exit
:Framer Motion
With
staggerChildren
we define that children elements (posts) should transition away one by one with animation duration of 0.1 second.To animate individual posts, I wanted a more complex animation, so I defined an object with an initial, enter and exit objects:
This object is added as variants prop to the post container:
<motion.div variants={postVariants}>
.initial
is used to define starting element styles, enter
for styles to which the element will animate when mounting and exit
for animating when unmounting
.Framer Motion 2
I used the same approach to animate individual posts, but I created separate animations for post image, post text and the back button:
React Framer
My suggestion is to play with the example code and try adjusting the animations. I hope my examples will help you get started with animating your Next.js apps.
Also check out the Framer Motion docs for more info on all available features.