Multi Filter Setup

Live Preview

Documentation

Webflow

Code

Setup: External Scripts

HTML

Copy

Step 1: Copy structure to Webflow

Copy to Webflow

Webflow structure is not required for this resource.

Step 1: Add HTML

HTML

Copy


<div role="group" data-multi-filter-group="" class="filter-group">
  <div class="filter-buttons">
    <button data-filter-target="all" data-filter-status="active" aria-pressed="true" aria-controls="filter-list" class="filter-btn">All</button>
    <button data-filter-target="mammals" data-filter-status="not-active" aria-pressed="false" aria-controls="filter-list" class="filter-btn">Mammals</button>
    <button data-filter-target="birds" data-filter-status="not-active" aria-pressed="false" aria-controls="filter-list" class="filter-btn">Birds</button>
    <button data-filter-target="aquatic" data-filter-status="not-active" aria-pressed="false" aria-controls="filter-list" class="filter-btn">Aquatic</button>
    <button data-filter-target="reptiles" data-filter-status="not-active" aria-pressed="false" aria-controls="filter-list" class="filter-btn">Reptiles</button>
    <button data-filter-target="reset" data-filter-status="not-active" aria-pressed="false" aria-controls="filter-list" class="reset-btn">Reset</button>
  </div>
  <div aria-live="polite" role="list" class="filter-list">
    <div role="listitem" data-filter-name="birds" data-filter-status="active" class="filter-list__item">
      <div class="demo-card">
        <div class="demo-card__top">
          <div class="demo-card__visual">
            <div class="demo-card__visual-before"></div><span class="demo-card__emoji">🦩</span>
          </div>
        </div>
        <div class="demo-card__bottom">
          <h3 class="demo-card__h3">Flamingo</h3>
        </div>
      </div>
    </div>
    <div role="listitem" data-filter-name="reptiles aquatic" data-filter-status="active" class="filter-list__item">
      <div class="demo-card">
        <div class="demo-card__top">
          <div class="demo-card__visual">
            <div class="demo-card__visual-before"></div><span class="demo-card__emoji">🐢</span>
          </div>
        </div>
        <div class="demo-card__bottom">
          <h3 class="demo-card__h3">Turtle</h3>
        </div>
      </div>
    </div>
    <div role="listitem" data-filter-name="mammals" data-filter-status="active" class="filter-list__item">
      <div class="demo-card">
        <div class="demo-card__top">
          <div class="demo-card__visual">
            <div class="demo-card__visual-before"></div><span class="demo-card__emoji">🐕</span>
          </div>
        </div>
        <div class="demo-card__bottom">
          <h3 class="demo-card__h3">Dog</h3>
        </div>
      </div>
    </div>
    <div role="listitem" data-filter-name="mammals aquatic" data-filter-status="active" class="filter-list__item">
      <div class="demo-card">
        <div class="demo-card__top">
          <div class="demo-card__visual">
            <div class="demo-card__visual-before"></div><span class="demo-card__emoji">🐬</span>
          </div>
        </div>
        <div class="demo-card__bottom">
          <h3 class="demo-card__h3">Dolphin</h3>
        </div>
      </div>
    </div>
    <div role="listitem" data-filter-name="birds" data-filter-status="active" class="filter-list__item">
      <div class="demo-card">
        <div class="demo-card__top">
          <div class="demo-card__visual">
            <div class="demo-card__visual-before"></div><span class="demo-card__emoji">🦅</span>
          </div>
        </div>
        <div class="demo-card__bottom">
          <h3 class="demo-card__h3">Eagle</h3>
        </div>
      </div>
    </div>
    <div role="listitem" data-filter-name="mammals" data-filter-status="active" class="filter-list__item">
      <div class="demo-card">
        <div class="demo-card__top">
          <div class="demo-card__visual">
            <div class="demo-card__visual-before"></div><span class="demo-card__emoji">🐈</span>
          </div>
        </div>
        <div class="demo-card__bottom">
          <h3 class="demo-card__h3">Cat</h3>
        </div>
      </div>
    </div>
    <div role="listitem" data-filter-name="birds" data-filter-status="active" class="filter-list__item">
      <div class="demo-card">
        <div class="demo-card__top">
          <div class="demo-card__visual">
            <div class="demo-card__visual-before"></div><span class="demo-card__emoji">🦉</span>
          </div>
        </div>
        <div class="demo-card__bottom">
          <h3 class="demo-card__h3">Owl</h3>
        </div>
      </div>
    </div>
    <div role="listitem" data-filter-name="aquatic" data-filter-status="active" class="filter-list__item">
      <div class="demo-card">
        <div class="demo-card__top">
          <div class="demo-card__visual">
            <div class="demo-card__visual-before"></div><span class="demo-card__emoji">🐠</span>
          </div>
        </div>
        <div class="demo-card__bottom">
          <h3 class="demo-card__h3">Fish</h3>
        </div>
      </div>
    </div>
    <div role="listitem" data-filter-name="reptiles" data-filter-status="active" class="filter-list__item">
      <div class="demo-card">
        <div class="demo-card__top">
          <div class="demo-card__visual">
            <div class="demo-card__visual-before"></div><span class="demo-card__emoji">🦎</span>
          </div>
        </div>
        <div class="demo-card__bottom">
          <h3 class="demo-card__h3">Lizard</h3>
        </div>
      </div>
    </div>
    <div role="listitem" data-filter-name="mammals aquatic" data-filter-status="active" class="filter-list__item">
      <div class="demo-card">
        <div class="demo-card__top">
          <div class="demo-card__visual">
            <div class="demo-card__visual-before"></div><span class="demo-card__emoji">🐋</span>
          </div>
        </div>
        <div class="demo-card__bottom">
          <h3 class="demo-card__h3">Whale</h3>
        </div>
      </div>
    </div>
    <div role="listitem" data-filter-name="birds" data-filter-status="active" class="filter-list__item">
      <div class="demo-card">
        <div class="demo-card__top">
          <div class="demo-card__visual">
            <div class="demo-card__visual-before"></div><span class="demo-card__emoji">🦢</span>
          </div>
        </div>
        <div class="demo-card__bottom">
          <h3 class="demo-card__h3">Swan</h3>
        </div>
      </div>
    </div>
    <div role="listitem" data-filter-name="reptiles" data-filter-status="active" class="filter-list__item">
      <div class="demo-card">
        <div class="demo-card__top">
          <div class="demo-card__visual">
            <div class="demo-card__visual-before"></div><span class="demo-card__emoji">🐍</span>
          </div>
        </div>
        <div class="demo-card__bottom">
          <h3 class="demo-card__h3">Snake</h3>
        </div>
      </div>
    </div>
  </div>
