Nested library + Webflow Animation

Attributes
1

Hi,
I want to nest FAQs inside their category. I succeed in doing that. But the animation on my FAQ doesn’t work anymore once nested.

You can see the result here: FAQs Copy FS
Here is my read-only: Webflow - Minisoft

Any idea?

Thanks,
Best

2

Hey @geffroy.valentin! Can you please try this new setup?

  1. add the defer fs-attributes-preventload='true' attribute to the CMS Nest script
  2. Add this code to your </body> tag
<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsnest',
    (listInstances) => {
      console.log('cmsnest Successfully loaded!');
      window.fsAttributes.cmsfilter.init();
      window.fsAttributes.push([
        'cmsfilter',
        (filterInstances) => {
          console.log('cmsfilter Successfully loaded!');

          function resetIX() {
            window.Webflow && window.Webflow.destroy();
            window.Webflow && window.Webflow.ready();
            window.Webflow && window.Webflow.require('ix2').init();
            document.dispatchEvent(new Event('readystatechange'));
          }

          const [filterInstance] = filterInstances;

          resetIX();

          filterInstance.listInstance.on('renderitems', (renderedItems) => {
            console.log(renderedItems);
            resetIX();
          });
        },
      ]);
    },
  ]);
</script>
3

Hi Luis,
Thanks for your help.

It doesn’t work anymore. The nested solution doesn’t load.

Here you can take a look: FAQs Copy FS

4

Hey @geffroy.valentin! That seems weird, the solution works as expected when I test locally. Can you try this other script? You’ll need to remove the prevent-load attribute from the CMS Nest script and use the normal async tag.

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsnest',
    (listInstances) => {
      window.fsAttributes.cmsfilter.init();
      window.Webflow && window.Webflow.destroy();
      window.Webflow && window.Webflow.ready();
      window.Webflow && window.Webflow.require('ix2').init();
      document.dispatchEvent(new Event('readystatechange'));
      console.log('IX has been reset!');
    },
  ]);
</script>
5

Hi @Support-Luis,
It’s working thanks!

One last thing:
When I filter the list, it was “beeping”.
The wrapper filtered will do:

  1. Opacity = 1
  2. Opacity = 0
  3. Opacity = 1

I added a fs-cmsfilter-duration = 0 and it fixed the problem!

Thank you so much for your help!

6

Thanks for the insight! Another solution for this, recently shared in the Slack channel, is adding this CSS to the page

<style>
  .w-dyn-list [fs-cmsnest-element='list'] {
    opacity: 1 !important;
  }
</style>