7 Examples of Subtle Animation in Design

At Creative Market, we love it when designers focus on the little details. Lately, we’ve been coming across great subtle animations in everything from our internal tools, to the many templates and themes in our shops. Designers are utilizing animation more frequently to not only create delight, but also a richer user experience. Check out this list of examples we’ve compiled. Enjoy!

Hipstech

Hipstech combines subtle background movement with a clean animation between text headlines.

Six Rows

Six Rows is a minimal app landing page, but rather than simply displaying all the content at once, the main hero unit slowly fades in as it animates from the left and right. This subtle entrance tells the visitor that he or she is about to witness something impressive, an ideal message to send in your product’s landing page.

PRISM

PRISM is a beautiful admin template that utilizes animation to emphasize the data and information that is being visualized.

Dragonfly

Dragonfly‘s pricing section is made up of individual cards that imitate more realistic motion. When you hover over the cards, they flip to reveal more details. This animation helps declutter the view for the user and highlights the importance of the product’s price.

Pure

Pure is an awesome portfolio theme that features more whimsical-style animations. Horizontal and vertical movements combine with a bouncy moustache to create visual interest. The menu animation also helps separate the site’s navigation from the rest of the content.

Nitteo

Nitteo is another simple portfolio that uses a subtle animation to display content initially. The animated down arrow hints that there is more to see below.

Endless

Endless is an admin template that uses animated charts and dynamically updates data to display useful information. Milestones are shown with an animated counter to emphasize their importance.

Further Reading

• Pasquale D’Silva wrote a pretty cool Medium post about transitional interfaces, where he talks about using animation functionally in addition to just adding delight. Check it out on Medium.


• Mark Coleran‘s showreel has some really great examples to pull inspiration from. Even though this video is over 6 years old, it is still incredibly relevant. Watch it on Vimeo.


• Google recently announced a new internal design language, dubbed Material Design, that incorporates plenty of motion and subtle animation. Learn about it on Google Design.


• Stripe has a great animated walk-through of their Checkout flow that quickly explains how it works. Go to Stripe Checkout.


• Codrops is a design/development blog with a ton of great resources and tutorials that often utilize animation and transitions. Checkout the Codrops Playground.


• Clear is an iPhone task management app that really inspired a new era of interaction and simplicity. It utilizes gestures and animation to create a simple and beautiful experience. Learn about Clear


• For more examples of animations and transitions, check out these galleries: SIX UX Transitions, Hover States, CAPPTIVATE.

Animate all the things!

We hope these examples will provide a bit of inspiration that you can pull from in your own work. Have anything you’d like to share? Please do! We’d love to see work you’ve done, as well as other things that inspire you. Now get to the animating!

7 Examples of Subtle Animation in Design