Take a Look at the 12 Principles of UX Motion

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.

UX Motion