Streaming live at 10am (PST)

Webflow animation not working on mobile devices

I have one last bug stopping me from launching my site. On the splash page, I have an animation that works fine on desktop views but does not work at all on mobile devices.

Read-Only: https://preview.webflow.com/preview/userpay?utm_medium=preview_link&utm_source=dashboard&utm_content=userpay&preview=3f1fc5fb6ec240fd7fc547c3e4febc6c&mode=preview

The cards below the hero message scroll left to right, which is fine. Inside there are four cards that have a timed animation to expand and retract, using scale, opacity and move.

For some reason, the cards simply disappear on mobile devices both phone and ipad.

I tested to see if there is an issue with initial states on mobile, but that does not appear to be a factor.

I contacted Webflow support who originally thought the issue has to do with the containing element being absolute while the animation elements were static vs relative. I tested every variant of having the containing element be static/relative and all elements inside being static/relative, and again no change. The animating cards simply disappear.

This is the last thing stopping me from launching so I am hoping to get some guidance and make this work.

Thank you for your help.

Since the read-only does not show the animation, here is a link to my site:

https://www.userpay.io/

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.