# SOLVED: CSS Animation cannot be selectively removed from breakpoints

**URL:** <https://forum.bricksbuilder.io/t/solved-css-animation-cannot-be-selectively-removed-from-breakpoints/3293>\
**Category:** Bugs\
**Tags:** container\
**Created:** [June 1, 2022, 6:20pm UTC](https://forum.bricksbuilder.io/t/solved-css-animation-cannot-be-selectively-removed-from-breakpoints/3293 "2022-06-01T18:20:10Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![khan360](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/k/a6a055/32.png) [@khan360](https://forum.bricksbuilder.io/u/khan360)\
**Post date:** [June 1, 2022, 6:20pm UTC](https://forum.bricksbuilder.io/t/solved-css-animation-cannot-be-selectively-removed-from-breakpoints/3293/1 "2022-06-01T18:20:10Z")

</div>

**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.

Thanks.

---

<div class="post-metadata">

**Author:** ![Michael](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/michael/32/101_2.png) [@Michael](https://forum.bricksbuilder.io/u/Michael)\
**Post date:** [June 1, 2022, 7:13pm UTC](https://forum.bricksbuilder.io/t/solved-css-animation-cannot-be-selectively-removed-from-breakpoints/3293/2 "2022-06-01T19:13:38Z")

</div>

Hi @khan360

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:

> [@\[Entry Animation\] Not responsive to breakpoints?](https://forum.bricksbuilder.io/t/entry-animation-not-responsive-to-breakpoints/1285):
>
> 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…

There is an idea on the ideas board for motion effects that might be a little more usable:

> **[Your ideas and votes drive our development | Bricks Idea board](https://bricksbuilder.io/ideas/#3061)**
>
> Submit your feature request through our public idea board for others to upvote & comment on.

---

<div class="post-metadata">

**Author:** ![timmse](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/timmse/32/1192_2.png) [@timmse](https://forum.bricksbuilder.io/u/timmse)\
**Post date:** [June 2, 2022, 10:09am UTC](https://forum.bricksbuilder.io/t/solved-css-animation-cannot-be-selectively-removed-from-breakpoints/3293/3 "2022-06-02T10:09:38Z")

</div>

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.

Best regards,  
timmse

---

<div class="post-metadata">

**Author:** ![khan360](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/k/a6a055/32.png) [@khan360](https://forum.bricksbuilder.io/u/khan360)\
**Post date:** [June 4, 2022, 7:31pm UTC](https://forum.bricksbuilder.io/t/solved-css-animation-cannot-be-selectively-removed-from-breakpoints/3293/4 "2022-06-04T19:31:38Z")

</div>

Ok, thanks for the clarification guys.

---

<div class="post-metadata">

**Author:** ![sinanisler](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/sinanisler/32/34468_2.png) [@sinanisler](https://forum.bricksbuilder.io/u/sinanisler)\
**Post date:** [September 1, 2025, 10:43am UTC](https://forum.bricksbuilder.io/t/solved-css-animation-cannot-be-selectively-removed-from-breakpoints/3293/5 "2025-09-01T10:43:08Z")

</div>

will share this if anyone searches finds it.

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

```auto
<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>

```