Bricks Version: 1.3.5 Browser: Chrome 94 OS: Windows 11
Hey chaps,
Not sure if this is a bug or a feature improvement.
But I am unable to change the animation for mobile as it also changes it for desktop too.
With how a user views a site is different. For example on a desktop you generally read side to side (LTR or RTL) and mobile is usually downwards. Having to use the same animation for both does not allow for the use of animations as animations do not suit all.
For example, for desktop, you can have animations coming from the side (slide left, slide right etc.) but they look pretty awful for mobile which is probably better to have a slide in or slide up.
Again not sure if it is a bug where you are not able to choose or if it is a feature request/improvement to add this capability.
you are right: you cannot change the entry animations per breakpoint. Bricks use animate.css, so the animation classes are added directly to the element.
Example (I removed the unnecessary stuff):
<div data-animation="fadeInLeft" class="bricks-animated fadeInLeft">
<h3 class="bricks-heading">I am a heading</h3>
</div>
As you can see the h3 wrapper has a data-animation=“fadeInLeft” and the classes .bricks-animated and .fadeInLeft. .fadeInLeft makes the element always fade in from the left, no matter how big or small the viewport is.
With CSS alone it is not possible to change the classes depending on the viewport width, but only to override them. But that would probably lead to a huge mess if .fadeInLeft suddenly comes from below
By the way: that’s probably why I have 90% of my entry animations coming from the bottom… because it always works
this js script deletes the bricks animation attributes and classes when the page loads for set breakpoint
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>
