Animation fade-left bug on small screens

Hello! I found that when I use the animation on Scroll fade-left, on small screen devices before it is triggered it genrates a huge column that spans the entire height of the page untill the animation is triggered trigered. (Tehen the column goes away. I know I can just disable “run on mobile” but, as the fade-right work as it is supposed to I thought I would share this… Cheers!

Try putting an overflow:hidden (or overflow-hidden class) on the parent element

1 Like

There are some issues with some of the the animate on scroll library effects on mobile browsers. (aos is a third-party script that powers BSS animations).

Try adding the CSS rule overflow: hidden to the parent Container or Section. This has fixed the issue for me in the past.

1 Like

Hi. I just tried it and didn’t seem to work. Ill test some more tomorrow. I did find out though, that this only happens with elements that goes outside the visible area at the start of the animation. Just logging my finds here :smiley:

Yes, it happens with a number of animation effects that originate outside the body. Typically adding overflow: hidden to the parent container of your animated element will fix it. If you post the link to your website, I can try playing around with it.

1 Like

Right, yeah that works, I still don’t think it is ideal though. But thanks!

I’m not sure if this is an issue specific to using the aos library with Bootstrap, or a bug in the library itself, but I don’t think it’s a Bootstrap Studio bug. If you really want to pursue it, you can check to see if it’s a previously reported issue, or report it yourself.

AFAIC, it’s simple enough to just add the overflow: hidden; rule.

1 Like