Troubleshooting Animation Issues

If you're experiencing problems with animations not working on your Framer site, particularly with ticker components or appear effects, the issue might be related to the "Reduced Motion" settings on specific devices or browsers.

Check Reduced Motion Settings

The animation might not be functioning because the "Reduced Motion" setting is activated. To verify and manage this setting:

  1. Navigate to the settings of your site, select General, and then Accessibility.

  2. If "Reduced Motion" is enabled on your site and the viewer’s device or browser also has the "prefer-reduced-motion" setting enabled, the site will only animate opacity changes.

Device-specific Settings

To access and adjust motion settings on different devices:

  • iOS: Go to Settings > Accessibility > Motion.

  • Android: Head to Settings > Accessibility > Remove Animations.

For further understanding of the "prefer-reduced-motion" setting, consider reading this detailed article.

Additional Considerations

Be aware that activating "Low Power Mode" on devices might also impact animations. According to Apple, "Low Power Mode reduces screen brightness, limits animations, and prevents apps from refreshing in the background to conserve battery life".