Link to original text by Pablo Stanley

Make the contents of the TAB types slidable

  • A good dynamic effect fades content from one TAB to another;
  • Good motion allows content to move between tabs, showing continuity in transitions.

When you design interactions such as tabs or pop-up menus, try to correlate the location of the content with the action of opening it. This way, you can visually animate both your content and its location. It also includes a sliding gesture that allows you to switch between content.

A related element on a card

The card on the left opens a new page and slides up; The one on the right expands the card to fill the screen.

  • A good animation displays a page of information using a left swipe or up swipe;
  • Good animation makes a connection between two states that have common information.

When animating transitions between two different states, see if there are any elements in common between the two states, and if there are, you can animate the connection between them. In InVision Studio, when two linked pages have duplicate elements, when you create a Motion, the system automatically creates an associated animation between the two elements. This makes prototyping animation a breeze.

Use waterfall flow effects in content

The card on the left is shown by sliding and fading; The cards on the right are based on the same animation, with each card having a short delay.

  • As the card enters the screen, good animation changes its position and transparency;
  • Good animations spread elements from group to group quickly.

To achieve the waterfall effect, each animation element can be animated at the same speed and duration, and set a certain delay in order. To apply the waterfall flow form to a group, not to a single element. Keep the animation quick and brief, and in Google’s alert feature, each element appears no more than 20 milliseconds apart. Click on the waterfall flow form in the animation to see more examples.

Let content push away other elements

In the animation on the left, the animation goes directly over the other content. In the animation on the right, other content is pushed out as the animation expands.

  • Good animation moves and displays elements directly in the frame;
  • A good animation shows how the animation affects the elements around it.

Let the content interact with its surroundings. This means making content attract or drive away elements around it.

Make the menu appear from the button

On the left the menu slides in directly from below; The menu on the right expands from the button that opens it.

  • A good animated menu appears in the same direction as the button that opens it;
  • The excellent animation menu opens from the button that opens it.

Display different states with buttons

The animation on the left uses text to indicate state; The animation on the right uses buttons directly to show different states.

  • Good interaction displays activity status in text next to buttons;
  • A good interaction is to display different states directly with buttons.

Try displaying different states using the buttons themselves. For example: Rotating chrysanthemums or loading animations instead of CTA; Or add an animation to the background of the button to indicate progress. It’s up to you, but the key is to take advantage of the space that existing users are already interacting with. If you use button colors to confirm success status, it’s a big Easter egg for the user.

Direct the user’s attention to what’s important

The example on the left uses color and location to highlight elements; The image on the right uses a simple animation to grab the user’s attention.

  • Good design uses color, size, and location to highlight important things that need to be noticed and trigger user behavior.
  • Good design uses animation to direct the user’s attention to what is important without disturbing the user.

When the user needs to do something important, try to animate the buttons to attract the user’s attention. You can do simple, subtle animations and gradually increase the intensity, changing the size of the buttons, color, and speed of the animations depending on the importance of the action. Remember to only use animations for the most important actions, because the more animations you use, the less important and annoying it becomes.