Best UI Animation Design of Month#2 in 2019

Snow
Nov 17, 2019
198316
5 min read

Animation in user interfaces has become very trendy in recent years. A good web/app animation not only attracts far more users, but also provides a much more enjoyable user experience, resulting in higher retention rates.

If you are looking for some good examples to boost your creativity, check out this collection of 35 latest and most creative UI animation designs for Android and iOS apps.

1. App Animation Cute Theme

Designer: Ruohan

Highlights: Cute theme, smooth sliding button animation and icon buttons with text labels

This app animation example features a cute Totoro theme inspired by the famous Japanese anime film - My Neighbor Totoro. The smooth sliding button animation and the set of Totoro-themed icon buttons make the app irresistible to the fans of the Japanese film.

But, even if you are not a fan of the film, you’ll easily get caught up in Totoro’s cute smile. Plus, the sliding button animation is simply irresistible!

Here’s a tip: 

Choose a special theme or tell a story when designing your UI animation

Take inspiration from a well-known film, novel, TV show, or festival, and weave the story around it. This way, catching the users’ attention becomes a piece of cake.

2. Rate Your Ride Animation

Designer: Cuberto

Highlights: Creative emoji animations and interactions

Unlike common mobile apps which uses a table or form design to gather feedback, this ride app uses creative emoji animations and interactions instead.

When you choose different answers for the question "How was your ride?", the emoji animations will vary correspondingly. The background colors will also change at the same time.

This design cannot only stimulate users'emotions to choose a better answer, and it also impresses users easily, building a brand image in the users’ mind quickly.

The brief-stroke design style also makes the emoji animations more vivid and engaging.

Here’s a tip: 

Emoji animations can make your app UIs stand out easily.

When you find yourself stumped, try using emoji animations. Who knows? The simplest design (like this one) may turn out to be the best design, right?

3. Order Confirmation Button Animation

Designer: Aaron lker

Highlights: Excellent confirmation button animation

This order confirmation button uses vivid animations to give users visual feedback: "Your order has been successfully accepted and confirmed". In comparison with a static button, such an animated button design enhances the main action of the button and lets users know what's happening.

Here's a tip:

Add a vivid button animation to enhance the primary button’s action

4. Drone Delivery Progress Animation

Designer: Hoang Nguyen

Highlights: Perfect button design combined with a progress bar

This is another animated button design example that is combined with a progress bar. With this design, users are always informed of what’s happening, receiving instant feedback about the delivery status.

Some designers think that if it can be designed with a number label to indicate the percentage progress of the delivery process, it would be more intuitive for users. How about your thoughts on this?

Here’s a tip: 

Combine your buttons with other design elements, such as a progress bar, different button states, different dynamic effects and more

Related article: Mobile APP Design: 7 Best Tips of Android Button Design

5. Drag-and-drop Items Animation

Designer: Den Klenkov

Highlights: Easy drag-and-drop animation

This is a split pay App, which allows users to split the check after having dinner with friends in a restaurant. It uses an easy drag-and-drop animation to split the orders. It is minimal, clean and easy to use.

If you are working on a food delivery app, this animation design is a good springboard.

6. Animated Onboarding Screens

Designer: Cuberto

Highlights: Nice transition animations, striking color scheme, beautiful illustrations

This onboading screen design features a very nice transition animation. It uses a very cool overlapping transition effect to make sure that all the Onboarding screens are continuously presented to users for a better UX.

The combination of the beautiful color scheme and fashionable illustrations makes the onboarding screen really attractive.

7. Short Onboarding Animation

Designer: Lubos Volkov

Highlights: Zooming and fading transition effects, bright color scheme

This short onboading animation uses smooth zooming and fading transition effects to catch the viewers’ attention. On top off the beautiful and bright color scheme, this onboarding screen design is really intuitive, effectively attracting and engaging users.

Here’s a tip:

Optimize your app UI animation with one, two or more transition effects.

Transition effects, such as wiping, fading, dissolving, sliding, and zooming and more, is an easy way to add visual appeal.

8. Tesla Mobile App UI Design

Designer: uixNinja

Highlights: Wiping transition effect, icon navigation bar, and dark mode design

This app animation features a wiping transition effect, which goes from left to right. The left icon navigation bar and the trendy dark mode design also make this app UI stand out from the packs.

