Scrolling Text Effect Issues on Safari & Mobile

Design help General
1

Hello everyone,

I’m trying to create an effect where text appears and disappears as I scroll, while staying in the same position.

To explain further: there are five text elements. When I open the page and start scrolling, the first text fades in (opacity increases), then fades out while remaining in place. This continues for each text element in sequence.

I’m using the following effect:
Page Trigger → While Page is Scrolling → Change the opacity of the texts based on their position on the page.

The issue is that when I set specific values in Webflow, everything looks fine in the editor, but once I publish it, it appears incorrectly on Safari and mobile.

I thought this would be a quick fix, but it’s taking hours! :sweat_smile:

Additionally, for some reason, the background (applied to the body) scrolls on mobile, even though it’s correctly fixed on the desktop version.

If you have any tips, I’d really appreciate your advice.

Many thanks in advance!

Here is my site Read-Only: Webflow - SuperHumans-Website

2

Hi there,

For scroll-triggered text animations in Webflow, here’s how to set it up:

  1. Create a scroll animation timeline for your text element
  2. Add opacity actions at different scroll positions
  3. Set the initial opacity to 0%
  4. Add a keyframe where you want the text to appear and set opacity to 100%
  5. Add another keyframe where you want the text to fade out and set opacity back to 0%

For the fixed background issue on mobile devices, you can resolve this by applying “overflow: hidden” to the container element. Additionally, check your animation settings under the Device-specific Animations panel to disable animations on mobile devices if they’re causing performance issues.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.