Page Scroll Animations vary on different Devices

On the desktop view the page scrolling animation works well but going to the mobile view the timings need to be adjusted as the page is longer and the animations start too late.

Is there any work around to fixing this as there’s no option to adjust the animations for different devices?


Here is my public share link: LINK
(how to access public share link)

1 Like

Hi there,

To manage animations on mobile devices in Webflow, you have two options:

To disable animations on mobile:

  1. Open the Interactions panel
  2. Select your animation
  3. Click the Settings gear icon
  4. Under “Device Settings,” uncheck the mobile device option

To optimize animations for mobile:

  1. Open the Interactions panel
  2. Select your animation
  3. Adjust the scroll offset to 20% in the timeline settings
  4. Set the trigger point to “When element is visible”
  5. Fine-tune the animation boundaries using the timeline slider

These adjustments will help create a smoother experience for mobile users while maintaining your desired animation effects.

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

I’m using ‘While Page is Scrolling / On Scroll / Play Scroll Animation’, there is no such setting ‘Scroll Offset’ in the timeline settings?

I believe you are talking about ‘Page Scrolled’ as this is where the ‘Offset’ setting is.

No idea how to find what the ‘.your-animation-class’ is!? Also I believe you’re talking about adjusting the individual elements of the animation, this would be incredibly time consuming if so and not practical.

Here’s the screenshot of ‘While Page is Scrolling’ animation:

1 Like