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 
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