Animation and interactivity
Page elements that move should support the user’s need to get information or do a task. Motion attracts the user’s attention so use motion with caution. Animations should not make understanding information harder for people with motion sensitivity.
Avoid flashing elements. They can affect people who are photosensitive and may experience seizures. If you must use a flashing element, it must not flash more than 3 times per second.
Avoid using auto-play for videos. If you can’t avoid auto-play, let users pause, stop, or hide the videos. For full detail about video, visit the Video component.
When not to use
Avoid unnecessary motion. It could distract the user or slow down the user from completing a task.Types of animation, interactivity, and motion
Parallax effects
Different elements of a page can move at different speeds when the user scrolls. This is the parallax effect. It creates the illusion of depth on a page.
When using parallax effects:
Keep it subtle.
- Use it minimally.
- Disable the effect on mobile devices.
- Ensure content remains accessible and easy to read.
- Give users the option to turn off the effect, when possible.
- Be aware of design gaps that cause the user to think they are at the end of a page. This belief that the users has seen all the content and doesn’t need to scroll further is call a “false floor.”
Microinteractions
Microinteractions give feedback to the user through small changes to an interactive element. They make digital products intuitive and easy to understand.
An example of a microinteraction is when a mobile menu slides in from the side of the screen.