Moreover, to help other designers learn how to create their own animated UI designs step by step, the designer has shared a YouTube video tutorial. You’ve got all you need to make your own design!

9. Smart House Mobile App Animation

Designer: Outcrowd

Highlights: Wiping transition effect, icon sidebar

Like the Tesla mobile app UI design, this smart house mobile app animation also uses a wiping transition effect. But, it has a different style which starts from the two sides of the page and ends in the middle. The right sidebar also helps users navigate effectively.

However, in our opinions, to create a more intuitive and “obvious” icon sidebar, it would be great if a text label can be added below the icon to further explain it.

Here’s a tip:

Pair your icon buttons or icon bars with text labels to create more obvious app UIs

10. Bathroom Furniture App Animation

Designer: Yanosh

Highlights: Cool 3D effects

This furniture app animation comes with a cool 3D effect to showcase the details of its products.The overall effect is a captivating user experience.

Here’s a tip:

Create cool app UI animations with fascinating 3D effects

11. Mobile music app animation

Designer: Taras Migulko

Highlights: Mask sliding transition effect

This music app animation uses a gorgeous mask sliding transition effect to present the song cover image.The combination of text and video designs makes this music app is really attractive and functional.

Related article: 10 Best Music App Design in 2018 For Your Inspiration

12. Magazine Store App Animation

Designer: Dan Moss

Highlight: Fun Avatar animation, oil painting design style

This magazine store app animation uses a fun avatar animation to grasp users’ attention. The old-painting style Van Gogh illustration from Malika Favre and eye-catching colors put this app in a league of its own.

Here’s a tip: 

Optimize your app UI designs with fun micro-animations or micro-interactions.

For example, while designing a profile page, you can use an avatar animation or dynamic button/icon animation to attract users and improve user experience.

Related article: Micro Interaction Design: Create Micro Animations to Improve UX

13. Shoe Boxes Swiping Transition

Designer: Sang Nguyen 

This shoe shopping app uses a swiping transition effect to present the shoe boxes one by one. Users can easily click to choose their desired products and view the product details. This app design is clean, neat and user-friendly.

14. Food Recipe Mobile App Animation

Designer: Afterglow

Highlights: Smooth rotating transition effect

This recipe app uses a smooth rotating transition effect to showcase its dishes. The combination of proper text explanation and delicious dish images makes the app eye-catching - and the great user experience helps as well.

This is the perfect model if you are working on a food or recipe app.

Related article: 10 Latest and Best Food Mobile App UI Designs for Your Inspiration

15. Sport Activity Dashboard Application

Designer: Taras Migulko 

Highlights: Animated charts to visualize user data

This dashboard animation for a rent sport equipment app uses animated bar and line charts to show the dynamic user data in real-time. After entering the profile page, it is super easy for all app users to view and track their own activities, as well as that of their friends' activities.

Related article: Top 22 Free Dashboard Design Examples, Templates & UI Kits for You

16. Chat Bar Animation

Designer: Oleg Frolov

Unlike other chat bar designs which allows users to click to expand the chat menus up or down, this chat bar design uses a completely different strategy. Users can easily click to switch between different chat options for better communications.

Without a menu design expanding up/down, this char bar design does not occupy much interface space and is a perfect example for designers to create a minimalistic Android/iOS chat app.

Related article: 12 Best Chat UI Designs for Mobile Apps in 2019

17. Liquid Tab Bar Animation

Designer: Aaron lker 

Highlights: Liquid selection effect

This tab bar animation features a cool liquid selection effect. In combination with the changing colors, icons and text labels, this effect shows users clearly what they've selected.

Here’s a tip: 

Use cool selection effects to optimize your tab bar design

For example, you can try to add a dynamic effect (such as rotating, jumping, shaking, etc ), fluid effect, splashing effects and color changes to make your tab bar design different.

Use rich dynamic effects to make your tab bar designs stand out.

Use splashing and light effects to create a fascinating tab bar for your app.

18. Alternative Facebook Menu Animation

Designer: Cuberto

Highlights: Hidden menu, swipe-up transition effect

This menu animation is a perfect example of how to use a hidden bottom/top tap bar in an Android/iOS app. Users can easily click one button to expand the menus and switch to other app pages quickly.

To enhance user experience, also do not forget to add some text labels or reminders to let users know how to use the menu.

Realistically speaking, integrating this with the bottom/top bar of your mobile apps could present a problem. Do you have any ideas to deal with it? Let us know!

