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
