36 Brilliant User Interface Animations

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.

Today’s post showcases 36 slick UI elements with smooth, creative transitions that are a joy to watch. A lot of work goes into these split-second animations and their detailing and ‘bounce’ is commendable. Check them out below.

 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

SEE MORE …

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.