I have some fade up animations on some elements. The problem is anything below the first visible elements properly works but the elements that are below the visible area just stays invisible the whole time, even after scrolling.
Will be easier for someone to help you if you provide a link to the live site or test site.
Gut reaction… a js conflict. Do you have any other javascript components on the page. Has it been doing this since you started the build, or did it work at one point and then stop working. Can you recreate the problem on a new, blank website. Sometimes you have to experiment like Sherlock Holmes to find the point in the process where things “broke down.”
I found the problem. I had overflow-x set to hidden in html,body and that wouldnt let the animation load. I had it in the first place because there was a white space on the right of the screen and it was because bootstrap studio has a default -15 px margin on it’s row for somereason.
It’s not Bootstrap Studio that has a default -15 px margin (gutter) on rows. The “some reason” is that Bootstrap itself is designed this way deliberately. Rows are meant to contain Columns, and Columns have horizontal padding by default. This is all part of the grid system to ensure all the content in your columns is visually aligned down the left side.
In BSS, if you don’t want the -15px gutters on the Rows, you can disable them by clicking on the Row, going to the Options panel, and switching Gutters to “off.”
But the Bootstrap grid system is designed this way for a reason…
Also, make sure that the white space you were seeing wasn’t a scrollbar in the browser. If that happens, it’s not that default row margin doing it then, it’s that your code had something wrong with a margin somewhere and turning off the gutter just “happened” to fix it out of chance. Just food for thought there in case that was the issue.