MixItUp

Connect MixItUp with Webflow to add animated filtering and sorting to your CMS collections and static content.

→

↗

►

↓

←

↑

→

↗

►

↓

←

↑

→

↗

►

↓

←

↑

→

↗

►

↓

←

↑

→

↗

►

↓

←

↑

How to integrate MixItUp with Webflow

MixItUp adds client-side filtering and sorting to your Webflow collection items with animated transitions and real-time updates. You can filter portfolio projects by multiple categories, sort products by price or popularity, and create complex filter combinations that work independently of Webflow's 100-item collection limit.

In other words, MixItUp handles filtering requirements that native CMS filtering can't.

You can add MixItUp directly through CDN embed for standard filtering, or build with Webflow and MixItUp APIs for advanced use cases like real-time updates and external data integration.

Add MixItUp via CDN embed

Add the MixItUp library directly to your Webflow site through custom code for standard filtering and sorting functionality. This approach works for most portfolio sites, product catalogs, and content galleries where you need animated filtering without complex backend integration.

To set up this integration, copy the MixItUp CDN link to your site settings under Custom Code > Head Code. Structure your collection items with a container div and apply the .mix class to each filterable element. Add data-filter attributes to control buttons with values like .category-design or all. Include initialization JavaScript before the closing </body> tag to activate filtering on page load.

To implement this integration:

Add library reference in site settings through the custom code panel
Structure collection lists with proper container classes and mixing classes on collection items
Configure filter buttons using custom attributes panel to add data-filter values
Initialize MixItUp with container selector and animation configuration in footer code

This method handles up to 100 collection items due to Webflow's collection list limits. Custom code sections have a 50,000 character limit per block. Take note that preview mode won't show effects, so you’ll need to publish your site to test functionality.

Build with Webflow and MixItUp APIs

Combine the Webflow CMS API with MixItUp's JavaScript API to build advanced filtering that extends beyond collection limits or requires real-time data updates.

This approach requires custom development with OAuth implementation, server-side middleware, and JavaScript DOM manipulation. You'll build filtering that extends beyond collection limits or syncs with external data sources through the Webflow CMS API and MixItUp's JavaScript API.

Fetch and filter dynamic content

Retrieve collection items programmatically through the Webflow CMS API and filter the rendered results with MixItUp. This requires server-side implementation for OAuth token management and data transformation.

Retrieve items with **GET** /v2/collections/{collectionId}/items using query parameters like limit, offset, and sort[fieldName] to control data retrieval. Render returned items into your DOM structure with MixItUp classes, then initialize filtering with mixer.filter(selectorString). Apply data-filter attributes to categories based on your CMS field values.

MixItUp's JavaScript API includes these methods:

Initialize mixer with mixitup(containerElement, configObject) to set up filtering on rendered content
Filter dynamically using mixer.filter(selector, callback) to respond to user interactions or URL parameters
Sort results with mixer.sort(orderString, callback) based on data attributes or custom logic
Update content through mixer.insert() and mixer.remove() for real-time content changes

Sync content with webhooks

Configure Webflow webhooks to notify your application when CMS content changes. This requires server endpoints for webhook processing, HMAC SHA-256 signature verification, and custom JavaScript for DOM updates.

Register webhook endpoints with **POST** /sites/{site_id}/webhooks specifying trigger types like collection_item_created, collection_item_changed, or collection_item_deleted. Verify webhook authenticity using HMAC SHA-256 signature validation. Update your MixItUp display by fetching new data through the CMS API and using mixer.insert() or mixer.remove() to modify filtered content.

Webflow supports up to 75 webhooks per trigger type. Failed webhook deliveries retry 3 times at 10-minute intervals. Webhook payloads include changed item data and metadata about the triggering event.

What you can build

Integrating MixItUp with Webflow supports animated content organization across portfolios, e-commerce catalogs, and content libraries with smooth client-side performance.

Filterable portfolio galleries: Build a design agency portfolio where visitors filter projects by service type, industry, or creative medium with animated transitions between filtered states
Multi-dimensional product catalogs: Create an e-commerce store where shoppers combine filters like price range, color, size, and category to find products without page reloads or database queries
Searchable content libraries: Develop a knowledge base or blog where readers filter articles by topic, author, publication date, and content type with instant visual feedback
Dynamic team directories: Design a company website where visitors sort and filter employee profiles by department, location, expertise, or availability with real-time updates

Frequently asked questions

Can MixItUp filter more than 100 collection items in Webflow?
MixItUp filters whatever items exist in the DOM, but Webflow's collection lists display a maximum of 100 items by default. To filter larger collections, fetch items programmatically using the Webflow CMS API and render them outside collection list components. Request items with query parameters like limit and offset to paginate through larger datasets, then apply MixItUp filtering to your custom-rendered output.
This approach requires custom JavaScript to fetch data, render HTML with proper MixItUp classes, and initialize filtering.
MixItUp filters whatever items exist in the DOM, but Webflow's collection lists display a maximum of 100 items by default. To filter larger collections, fetch items programmatically using the Webflow CMS API and render them outside collection list components. Request items with query parameters like limit and offset to paginate through larger datasets, then apply MixItUp filtering to your custom-rendered output.
This approach requires custom JavaScript to fetch data, render HTML with proper MixItUp classes, and initialize filtering.
Does MixItUp work with Webflow's native filtering?
MixItUp replaces rather than extends Webflow's native filtering. Webflow's built-in filtering works through the Designer interface without code and handles basic categorization for small collections. MixItUp provides animated transitions, multi-dimensional filtering, and client-side performance for more complex use cases.
Choose native Webflow filtering for simple category selection with collections under 100 items. Use MixItUp when you need animated state changes, combined filter criteria, custom sort orders, or filtering across multiple taxonomies simultaneously.
MixItUp replaces rather than extends Webflow's native filtering. Webflow's built-in filtering works through the Designer interface without code and handles basic categorization for small collections. MixItUp provides animated transitions, multi-dimensional filtering, and client-side performance for more complex use cases.
Choose native Webflow filtering for simple category selection with collections under 100 items. Use MixItUp when you need animated state changes, combined filter criteria, custom sort orders, or filtering across multiple taxonomies simultaneously.
How do I handle MixItUp filter buttons with Webflow CMS?
Create filter buttons manually in Webflow and add data-filter attributes through the custom attributes panel. Select a button element, open the element settings, add a custom attribute with name data-filter and value matching your category class like .category-design. The MixItUp documentation explains how filter selectors work with category classes.
For dynamic filter button generation based on CMS categories, use the Webflow CMS API to fetch unique category values, render buttons with JavaScript, and attach click handlers that call mixer.filter(selector). This requires custom code but generates filter controls automatically as you add new categories to your CMS.
Create filter buttons manually in Webflow and add data-filter attributes through the custom attributes panel. Select a button element, open the element settings, add a custom attribute with name data-filter and value matching your category class like .category-design. The MixItUp documentation explains how filter selectors work with category classes.
For dynamic filter button generation based on CMS categories, use the Webflow CMS API to fetch unique category values, render buttons with JavaScript, and attach click handlers that call mixer.filter(selector). This requires custom code but generates filter controls automatically as you add new categories to your CMS.

MixItUp

Joined in

Description

MixItUp is a high-performance JavaScript library that adds animated filtering, sorting, and DOM manipulation to web content. The library uses CSS-based animations to filter and sort elements without requiring external dependencies or animation frameworks. It supports Chrome 16+, Firefox 16+, Safari 6.2+, and IE 10+ with full animation capabilities.

→

↗

►

↓

←

↑

This integration page is provided for informational and convenience purposes only.