Not always needing animations

Animations are exciting but you don't need to animate everything.

When it comes to design, I find animations and interactions to be the most exciting part of design. There's been so much development behind all the animation libraries in recent years. However, I think there comes a point where some elements shouldn't be animated.

You're probably wondering, what components would you and would you not animate? It's not necessarily a list of elements but more of a flow chart that goes on in my head. The main thought I think about is how often is the user accessing the element? Is this more of like I'm clicking and interacting with this all the time or every once in awhile?

Two examples off the top of my head are a search click versus a modal or toast. Modals and toasts come after declarative actions where the user is sure they want to do the action, but it's not used as much as a search function. A user can possibly be using the search pretty often that animating that over and over again could feel clunky.

That's mainly my framework for how I decide if a component should be animated if I'm ever unsure. There are some cases in which I'm opinionated on like I don't think badges should be animated if they're used like tags. However, there's an argument that you can animate them to remove them. Even then, I probably would go against it because a user can add or remove many tags at a time.

So in essence, the next time you look at a component, think about if this element should be animated or not. This decision can also boil down to taste and preference. I tend to be a bit biased since I love animations that feel natural and are very miniscule. Regardless, have fun animating but don't over animate!