Scroll into view not triggered on mobile, stays hidden

Design help Animations & Interactions
1

I have set “scroll into view” opacity interactions (fade) on elements on every section of the page. The interactions work smoothly on desktop/laptop. When I check out the published site on iPad, none of the elements would even show up in all the sections except on home section, tested on all 3 browsers. They also don’t show on mobile. Does anyone know if this is a bug or I did something wrong?

Check out the video. When I flip the iPad to portrait position, the interaction shows up. If I rotate the iPad back to horizontal, they disappeared. Weird.

Thanks!

Video link: - YouTube

Here is my read-only link: https://preview.webflow.com/preview/ypportfolio?utm_medium=preview_link&utm_source=designer&utm_content=ypportfolio&preview=389ac34a784e0e1845c3f76f5ad69dfb&mode=preview

2

Hi @chickeneggsituation!

I see on all of the interations outside of section-1 you have page appear to only trigger on Desktop and above as shown in the image below.

image
image1920×1080 522 KB

If you want them to to trigger on iPad you would need to select trigger on tablet as well.

If you need more help let me know!

Sean

3

Hi @DasSean,

Thank you so much for the quick reply!

I went back and checked those boxes. Published and checked again on iPad. Still not working. (I actually unchecked them earlier to test the issue. Forgot to re-check them.)

If you have a moment, please see the video I linked in the original post. When I flip the iPad, the elements show. They disappear again when the iPad is back in horizontal position.

Thank you!

4

So, I’ve read somewhere that it might have to do with scrollIntoView do not work on mobile devices anymore. I do not have a solution other than having custom codes.

I hope someone else can give a better solution for this.