Jayant's Clipboard → Blog → Post

Getting you interested in Framer Motion with the essentials

June 04, 2021

js → view-only
1
render(<StarGraphic length={1} offset={0} duration={4} />);

_{A crude little SVG animation using framer motion}

This animation you see here could be very easily done using plain JS, so maybe it doesn't do the best job of showing why you should add 32kBs extra to your bundle size delivered over the network. But, look at how easy this was to achieve!

Here’s how the actual component looks like, roughly

Framer Motion is a high level UI animations library that makes a LOT of animations use-cases extremely simple. It even offers a really simple way to even use shared element transitions! See my experiment with no libraries, here, and the code here.

Now, this isn’t a tutorial, this is just something to get you interested with examples that you can implement in most apps.

Following is a list of things you can do, and remember, for code examples, find this file on Github and look at the relevant imported components.

1. Circular progress bars

This is the first one you would have noticed, and it’s present only on this page because I don’t really want it to be a site-wide thing.

Progress bars are a ubiquitous thing, essential to letting a user know how much of a certain process has been completed so far. Unlike a loading indicator, a progress bar allows a user a sense of how much time is left for a process or task to complete. Now, rectangular progress bars are pretty straight forward. You can take a div inside another div and make the inner div have X% width relative to the outer one. Throw in some styling and you have a basic progress bar.

Circular progress bars can offer a nicer experience in some cases, and they don’t take up as much horizontal space which means more of them can be stacked horizontally. But since it could be particularly complex to get a partial circle, because regular elements don’t allow you to have a specific length on a border, you may be able to get 25/50/75/100% indications, but for finer control, you neen the SVG circle shape.

Here’s an example of a circular progress bar to show your scroll progress through the page. This progress bar is present on only this page on this site, so if this annoys you, click on “Show Editor”, then in the Preview section, click on “Hide scroll progress”.

ProgressIndicator component code

ProgressIndicator usage code

2. Animated list items

Animating list items isn’t a complex feat to achieve in any library, but prepare to have your mind blown at how easy it is here. Animating items in a list could be a great way to render items in a navbar, products list, users list, etc. It ideally shouldn’t be used in situations where getting to the data asap is more important than fanciness, such as real-time metrics in a logs dashboard.

We have two examples here. The first one is well suited for static lists, such as a list of options/settings or menu items, things that are unlikely to change during a session. The second one is well suited for larger lists, where you may have infinite scrolling in place to fetch even more items.

Simple ListItems implementation code

Incremental Stagger ListItems implementation code

3. Lightboxing

Did you try out the “maximize” button on the live code editors on this page yet? The lightbox functionality is powered by Framer Motion too! To see how exactly the code lightbox works, you’ll have to check Github again.

Lightboxing is a great way to show specific content by using the entire screen, without taking the user to a new page. Now, if you could introduce an animation such that the image/content could grow from its current position to fill the whole screen and then go back to where it’s supposed to be, it offers a really great experience of being tethered to the rest of the content on the page.

The below example will cover a lightweight version of a lightbox, using an image example.

Image Lightbox example

There will be more stuff here, such as image gallery/carousel, toasts, expanding content cards, maybe more.

To be continued.

Built by Jayant Bhawal, who does stuff on the Web as a hobby.
You should follow him on Twitter or GitHub