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 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.
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 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 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 shows one shape filling in another shape. The first shape is fully filled in by the second.
An overlay involves one shape sliding over the top of another shape of the same dimensions. It could be in a different color.
Cloning involves the gradual splitting of one shape and separation of it into two items that are replicas of the first.
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 is the sliding of one shape across another in a vertical direction.
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.