Some users experience negative reactions to animations and motion effects on websites. People with vestibular disorders can be negatively impacted by animations, so they disable them on their devices. Our Page Builder respects these preferences to ensure all users have a comfortable browsing experience.
Checking Your Animation Settings
If you’re experiencing issues with animations in Page Builder, we’ve created a diagnostic tool to help identify the cause. You can visit our animation check page to see your current browser setting.
Creating the Animation Check Tool
To check your current animation settings, you’ll need to create a simple diagnostic tool on your site. This requires adding a code snippet to your WordPress installation.
Step 1: Install Code Snippets Plugin
First, install and activate the Code Snippets plugin from https://wordpress.org/plugins/code-snippets/
Step 2: Add the Animation Check Code
- Navigate to Snippets > Add New in your WordPress admin
- Give your snippet a title like “Animation Check Shortcode”
- Copy and paste the above code into the code editor:
- Set the snippet to “Run snippet everywhere”
- Save and activate the snippet
Step 3: Create a Test Page
- Create a new page or post
- Add the shortcode
[so_check_reduced_motion]where you want the check to appear - Publish or preview the page
What You’ll See
When you visit the page, you’ll see one of two messages:
- “You have animations enabled. You should be seeing them.” – This means your device is set to show animations. If you’re not seeing animations despite this message, there may be another issue we can help troubleshoot.
- “You have reduced motion enabled.” – This means your device has animations turned off at the system level.
How to Enable or Disable Animations
The animation preference is controlled by your operating system settings, not by individual websites. Here’s how to change this setting on different devices:
Windows 10/11
- Open Settings
- Navigate to Ease of Access (Windows 10) or Accessibility (Windows 11)
- Select Display
- Toggle “Show animations in Windows” on or off
macOS
- Open System Preferences
- Click Accessibility
- Select Display in the sidebar
- Check or uncheck “Reduce motion”
iOS
- Open Settings
- Tap Accessibility
- Select Motion
- Toggle “Reduce Motion” on or off
Android
- Open Settings
- Navigate to Accessibility
- Look for “Remove animations” or similar option (varies by device)
- Toggle the setting on or off
Ubuntu/Linux
- Open Settings
- Navigate to Accessibility
- Look for “Reduce animation” or “Animations” setting
- Toggle as needed
Why This Matters
Respecting reduced motion preferences is important for accessibility. People with vestibular disorders need control over movement triggered by interactions. Non-essential movement can trigger vestibular disorder reactions including distraction, dizziness, headaches and nausea.
By honoring these preferences, we ensure that:
- Users who need reduced motion can browse comfortably
- Users who enjoy animations can experience the full design
- Our sites remain accessible to all visitors
- We comply with accessibility best practices
Troubleshooting
If you have animations enabled but aren’t seeing them:
- Check that your browser is up to date
- Ensure JavaScript is enabled
- Try clearing your browser cache
- Check if any browser extensions might be blocking animations
If animations are still not working as expected after checking these items, please contact our support team for assistance.
Additional Resources
For more technical information about the prefers-reduced-motion CSS media feature, visit the MDN Web Docs page on this topic.