CMS Load More - Infinite, newly loaded items GSAP interaction doesn't work

Attributes
12

Hello @de.skaaa!

This code should replace the one you currently have on the page, this will iterate through the rendered items and initialize the GSAP animation correctly.

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

      const [listInstance] = listInstances;

      function initializeFaqAccordion(elements) {
        elements.forEach((element) => {
          const accordion = element.element;

          if (accordion.dataset.faqInitialized === 'true') return;
          accordion.dataset.faqInitialized = 'true';

          const answer = accordion.querySelector('.faq_answer');
          const plusIcon = accordion.querySelector('.faq_plus1');

          gsap.set(answer, { height: 0, overflow: 'hidden' });
          gsap.set(accordion, { opacity: 0.25 });

          const fullHeight = answer.scrollHeight;

          const tl = gsap
            .timeline({ paused: true })
            .to(answer, {
              height: fullHeight,
              duration: 0.3,
              ease: 'power2.out',
              onComplete: () => (answer.style.height = 'auto'),
            })
            .to(accordion, { opacity: 1, duration: 0.3 }, 0)
            .to(plusIcon, { rotateZ: 90, duration: 0.3 }, 0)
            .reverse();

          accordion.addEventListener('click', () => {
            tl.reversed(!tl.reversed());
          });
        });
      }

      async function processRenderingQueue() {
        try {
          const result = await listInstance.renderingQueue;
          return result;
        } catch (error) {
          // Handle any errors that may occur during the execution
          console.error('Error processing renderingQueue:', error);
        }
      }

      const initialItems = await processRenderingQueue();

      initializeFaqAccordion(initialItems);

      listInstance.on('renderitems', (renderedItems) => {
        initializeFaqAccordion(renderedItems);
      });
    },
  ]);

Let me know how it goes!