Take a Look at the 12 Principles of UX Motion

In coding, there are 12 major principles of motion that you can code in order to generate a fresh user experience. You may want to use one per section or one per page within a site. Too many of them could be visually overwhelming. The 12 include:

Easing

Easing moves an element into the center of an area. It stays there for a split second. The element then slowly leaves to the right of the viewing area.

Offset and Delay

One of the elements in the central viewing area is offset from the others. It leaves, followed by a delay in the others leaving from the viewing area.

Parenting

The parenting motion involves a large element and the arrival of a smaller element of the same shape. The smaller element grows until it reaches the size of the larger one.

Transformation

Transformation of a page element refers to the changing of shape and size. It can also refer to a change of color. A small circle could transform into a large rectangle.

Value Change

Value change shows numbers in motion. The numbers rapidly go up or down. They can be formatted as numbers or percents in order to show the change in a value.

Masking

Masking shows one shape filling in another shape. The first shape is fully filled in by the second.

Overlay

An overlay involves one shape sliding over the top of another shape of the same dimensions. It could be in a different color.

Cloning

Cloning involves the gradual splitting of one shape and separation of it into two items that are replicas of the first.

Obscuration

This type of visual movement involves moving one feature over another until the first one is fully obscured by the second one. You can code them in different colors in order to highlight the obscuration.

Paralax

Paralax is the sliding of one shape across another in a vertical direction.

Dimensionality

Dimensionality involves a partial rotation of the element in order to convey the feeling of three dimensions.

Dolly and Zoom

The view zooms in on one part of the element. For more information click here https://i.imgur.com/z4ckV9j.gifv.