The built-in "Fade" Scroll Into View interaction in Webflow does work on mobile devices, but it may behave differently due to how mobile browsers handle scrolling and animations.
1. Check Interaction Settings
- Go to the Interactions panel and select the Element Trigger called "While scrolling into view."
- Ensure the Action (e.g., Fade In) is properly configured and not limited to specific viewport widths.
- Under Affect, make sure you're applying the action to the correct element: ‘Selected element’ or classes as needed.
2. Confirm the Display Property
- The element must be visible in the layout, even if opacity is set to 0 initially.
- Avoid using Display: None as it can prevent interactions from being triggered when the element scrolls into view.
3. Test on Actual Mobile Device
- Use Webflow’s Preview mode and your browser’s Device Preview, but always verify on a real mobile device.
- Mobile browsers may delay or suppress scroll events or animations to optimize performance.
4. Check Motion Preferences
- Some mobile users have reduced motion settings enabled in their OS, which can suppress animations.
- Webflow respects these settings, and the animation may not play to honor accessibility preferences.
5. Avoid Fixed or Overflow Issues
- A parent container with overflow: scroll/hidden or position: fixed can interfere with scroll detection.
- Make sure the target element’s parent containers allow normal flow-based scrolling.
6. Confirm Page Structure and Position
- Scroll-based interactions trigger relative to when an element enters the viewport.
- If your element is too close to the top or bottom of the page at load time (especially on mobile), the scroll trigger may not get activated.
Summary
The built-in Fade Scroll Into View interaction works on mobile, but correct configuration, page layout, and testing on an actual device are essential to ensure consistent performance.