</div>

HTML structure is not required for this resource.

Step 2: Add CSS

CSS

Copy

.filter-group {
  min-height: 100vh;
  padding-bottom: 10em;
}

/* Filter Buttons */
.filter-buttons {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  flex-flow: wrap;
  justify-content: flex-start;
  padding: 1em 1em 3em;
  display: flex;
}

.filter-btn {
  -webkit-appearance: none;
  appearance: none;
  background-color: #efeeec;
  border-radius: 10em;
  padding: .65em 1.25em;
  font-size: 1.5em;
  transition: color 0.6s cubic-bezier(0.625, 0.05, 0, 1), background-color 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

.filter-btn[data-filter-status="active"] {
  background-color: #131313;
  color: #EFEEEC;
}

/* Reset Button */
.reset-btn {
  outline-offset: -2px;
  color: #c90f0f;
  -webkit-appearance: none;
  appearance: none;
  background-color: #c90f0f0d;
  border-radius: 10em;
  outline: 2px solid #c90f0f;
  padding: .65em 1.25em;
  font-size: 1.5em;
  transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  opacity: 0;
  visibility: hidden;
}

.reset-btn[data-filter-status="active"] {
  opacity: 1;
  visibility: visible;
}

/* Filter List */
.filter-list {
  flex-flow: wrap;
  width: 100%;
  display: flex;
}

.filter-list__item {
  width: 25%;
  padding: .75em;
}

.filter-list__item[data-filter-status="active"] {
  transition: opacity 0.6s cubic-bezier(0.625, 0.05, 0, 1), transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  transform: scale(1) rotate(0.001deg);
  opacity: 1;
  visibility: visible;
  position: relative;
}
.filter-list__item[data-filter-status="transition-out"] {
  transition: opacity 0.45s cubic-bezier(0.625, 0.05, 0, 1), transform 0.45s cubic-bezier(0.625, 0.05, 0, 1);
  transform: scale(0.9) rotate(0.001deg);
  opacity: 0;
  visibility: visible;
}
.filter-list__item[data-filter-status="not-active"] {
  transform: scale(0.9) rotate(0.001deg);
  opacity: 0;
  visibility: hidden; 
  position: absolute;
}

/* Demo Card */
.demo-card {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  background-color: #efeeec;
  border-radius: 1.5em;
  flex-flow: column;
  width: 100%;
  padding: 1em;
  display: flex;
}

.demo-card__bottom {
  justify-content: flex-start;
  align-items: center;
  padding-bottom: .25em;
  padding-left: .5em;
  padding-right: .5em;
  display: flex;
}

.demo-card__h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.25em;
  font-weight: 500;
  line-height: 1;
}

