Guys, I have another question about the animation when viewed in mobile, it is not showing or maybe it is very fast so it doesn't show. I tried putting some delays but still the section just comes out without any animation. And also how can we add custom animations like for example square tiles flipping to show the image. Then the text on it will come out rolling each letters. Hope someone can help me again with this. Thanks in advance.
A good practice is to keep animations disabled on mobiles.
And that was a sane default BSS used.
Search the forum, that issue (and solutions) had been discussed man
@Zaldy08
BSS studio disables animations by default at mobile (XS) screen size. They considered it a poor user experience. Not everyone agrees. I believe this is the key piece of the js that controls it. I'm not a JS expert, but I presume it could edited and replaced so it would allow animation on mobile (though you'd have to replace the library every time you exported your website)
var isDisabled = function isDisabled(optionDisable) {
return optionDisable === true || optionDisable === 'mobile' && _detector2.default.mobile() || optionDisable === 'phone' && _detector2.default.phone() || optionDisable === 'tablet' && _detector2.default.tablet() || typeof optionDisable === 'function' && optionDisable() === true;
};
The other option would be to simply not use BSS built in animation, and go directly to the source, which you can install via CDN, and then just add the classes manually. https://michalsnik.github.io/aos/
There are numerous alternative animation libraries out there as well, some arguably much better and more powerful.
@marrco
Not so sure I agree with that thinking anymore. Maybe on mobile devices from five years ago, but today's modern phones are more than capable of handling simple animation effect. The question of whether it's user-friendly is a separate one, and something that should be up to the website designer themselves.
I think mobile should have the same options to disable/enable at different breakpoints as other BSS components. Certainly wouldn't be hard for the devs to implement this.
Thanks Printninja, yes, I went throughs the old threads, mostly they say it is disabled and not a good practice but yeah I agree with you that this feature needs to be updated now a days.
The code you included, how can I use it? I'm also not expert in codes.
Also just to let you know, our website was in Wordpress before and I just re-created it in BSS, but my boss still wants the same animation as the Wordpress does. It actually uses a slider called Slider Revolution, maybe I can also add it to BSS or any other JS that gives the same animation. Please if you can help me set it up? Thanks in advance.
The code I posted was just the result of a quick investigation into the javascript that powers the Animate On Scroll library. I'm not an expert javascript coder, so I don't really know how to modify it to make it active on mobile, but if you forgo the built-in animation features of BSS and use the Animate On Scroll library directly, it will work on mobile. This is the link to the the site, which has instructions for installation and usage.
https://michalsnik.github.io/aos/
You can add easily add external javascript libraries to BSS by following this tutorial https://bootstrapstudio.io/tutorials/linking-external-js Adding external javascripts, plug-ins, widgets, etc, is kind of part and parcel of the web development process. It's something you need to know to build websites for a living. It took me years to learn all the ins and outs, and I'm sorry, but I'm not a teacher. There are tons of web resources and YouTube vids on how to do this sort of stuff though.
Revolution Slider is a popular Wordpress plug-in sold by this company... https://www.themepunch.com/#products
They appear to have a jquery version which is probably for non-wordpress sites (like the kind BSS create.) You could buy that version, install the script and then recreate the effects from your old Wordpress site on your new Bootstrap Studio site. This would typically be done by applying different slider classes to the components in question via the Attributes panel.
There are also other free animation libraries that can do what Revolution Slider does. You can investigate those. For example, https://animejs.com/ https://greensock.com/gsap/ https://popmotion.io/pure/
You can also do a lot of animations via pure CSS using transition, transforms, and CSS animation, all of which is free and fully supported by BSS. https://www.w3schools.com/css/css3_animations.asp
But there are learning curves attached to all these things. I'm sorry. I know simply posting links to stuff isn't what you want, but I don't have a 1-2-3 set of instructions to give you to solve your problem. I don't even know what your old website (or the animations on it) looked like. Do you have a link you can post?
Super thanks for all these links Printninja, I really appreciate it and I will try to understand and learn how to use it. I also understand that you're not a teacher and these things cannot be learned immediately. The old wordpress website is down now so I cannot show you have it was before. Anyway, let me check and try these links first. Thanks again bro.