19. Bright App Card Animation

Designer: Anton Tkachev

Highlights: Sliding transition effect, intuitive card design

This shoe shopping app uses a sliding transition effect to present its products. The intuitive card designs help showcase the products clearly and make it easy for users to find details about the shoes so they can make their choice quickly.

The designer of this app also links to the related app UI kit. You can purchase it for further use, if necessary.

Related article: Best 15 Examples of Popular Card UI Design for Inspiration

20. Logo Animation with Cuckoo

Designer: Alex Gorbunov

Highlights: Lovely cuckoo animation

The cuckoo animation in the logo is a novel idea and is very catchy. If your app's logo has an animal character, consider using animation as it is an effective way to attract users. Compared to a static logo, an animated logo (with cute animals especially) is certainly more eye-catching, isn’t it?

Related article: 30 Creative and Cute Animal Logo Designs for Your Inspiration

21. Gravity Download Icon Animation

Designer: Oleg Frolov

Highlights: Gravity effect

This download icon button animation uses a distinctive gravity effect to attract users.

Like this animation, you can try a flying, jumping, fluid or rotating effect to optimize your icon button designs. Combine these effects with different wash-painting, brief-trick or Chinese ink design styles, your animated icon button would be completely different from the rest.

22. Avocado Loader Animation

Designer: Taras Migulko

Highlights: Cute avocado animation

This food website exemplifies creativity by using an avocado-like mascot as a loader. Users can spontaneously play with the mascot as the page loads, distracting them from the fact that time is passing.

This is a great example of how to distract users (in a good way) by allowing them to interact with elements of an app/website.

Here’s a tip: 

Use mascot loader animations to distract users from loading times

Adding the mascot to your loader animations can not only help distract users, and also help build brand image effectively.

23. Storytelling Progress Bar Animation

Designer: Cristina Vazquez

Highlights: Storytelling design

Storytelling app/website design is very trendy these days. This progress bar design follows this trend and tells a romantic story about a little cute bunny chasing the moon on a bright starry night.

It not only gives users the feedback about the app loading, but also offers them an enjoyable experience while waiting for the page to load.

And if the designer can add a number feedback, the user may feel even better while waiting.

Here’s a tip: 

Build storytelling progress bar or app UIs

This progress bar tells a story and leads users to complete a task while loading the app data. It helps enhance UX easily.

24. Circular Progress Bar

Designer: Chuhan Cao

In comparison with other horizontal progress bars, this circular progress bar is far more attractive to users. With changing numbers and colors, this progress bar is a gorgeous example for designers to engage users for a longer time when they have to wait.

25. Pumping Loading Animation

Designer: Allen Zhang

The designer got the idea for this design while he was pumping his bicycle. This is also another good example for you to create a storytelling loader.

Here’s a tip:

Good design ideas come from life

Use design ideas or stories from your daily life to improve your app UI.

26. Snail Loading Animation

Designer: Mowe

This loading animation uses eye-catching colors, trendy shapes, and a lovely little snail to create a brilliant design. It is good practice for designers to give users feedback when an app page loads very slowly. This way, the users know that something is happening and know that they’re not waiting for nothing.

27. Miniso Loading Animation

Designer: Nino Lekveishvili

This continuously spinning top animation is really eye-catching and helps reduce the negative emotions of users when they have to wait for a page to load.

28. Mobile App Rent A Boat

29. Mobile App Iceland Moss

30. Mobile App Craft Store

31. Mobile App Ecommerce

32. TimeKiller App Animation

33. Mobile App Delivery App

34. Music App Concept

35. App design Animation

Wrap Up

The use of UI animations is one of the most feasible shortcuts to improve your app designs quickly. We hope these latest app UI animation examples and design tips will help you create apps that will attract and retain users easily.

Free prototyping tool for web and mobile app design
Get Started for Free
Free prototyping tool for web and mobile app design
Get Started for Free
Free prototyping tool for web and mobile app design
Get Started for Free
What's Mockplus?
Mockplus RP

A free prototyping tool to create wireframes or interactive prototypes in minutes.

Mockplus DT

A free UI design tool to design, animate, collaborate and handoff right in the browser.

Free web & app prototyping tool
Create wireframes or highly interactive prototypes in just minutes.
No time limit Up to 10 users
Get started
No, thanks, i'm good.