Checklist When Effects Don't Work

1. Check Scroll Variant Settings

First, make sure the Scroll Variant effect is set to ‘Section in View’ on the site. When using this option, the Section must have a name for the effect to work properly.

If the Section doesn't have a name, add one, then Publish the project again and check if the effect works.

2. Check Accessibility and Motion Reduction Settings

If accessibility options are enabled on the site and motion reduction is enabled on the user’s device, the effects may not work as intended.

This means that if “prefer-reduced-motion” is enabled in the user's browser or device, intended actions might be limited, and animations will only apply to opacity.

3. Check Low Power Mode on Device

If Low Power Mode is enabled on the device being used, some animations may be disabled or restricted. In such cases, try turning off Low Power Mode on the device and check again.

If you've checked all the above and the issue persists, you can contact support through Framer's Contact Page for assistance.

Frequently Asked Questions (FAQ)

Q. Is there a setting to start an animation before a specific Section comes into view?

• Yes. By adjusting the Offset value of Scroll Variant, you can set the animation to start before the Section is fully visible.

Q. Can I use the Section in View trigger for Sections inside a component?

• No. The Section trigger only detects the actual Section layers on the page. Sections inside a component are not detected because they are not recognized as independent areas in the page structure.

Q. What happens if multiple animations are applied to one Variant?

• When styles set in one Variant overlap with styles from another Variant, unintended movements may occur during browser rendering, especially when Auto Layout properties or height/width changes overlap.

This article is an adaptation of Framer's official blog content titled ‘Why aren't the effects in my project functioning’.