Troubleshooting animation issues
If animations on your Framer site aren’t working, particularly with Ticker components or appear effects, the issue may stem from reduced motion settings on devices or browsers.
Check reduced motion settings
See also: reduced motion settings. Animations might not work if the “Reduced Motion” setting is enabled. To check and manage this:
Open your site settings, go to General, then Accessibility.
If “Reduced Motion” is active and the viewer’s device or browser has “prefer-reduced-motion” enabled, animations will be limited to opacity changes.
Device-specific settings
To adjust motion settings on various devices:
iOS: Navigate to Settings > Accessibility > Motion.
Android: Go to Settings > Accessibility > Remove Animations.
For more details about the “prefer-reduced-motion” setting, refer to this article.
Additional considerations
“Low Power Mode” on devices may also affect animations. Apple notes that enabling low power mode reduces screen brightness, limits animations, and prevents background app refreshes to save battery life.
Why aren't my animations working in Framer?
Animations might not work if the “Reduced Motion” setting is enabled. To check and manage this, open your site settings, go to General, then Accessibility. If “Reduced Motion” is active and the viewer’s device or browser has “prefer-reduced-motion” enabled, animations will be limited to opacity changes.
How do I adjust motion settings on my device to enable animations?
To adjust motion settings: On iOS, navigate to Settings > Accessibility > Motion. On Android, go to Settings > Accessibility > Remove Animations. These settings can affect how animations are displayed in Framer.
Can low power mode affect animations in Framer?
Yes, 'Low Power Mode' on devices may also affect animations. Apple notes that enabling low power mode reduces screen brightness, limits animations, and prevents background app refreshes to save battery life.
Updated