Scroll animation not working on mobile

[Hector_Munoz_Huerta (Hector Muñoz Huerta)]

I have a scroll interaction that doesn’t work on mobile. It works fine on desktop (using device views on Google Chrome Inspect). I found out it kind of works on the current element if it’s centered and I zoom the phone in and then out. Strange kind of bug.

The interaction turns off the opacity of an image and turns on the opacity of another imagen when the container Div reaches 40%.

This is what it’s supposed to do (from Chrome’s inspect tool):

But it doesn’t (Motorola Phone):

This is the animation:

Here is the link

Obras

Here is the designer link
https://preview.webflow.com/preview/arqlabs?utm_medium=preview_link&utm_source=designer&utm_content=arqlabs&preview=ccc8b85a5ac289d2f5bb8b21475a9591&pageId=5fc1068a39e456474e1b3553&mode=preview

[new_work_city]

Hi @Hector_Munoz_Huerta

when u scroll down in the Interactions panel, you can specify on what devices the interaction is visible. In your case it it only shown on desktop. Just tick the other too and it will work on tablet and mobile.

[Hector_Munoz_Huerta (Hector Muñoz Huerta)]

Thanks a lot man but the trigger is actually checked on mobile!

I guess it has something to do with the phone browser not detecting the passing of the container DIV through the viewport because if you zoom in the image it kind of blinks doing the transition.

[Hector_Munoz_Huerta (Hector Muñoz Huerta)]

The first item on the scroll does appear on the animated state but the rest of the items dont react to the trigge.