CMS load/filter issue - Interactions on collection items not working beyond 100th item

General
1

Hi everyone,

I’ve put together a gallery using ‘CMS Filter’ & ‘CMS load’ for a CMS list with over 500 items, and each ‘Collection Item’ has a hover interaction attached to it. Website links below:

Website link:

Preview Link (doesn’t seem to work properly):
https://preview.webflow.com/preview/dave-court?utm_medium=preview_link&utm_source=designer&utm_content=dave-court&preview=ba8eff37136a2915ae412f2283be974b&workflow=preview

Mouse hover on the items reveals an info box at the bottom left of the screen, however after the 100th CMS item the hover interaction no longer works, I’m assuming this is due to the CMS Load function bringing in new CMS data without bringing the interaction with it. I’ve tried using ‘fs-cmsload-resetix = true’ with no success.

Is there a work around for this so all items after the 100th include the interaction?

Thanks.

2

hey @kristian! I see you have used some initial states for your hover interactions, these are not recommended as resetix will reset every interaction to its initial state making them stop working.

You can always simulate this state by using the effects panel.

3

Hey @Support-Luis ,

Thankyou very much for the prompt response.

Is there a work around to get interactions to work with the CMS load? Each image also has a lightbox pop up on click along with a fixed text reveal on hover. I’ve set the interaction to have no initial state which still allows the popup function but still doesn’t work after 100th item.

4

Hey @kristian! You can test this code? Here we are resetting Webflow’s interaction engine with each rendering of items :muscle:

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsload',
    (listInstances) => {
      console.log('cmsload Successfully loaded!');

      const [listInstance] = listInstances;

      listInstance.on('renderitems', (renderedItems) => {
        console.log(renderedItems);
        window.Webflow && window.Webflow.destroy();
        window.Webflow && window.Webflow.ready();
        window.Webflow && window.Webflow.require('ix2').init();
        document.dispatchEvent(new Event('readystatechange'));
      });
    },
  ]);
</script>
5

@Support-Luis thankyou so much, this worked perfectly.

1 Like