Some of the UI animation tips
Good to Greate UI animation tips.
In this blog, we’re going to see some of the examples of UI animations going from good to greater. With a little bit of twitching here and there, you can elevate your UI patterns with animations.
1. Make the content in tabs slide
The content on the left fades in and out. The one on the right slides with the tabs.
- A good animation fades the content in and out from one state to another state.
- A great animation shows continuity in a transition by making the content move between states. You can clearly differentiate the good and great transition.
2. Bring attention to something important
The example on the left uses color and position to make an element stand out. The one on the right uses subtle animation to call the user’s attention.
- Good design uses color. size, and position to highlight an important action the user needs to notice or act upon.
- The great design uses animation to bring attention to that important action, without being disrupted.
3. Use buttons to show different states
The button on the left shows text indicating states. The button on the right uses the container to show different events.
- Good interactions display the events next to the button.
- Great interactions use the button itself to show the different states.
4. Make the content push other elements out of the way
The animation on the left animates on top of the other content. The animation on the right pushes the content out as it grows.
- Good animations move and show elements in context.
- Great animations show elements affecting their surroundings when they change.
5. Use a cascading effect in your content
The cards on the left appear by sliding and fading in. The ones on the right feature the same animation, but each card has a short delay.
- A good animation changes the position and opacity of the material when it enters the screen.
- A great animation quickly staggers the appearance of each group or element.
6. Connect the shared element of a card
The content on the left opens a new screen that slides up. The card on the right expands and fills the screen.
- A good animation uses transitions like push left or slide up to show the content on a details screen.
- A great animation establishes a connection between two states by animating the shared content.
