Brief comments: This article introduces several practical tips for optimizing animation, from good to great is often reflected in the details.

Tabs Slide Content transition animation


  • Good animation will soften the page’s direct transitions.
  • But it’s better to use continuous animation to overdo the content

When designing interactive tabs or pop-up menus, try to relate the problem of the content to the action of opening it, so that we can not only achieve a great transition animation, but also have a clear view of the direct relationship between the different content. You can add swiping gestures if you like.

Connect the shared elements of the card


  • Good design uses swipes to the left or right to transition the content on the screen.
  • It is better to use shared elements to establish a direct relationship between the two states.

When animating between different states, we can start from shared elements to link different content. For example, the card on the right expands before the transition to form the post-transition card.

Use waterfall flow painting

The card on the left is displayed by sliding and fading. The cards on the right have the same animation, but each card has a short delay.
  • Good design changes the position and opacity of elements as they enter the screen.
  • A better design is to stagger the display of each element quickly and the effect will look better.

Different elements are associated with animations


  • Good design displays animation by moving in context.
  • Better animations are those that affect the surrounding elements as the content is displayed.

This design helps the user become aware of the elements surrounding the content.

Make the menu appear in context


  • Good design displays the menu where it is clicked.
  • A better animation would be for menu content to unfold from the point of click

Use button to display different states


  • Good interaction displays indicative content when a button is clicked.
  • Better interaction uses the buttons themselves to indicate different states.

Try using a container of buttons to provide visual feedback on the state.

Use animations to emphasize important points


  • Good design uses color, size, and location to highlight elements that the user needs to pay attention to.
  • Great designs use animation to focus on that important action without distraction.

The original:
Good to great UI animation tips


Recommended reading:
Images are loaded using SVG as the image placehold

Aurora Daily, aurora Developer’s media.

Read three English technical articles every day.