# CMS filter animate

**URL:** <https://forum.finsweet.com/t/cms-filter-animate/6172>\
**Category:** Attributes\
**Created:** [October 6, 2025, 3:04pm UTC](https://forum.finsweet.com/t/cms-filter-animate/6172 "2025-10-06T15:04:37Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![gabriel.babus](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/gabriel.babus/32/935_2.png) [@gabriel.babus](https://forum.finsweet.com/u/gabriel.babus)\
**Post date:** [October 6, 2025, 3:04pm UTC](https://forum.finsweet.com/t/cms-filter-animate/6172/1 "2025-10-06T15:04:37Z")

</div>

Hi there, i’m having trouble understanding how to animate the transition when a filter is selected, say for example a radio button, and i’d like the transition to not snap, but rather have an opacity (200ms) for example

I’m looking at the **Animate the List** attribute, and i’m having trouble understanding how it works, and how I can customize the animation. I’m adding fs-list-filteringclass = “is-list-filtering” to the list element, but thats pretty much where I get stuck

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [October 6, 2025, 10:49pm UTC](https://forum.finsweet.com/t/cms-filter-animate/6172/2 "2025-10-06T22:49:26Z")

</div>

Hey @gabriel.babus!

The “snapping” effect could be happening if there’s no transition defined on the element that changes during filtering. You can fix that by targeting the `.is-list-filtering` class in your CSS and defining your animation.

For example:

```css
.is-list-filtering {
  pointer-events: none;
  opacity: 0.7;
  transition: all 0.2s ease-in-out;
}

```

This will give you a smooth 200ms fade between filter changes.

If you face any issues please share your read-only link!