The initial and animate states will control the entry animation for this component. You can read more about them on the Framer Motion website.Įnter fullscreen mode Exit fullscreen mode Variants promote cleaner code by removing the requirement to add the animation object to the motion.main component. Looking at the Layout component you will see an object named variants (see below). supplied by Framer Motion provides the ability to pass certain animation props such as transition, initial and animate. In the rendered HTML output this will be a HTML main element, however, adding the motion.

Note the component which is specific to Framer Motion. On my website it is the Layout component. In my case this meant moving the Header and Footer which you can see on GitHub.Īdded a wrapper component to control the animation states within pages. Moved common components that shouldn't animate on every page change into _app.js. Where possible, using _app.js to persist layouts between page changes will reduce the amount of rendering that React has to do each time the page changes - potentially improving your app performance.īefore I added any animations to my website I did two pieces of refactoring: In Next.js terms, this is everything apart from _app.js - so all pages and other components. I use this capability to animate the components that come and go when the page changes. Read more about Framer Motion and view examples on their website.Īs well as making user triggered animations, Framer Motion can animate a component when it is mounting (entering) and unmounting (leaving). Various animations powered by Framer Motion Variants for orchestrating animations across components.It's a library that enables the animations of React components on a page and while the component is entering and also leaving.įramer Motion can do all of the following: This time I wanted to use an animation library built for React.js that I could use in future projects.Ī production-ready motion library for React. Previously, I'd used CSS transitions and JavaScript to achieve animations on a webpage. While building it, I decided adding animations would bring its simple design to life. A few months ago I rebuilt my Dev.to powered Next.js website from scratch.

Framer next js