Add Advanced Interactions to CMS Items

Use this code to help you create advanced animations on your Webflow CMS items.

Copy Code

<script>
document.addEventListener('DOMContentLoaded', () => {
  const elements = document.querySelectorAll('.your-collection-class');
  elements.forEach((element) => {
    element.addEventListener('mouseenter', () => {
      element.classList.add('your-animation-class');
    });
    element.addEventListener('mouseleave', () => {
      element.classList.remove('your-animation-class');
    });
  });
});
</script>

This is useful for those times when you need to add custom interactions to individual Webflow CMS items in the interaction panel.

For instance if you wanted to hover over a collection item, and make all the other collection items fade out of focus (a popular interaction you can build in the interactions panel) you wouldn't be able to do that natively in Webflow for CMS items.

What this code does is look at the specific element you're hovering over, in this case your collection item, and force adds a class to it on mouse enter - aka when you hover over it. Then when your mouse leaves the specific element, it quickly removes that added class.

How to use this code:

Replace '.your-collection-class' with whatever class you're currently using for your collection items. Make sure you include the period '.' at the beginning.

Then after you've created your new class with the interactions you want, replace 'your-animation-class' with your new class that has the interactions applied to it.

Publish to your staging domain for testing, as it's easy to make mistakes.

Helpful tip:

If you don't see it working properly, make sure to inspect the published page with Chromes dev tools. You should see the class being added and removed as you hover over your target element.