.demo-card__visual {
  background-color: #e2dfdf;
  border-radius: .5em;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.demo-card__visual-before {
  padding-top: 66%;
}

.demo-title {
  padding: 10em 1em 2em;
}

.demo-title__h2 {
  font-size: 5em;
  font-weight: 500;
  line-height: 1;
}

.demo-card__emoji {
  font-size: 4em;
}

@media screen and (max-width: 991px) {
  .filter-list__item {
    width: 50%;
  }
}

@media screen and (max-width: 767px) {
  .filter-list__item {
    width: 100%;
  }

  .demo-title__h2 {
    font-size: 4em;
  }
}

Step 2: Add custom Javascript

Step 2: Add Javascript

Step 3: Add Javascript

Javascript

Copy

function initMultiFilter() {
  // Find all filter groups on the page
  const groups = document.querySelectorAll('[data-multi-filter-group]');

  groups.forEach((group) => {
    const buttons = group.querySelectorAll('[data-filter-target]');
    const items = Array.from(group.querySelectorAll('[data-filter-name]'));
    const transitionDelay = 300; // Delay for transition effect (in milliseconds)
    let activeFilters = new Set();

    // Start with "all" active by default
    activeFilters.add('all');

    // Function to update the status and accessibility attributes of items
    const updateStatus = (element, shouldBeActive) => {
      element.setAttribute('data-filter-status', shouldBeActive ? 'active' : 'not-active');
      element.setAttribute('aria-hidden', shouldBeActive ? 'false' : 'true');
    };

    // Function to handle filtering logic when a button is clicked
    const handleFilter = (target) => {
      // Early return for 'all' or 'reset' if they are already active
      if ((target === 'all' || target === 'reset') && activeFilters.size === 1 && activeFilters.has('all')) {
        return;
      }

      if (target === 'all' || target === 'reset') {
        activeFilters.clear();
        activeFilters.add('all');
      } else {
        if (activeFilters.has(target)) {
          activeFilters.delete(target);
        } else {
          if (activeFilters.has('all')) {
            activeFilters.delete('all');
          }
          activeFilters.add(target);
        }
        if (activeFilters.size === 0) {
          activeFilters.add('all');
        }
      }

      const isAnyFilterActive = activeFilters.size > 0 && !activeFilters.has('all');

      // Loop through all items and update their status
      items.forEach((item) => {
        // Clear any previous timeout if it exists
        if (item.timeoutId) {
          clearTimeout(item.timeoutId);
        }
        const itemTags = item.getAttribute('data-filter-name').split(' ');
        const shouldBeActive = !isAnyFilterActive || itemTags.some(tag => activeFilters.has(tag));
        const currentStatus = item.getAttribute('data-filter-status');

        if (currentStatus === 'active') {
          item.setAttribute('data-filter-status', 'transition-out');
          item.timeoutId = setTimeout(() => {
            updateStatus(item, shouldBeActive);
            item.timeoutId = null;
          }, transitionDelay);
        } else {
          item.timeoutId = setTimeout(() => {
            updateStatus(item, shouldBeActive);
            item.timeoutId = null;
          }, transitionDelay);
        }
      });

      // Update button statuses
      buttons.forEach((button) => {
        const buttonTarget = button.getAttribute('data-filter-target');
        let isActive;
        if (buttonTarget === 'reset') {
          // The reset button is active when any specific filter is applied.
          isActive = !(activeFilters.size === 1 && activeFilters.has('all'));
        } else {
          isActive = activeFilters.has(buttonTarget);
        }
        button.setAttribute('data-filter-status', isActive ? 'active' : 'not-active');
        button.setAttribute('aria-pressed', isActive ? 'true' : 'false');
      });
    };

    // Attach event listeners to buttons
    buttons.forEach((button) => {
      button.addEventListener('click', () => {
        const target = button.getAttribute('data-filter-target');
        handleFilter(target);
      });
    });
  });
}

// Initialize Multi Filter Setup
document.addEventListener('DOMContentLoaded', () => {
  initMultiFilter();
});

Step 3: Add custom CSS

Step 2: Add custom CSS

CSS

Copy

/* Filter Button */
.filter-btn {
  transition: color 0.6s cubic-bezier(0.625, 0.05, 0, 1), background-color 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

.filter-btn[data-filter-status="active"] {
  background-color: #131313;
  color: #EFEEEC;
}

/* Reset Button */
.reset-btn {
  transition: all 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  opacity: 0;
  visibility: hidden;
}

.reset-btn[data-filter-status="active"] {
  opacity: 1;
  visibility: visible;
}

/* Filter List Item */
.filter-list__item[data-filter-status="active"] {
  transition: opacity 0.6s cubic-bezier(0.625, 0.05, 0, 1), transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  transform: scale(1) rotate(0.001deg);
  opacity: 1;
  visibility: visible;
  position: relative;
}

.filter-list__item[data-filter-status="transition-out"] {
  transition: opacity 0.45s cubic-bezier(0.625, 0.05, 0, 1), transform 0.45s cubic-bezier(0.625, 0.05, 0, 1);
  transform: scale(0.9) rotate(0.001deg);
  opacity: 0;
  visibility: visible;
}

.filter-list__item[data-filter-status="not-active"] {
  transform: scale(0.9) rotate(0.001deg);
  opacity: 0;
  visibility: hidden; 
  position: absolute;
}

Implementation

Filter Group

A container with the [data-multi-filter-group] attribute that keeps buttons and items organised, ensuring multiple groups on the page function independently.

Filter Button

Buttons with the [data-filter-target="example"] attribute indicate which items to display, while the [data-filter-status] attribute tracks whether a button is active or not. Make sure to not use spaces. When a filter is made out of multiple words use: [data-filter-target="blue-birds"].

Filter Item

Items to be filtered are identified by the [data-filter-name="example"] attribute, matching the target of a button, and their visibility is controlled by the [data-filter-status] attribute. When a filter is made out of multiple words use: [data-filter-name="blue-birds"]. When the item is connected to multiple buttons use a space between the names in the attribute, for example: [data-filter-name="mammals aquatic"].

Filter Status (not-active, active, transition-out)

The [data-filter-status] attribute determines an item’s state:

active: Makes the item visible.
not-active: Hides the item.
transition-out: Temporarily applied to items for smooth animations when transitioning from active to not-active. Items remain in this state for a specified duration (transitionDelay in JavaScript, in milliseconds: 300ms = 0.3s) before their final state is set.

Multiple keywords

You can assign multiple keywords to a single filter item by separating them with a space. For example: [data-filter-name="mammals aquatic"]

All button

A special button with [data-filter-target="all"] will display all items in the group when clicked, regardless of their data-filter-name. This button also uses [data-filter-status] to indicate if it is active or not.

Reset button

A special button with [data-filter-target="reset"] will display all items in the group when clicked. This button also uses [data-filter-status] to indicate if it is active or not. The key difference with the all button is that it's not-active when all items are visible. And active when a specific filter is active.

Basic Filter Setup

Need a more basic version? We also have a Basic Filter Setup

Live Preview

Resource Details

Last updated
March 19, 2025
Type
Osmo Basics
Category
Filters & Sorting
Need help?
Join Slack

Multi

Reset

Button

Filter

Grid

List

Multi Filter Setup

Documentation

External Scripts in Webflow

Copy structure to Webflow

Custom Javascript in Webflow

Custom CSS in Webflow

Implementation

Filter Group

Filter Button

Filter Item

Filter Status (not-active, active, transition-out)

Multiple keywords

All button

Reset button

Basic Filter Setup

Creator Credits

Welcome to the Vault 👋

GSAP Discount Code

Osmo Slack Community

Need help?

Multi Filter Setup

Documentation

External Scripts in Webflow

Copy structure to Webflow

Custom Javascript in Webflow

Custom CSS in Webflow

Implementation

Filter Group

Filter Button

Filter Item

Filter Status (not-active, active, transition-out)

Multiple keywords

All button

Reset button

Basic Filter Setup

Creator Credits