CMS filter animate

Attributes
1

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

2

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:

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

1 Like