Animations displaying on mobile

Bootstrap Studio Help
1

I used the scrolled animations, and i expected them not to play on mobile screen (as written in the boottrap information page) but they actually do.

I’ve tried adding this css:

@media only screen and (max-width : 768px) {
.animated {
/CSS transitions/
-o-transition-property: none !important;
-moz-transition-property: none !important;
-ms-transition-property: none !important;
-webkit-transition-property: none !important;
transition-property: none !important;
/CSS transforms/
-o-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-webkit-transform: none !important;
transform: none !important;
/CSS animations/
-webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
}
}

But it doesnt seem to work. Any ideas?

2

Can you share your website that has this on it, or publish your design on the BSS server and users might help to debug

3

  1. The Docs for BSS are not up to date. Older versions of BSS did not support animation on scroll on mobile devices because years ago mobile devices were often too underpowered to display smooth animations. The developers reconsidered this (IIRC) about 8 months ago and enabled animation on mobile in one of the updates. (They are notorious for not updating the documentation.) Also, I notice you are using max-width media queries. Are you working in Bootstrap 3?

  2. As I recall, the CSS for the animation library built into BSS is loaded via CDN. You’d probably need to download a local version of the CSS file, disable the CDN, and make your edits to the local CSS.

4

In older versions of Bootstrap Studio animations didn’t use to run on mobile devices but due to popular demand (and phones not struggling with animations any more) we enabled them. We will add a switch for enabling/disabling specific animations on mobile in one of our next releases.

1 Like