on 6 Jan, 2014 by mosaicpro1 comments 8 months ago
CORAL: How to disable animations
To disable animations, you have to remove all references to the following files:
You can remove the reference to animations.init.js directly from the HTML markup. Open the HTML file in any text editor and find the reference in the footer and remove it. Look for a script tag with the following src attribute:
To remove the references to animations.less and animate.min.css, you have to work with the provided LESS files.
The page's main LESS file
1. Open the page main LESS file, the one that imports all the styling components used on the page, e.g. for the index page, fluid layout and sidebar fusion type, you have the following file:
Open the file in any text editor, and you will see all the imports required on the page, including the two references e.g.
/* --- LOADING [less.animations] from assets/components/core/less/animations.less */
/* --- LOADING [css.animate.min] from assets/components/library/animate/animate.min.css */
2. After identifying the two references, simply remove both.
Converting LESS to CSS
3. Now, you have to compile the modified LESS file into a new minified CSS that you will use for the page.
For that, you have two options:
1. use the less.min.js (that is commented out in each html demo page within the package) – its basically a browser compiler for LESS – you don’t have to do anything for this to work, just have it loaded correctly, AFTER the LESS file.
2. use a compiler APP (like WinLESS on windows or LESS.App on MAC), select the modified LESS file that has all the imports (and you just modified with the colors) and regenerate a min.css file (its really just a matter of hitting a Compile button) – you can also set these Apps to recompile the CSS automatically when it detects any change in the LESS files – with this option you don’t need less.min.js anymore.
For development, we recommend the 1st option and for production the 2nd option – but really, there are many ways to automate and improve the workflow – this is just an example.
Important: you have to do this for every page you want to remove the animations from, as every page is using different resources and has it’s own main LESS file that imports the resources.