The 12 Principles of UX in Motion

As part of my undergraduate degree in Website design and Development, we looked at the 12 Principles of UX in Motion.

After researching each principle, I recreated the examples in HTML, CSS and JS using Codepen.

• Easing and Offset & Delay relate to timing.
• Parenting relates to object relationship.
• Transformation, Value Change, Masking, Overlay, and Cloning all relate to object continuity.
• Parallax relate to temporal hierarchy.
• Obscuration, Dimensionality and Dolly & Zoom both relate to spatial continuity.