Bricks Version: 1.4 Browser: Firefox OS: Windows 10
If I apply a, let’s say, ‘Slide In’ animation on an element in desktop mode but in the mobile responsive mode I do not want it, so i enter the Mobile responsive mode and I click on the ‘x’ next to the animation name. But this acts as a global on/off switch which removes the animation from every break point, not just from mobile. Very surprising.
Could this be fixed in the next release? Because if the page is filled with these animations and you have to remove a bunch of them, not all, so selectively choosing them and custom coding to turn them off is a pain and a terrible UX decision.
Not sure if it was you i replied to a similar post in FB but Bricks uses animate.css library for providing the basic animations we have at the moment. I am not sure if it is due to animate.css or how Bricks have integrated it but currently, this is not possible so not really a bug.
It was me who brought it back up in November last year:
There is an idea on the ideas board for motion effects that might be a little more usable:
Hi khan,
Michael is right. It’s not possible because you can’t add or remove classes depending on the breakpoint. You can theoretically reset the animations with custom CSS within a media query, but not within the builder.
this js script deletes the bricks animation attributes and classes when the page loads.
use it for all site or for some pages change the breakpoint depending on your setup
<script>
// Set the breakpoint for mobile devices
const MOBILE_BREAKPOINT = 767;
// Function to remove data attributes and a specific class
const removeAttributesAndClass = () => {
// Check if the current window width is less than or equal to the breakpoint
if (window.innerWidth <= MOBILE_BREAKPOINT) {
// Select all DOM elements on the page
const allElements = document.querySelectorAll('*');
// Iterate over each element and remove the specified attributes and class
allElements.forEach(element => {
// Remove data attributes
if (element.hasAttribute('data-interactions')) {
element.removeAttribute('data-interactions');
}
if (element.hasAttribute('data-interaction-id')) {
element.removeAttribute('data-interaction-id');
}
if (element.hasAttribute('data-interaction-hidden-on-load')) {
element.removeAttribute('data-interaction-hidden-on-load');
}
// Remove the class if it exists
if (element.classList.contains('brx-animated')) {
element.classList.remove('brx-animated');
}
});
}
};
// Listen for the DOMContentLoaded event to ensure the DOM is ready
document.addEventListener('DOMContentLoaded', () => {
removeAttributesAndClass();
});
// Also listen for the resize event to handle changes in window size
window.addEventListener('resize', () => {
removeAttributesAndClass();
});
</script>