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-filtervalues - 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()andmixer.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
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
limitandoffsetto 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
limitandoffsetto 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 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.
Create filter buttons manually in Webflow and add
data-filterattributes through the custom attributes panel. Select a button element, open the element settings, add a custom attribute with namedata-filterand 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-filterattributes through the custom attributes panel. Select a button element, open the element settings, add a custom attribute with namedata-filterand 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.
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.
Alloy
Merchants use Alloy to automate tedious tasks across fulfillments, marketing, operations, & more.
ApiStack
ApiStack is a library of APIs that helps you quickly build different backend flows without any coding or infrastructure. Be it Phone number verification, key-value store, Airtable connector, Email address verification, you will find APIs and corresponding one-click Webflow integrations.
Related integrations
Get started for free
Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.
Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.
