Layout Animations with Framer motion
One of the significant differences between a boring user experience and a good one is animations. Not just fade-in animations but animations with context(such as micro animations in icons or buttons and Layout animations).
Layout animation which is my focus is really of importance, because the attention of the user often follows animations. But the current state of the web doesn’t support layout effects. We’ve always seen layout animations on mobile apps, when we click on a card then it pops up giving more details, and the experience is quite enjoyable You’re always sure of what to do next. but on the web, you get something like this.
😤😤 annoying isn’t it. The user interface just threw the user into an ocean of doubts and questions— “what am I going to do next?”, “Is this the element I clicked on?”. These sorts of questions are what prompted me to write this.
We would implement a solution to this problem with react, typescript(very minimal), Stitches.js (a CSS in JS library), and framer motion, our animation library. First, we build our user interface, nothing complex just a centered grid with 2 columns and cards.
1. Building the user interface
We import the necessary libraries
we then get the data for components you can get all the images from the GitHub repository.
then we create our base components, it doesn’t have to be in the same file.
the syntax of stitches is just like most CSS-in-JS frameworks, with a twist — Stitches has a fully-typed API that gives it the best Developer Experience. Composing all of these little parts together, we build the user interface
The code is simple. we created a state to store the id of the selected item(for those new to typescript the <undefined | number> is just to indicate that type of the constant selected can either be a number or undefined) and we built the user interface with the base components. This is the result
It’s functional but without animations. To add animation to it will have to make use of the motion component.
2. Adding animations
now that we’ve updated our base components, we have to make use of the properties given to us by the motion component. The properties of concern are layoutId and layout . with layoutId property framer-motion can identify the element and if the position of the element changes in the DOM it animates the elements(so far the layoutId stays the same). This might be a lot to take in at first but in practice is far too easy. So we add the layoutId to the Card component.
the results?
better right? We can notice that the elements in the background were animated to fill up the space but the MainCard didn’t animate at all. that’s because the MainCard doesn’t have the layoutId of the selected card(i.e the card that was removed from the DOM). By adding this we get the animation we’ve been looking for.
the results?
we’ve finally seen what we want. You can see how easy it is to build layout animations with framer-motion. this is the code for the app
3. HindSight
we could have added a placeholder for the Card which is selected to prevent the unnecessary movement of the other cards.
then we have something like this
Cards with placeholder
you can see the demos here. Thank you and follow for more.
