This is a good starting point, and we’ve achieved the core effect but I think it needs a bit more. The approach is very cool because it allows us to go forward and back between pages and the transition works as expected. Try it out, and we’ll see the title and image moves smoothly across the screen. When the page transitions from / to /features, framer will treat the elements on one page with the elements on the second page as the same if they share an identical layoutId. Let’s replace the matching elements on our features.js page too. We’ll do the same with the figure element that wraps our image. It’s a string which will be unique across our app. Usually, we’d add the animate prop, so we can define the animation but the only thing we need for the transition is the layoutId prop.
This component allows us to turn normal html elements into animatable components. To set this up, inside _app we’ll import it: The component enables us to animate layout changes between different components and tell Framer which elements are shared and therefore should transition to the new state. The first step is to set and forget our AnimateSharedLayout component. The button looks like it could work but the text content differs, it’s possible with a bit of work to create something that looks passable but I’ll skip the layout transition for this element. The title and image are the same so these are the most obvious candidates. We can’t transition between all of these elements because they aren’t all on both pages. A features page with the same title and image but it’s surrounded but other icons and feature descriptions. Clicking on the button will navigate to our other page. The first page is a simple landing page with an image, a title, a paragraph and a button. Page transition tutorialįor our example we’re going to animate between two pages. The elements that are not shared between pages will animate in while the elements that are shared will animate between pages instead. The project contains two pages which we will animate between. It’s not exclusive to Next.js or Framer Motion, these are just two of my favourites that work well together. If you’re not using Next.js and instead are using another React router library, you’ll still get and idea of how this could fit in. The two key ingredients are Next.js and Framer Motion. When combined with Next.js, it offers a rich user experience and developer experience that I love. It gives us the ability to mix a variety of different animation types and can be a good foundation for making your pages even more delightful for users.
Why Framer Motion?įramer motion is an easy-to-use library which can achieve our desired transition effect quickly and is powerful. If you’d like to apply this technique to an existing project, it should be easy to do so. We’re going to build our transitions upon what’s already built in to Next. One of the most obvious features we’re leveraging is the built in routing. It builds upon React to offer a great developer experience. Next.js is a popular framework for building web apps and for good reason. By adding seamless transitions between webpages, we begin to shift towards a more native feeling UI which delights user’s and brings your website or web app into a class of its own. The web is a powerful platform that has a lot to offer. The transition between Next.js pages with Framer Motion Why?
0 kommentar(er)
