Animated interface elements reveal the process and functionality of a UI much better than static text. They enhance user experience and help guide user flow. Like any other element of good design, UI animations should have a purpose. They should be functional without being overly flashy.
Note If you’re on a slow connection, give a few seconds for the GIFs to load.
1. Menu open / tick / close
2. Download / save
3. Play / pause
4. Search bar
5. Menu open / close
6. Responsive icons
7. Sound on / off
8. Sending mail
9. Menu open / close
10. Favourite
11. Recording Audio
12. Cloud download / done
13. Menu open / close
14. Responsive design
15. New Message
16. Pull down / refresh
17. Menu open / close
18. Refresh
19. Save
20. Search / back
21. Menu / more / close / back
22. Back / close
23. Upload / complete
24. Attaching file
25. Dotted menu open / close
26. Message sent
27. New mail
28. Shortlist
29. Menu open / close
30. Music app intro animations
31. Search / loading
32. Radial menu
33. EatStreet loading animation
34. Firefox logo
35. In-app animations
36. Weather icons
Our favourites: no. 7, 18 and 32. What about you? Share this post with a fellow designer and voice your views in the comments below.
Vennila Marimuthu 