Masonry Grid Issue with Finsweet Load More in Webflow

Attributes
, , ,
1

Hi,

I’m encountering a problem with my Webflow project that utilizes a Masonry grid built with the Macy library. I’ve successfully combined content from three CMS collections using Finsweet Combine, but integrating Finsweet Load More is causing issues.

The issue manifests as:

  • Glitches when attempting to load more items
  • Items failing to load in the next section, appearing to be positioned absolutely

Unfortunately, due to a non-disclosure agreement (NDA), I cannot share a link to the project here. I’ve also tried contacting support multiple times, but the chat button isn’t functioning on my end.

Would you have any suggestions on how to resolve this load more issue?

Thanks in advance for your assistance!

2

Hey @hello8! I have seen your DM. I’ll answer privately and then share the solution here! :muscle:

3

Hey @hello8! Seems we just need to recalculate the layout when the new items are rendered.

I’ve replied your DM but posting this in case another users needs help with CMS Load and Macy.js

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

      const [listInstance] = listInstances;

      let macyInstance = Macy({
        container: '#masonry',
        margin: 16,
        columns: 3,
        breakAt: {
          991: 2,
          767: 2,
          479: 1,
        },
      });

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

This code goes on the </body> section of custom code for the page where we have tehs etup.

4

Hey @Support-Luis ,

I really appreciate all the help but i am still having issues.

i have created two projects, 1 with MacyJS and CMS Load and the other with CMS Load and CMS Combine. Both can be cloned.

Would you mind taking a look?

Thanks for all the help, I really appreciate it

5

Hey @hello8! For the CMS Load + Macy.js, can you please try this version of the code?

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

      const [listInstance] = listInstances;

      let macyInstance = Macy({
        container: '#masonry',
        margin: 16,
        columns: 4,
        breakAt: {
          991: 2,
          767: 2,
          479: 1,
        },
      });

      listInstance.on('renderitems', (renderedItems) => {
        console.log(renderedItems);
        macyInstance.runOnImageLoad(function () {
          macyInstance.recalculate(true);
        }, true);
      });
    },
  ]);
</script>

And this snippet should help you with the CMS Load + CMS Combine issue.

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

      const [listInstance] = listInstances;

      let macyInstance = Macy({
        container: '#masonry',
        margin: 16,
        columns: 4,
        breakAt: {
          991: 2,
          767: 2,
          479: 1,
        },
      });

      listInstance.on('renderitems', (renderedItems) => {
        console.log(renderedItems);
        macyInstance.runOnImageLoad(function () {
          macyInstance.recalculate(true);
        }, true);
      });
    },
  ]);
</script>

I only added the runOnImageLoad on the rendereditems event callback. You can read more here →

1 Like
6

Hey @Support-Luis - did you have the code for the macy.js and CMS load more? The scripts above are just the same

7

Hey @hello8! I’m sorry I did not follow.

The snippets above will work for CMS Load. Are you having more issues? Are the links above still valid for me to debug?

8

Hey @Support-Luis I am implementing this solution of Macy.js with CMS Load More, but I’m having an issue where when the page initially loads the masonry grid isn’t at the top, it’s at the first spot where more content would load. Once I hit that spot, everything shifts up to the top. I’m wondering if you have any thoughts as to why this may be happening?

Here is the page that it’s happening on: Skycar Creative | Recent News

9

Hey @michaellee2245! I see you have added the code via Slater, however I’m afraid I can not look at it.

Could you please add it to the page directly and comment it on Slater?

10

Done and done! It’s been added to the page directly!
Also here’s the read only link if you need it: Webflow - Skycar Creative

11

Hey @michaellee2245! Simple fix here, we just need to recalculate after the images are loaded.

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

      const [listInstance] = listInstances;

      let macyInstance = Macy({
        container: '#macy-container',
        margin: {
          x: 24,
          y: 24,
        },
        columns: 4,
        breakAt: {
          1200: 4,
          991: 3,
          767: 2,
          479: 1,
        },
      });

      const cursorInit = function () {
        // Custom Cursor Element
        $(
          'a, .gallery_copy-btn, .swiper-btn-prev, .swiper-btn-next, .about_team-bio_btn, .gallery-filter-wrapper, .pr__form-submit_btn, .footer_form-submit-btn, .lightbox-modal-close, .play-button-wrapper, .contact_wrapper'
        ).on('mouseenter', function () {
          $('.cursor_dot-wrapper').addClass('is--smaller');
          //$('.cursor_dot-inner').addClass('is--larger');
        });
        $(
          'a, .gallery_copy-btn, .swiper-btn-prev, .swiper-btn-next, .about_team-bio_btn, .gallery-filter-wrapper, .pr__form-submit_btn, .footer_form-submit-btn, .lightbox-modal-close, .play-button-wrapper, .contact_wrapper'
        ).on('mouseleave', function () {
          $('.cursor_dot-wrapper').removeClass('is--smaller');
          //$('.cursor_dot-inner').removeClass('is--larger');
        });
      };

      const gsapInit = function () {
        const clipEl = $(this).find("[data-btn='clip']").attr('aria-hidden', 'true');
        const durationSetting = 0.4;
        const easeSetting = 'power2.out';

        const getPercentTop = (el, e) => {
          let elTop = el.offset().top - $(window).scrollTop();
          let mouseTop = e.pageY - $(window).scrollTop() - elTop;
          return (mouseTop / el.innerHeight()) * 100;
        };

        const getPercentLeft = (el, e) => {
          let elLeft = el.offset().left;
          let mouseLeft = e.pageX - elLeft;
          return (mouseLeft / el.innerWidth()) * 100;
        };

        $(this).on('mouseenter', function (e) {
          let percentTop = getPercentTop($(this), e);
          let percentLeft = getPercentLeft($(this), e);
          gsap.set(clipEl, { display: 'flex' });
          gsap.fromTo(
            clipEl,
            { clipPath: `circle(0% at ${percentLeft}% ${percentTop}%)` },
            {
              clipPath: `circle(141.4% at ${percentLeft}% ${percentTop}%)`,
              duration: durationSetting,
              ease: easeSetting,
            }
          );
        });

        $(this).on('mouseleave', function (e) {
          let percentTop = getPercentTop($(this), e);
          let percentLeft = getPercentLeft($(this), e);
          gsap.to(clipEl, {
            clipPath: `circle(0% at ${percentLeft}% ${percentTop}%)`,
            overwrite: true,
            duration: durationSetting,
            ease: easeSetting,
          });
        });
      };

      // Button Clip Path Hover
      $("[data-btn='wrap']").each(gsapInit);

      macyInstance.runOnImageLoad(function () {
        macyInstance.recalculate(true);
      }, true);

      listInstance.on('renderitems', (renderedItems) => {
        console.log(renderedItems);
        $("[data-btn='wrap']").each(gsapInit);
        $("[data-btn='wrap']").each(cursorInit);

        macyInstance.runOnImageLoad(function () {
          macyInstance.recalculate(true);
        }, true);
      });
    },
  ]);
</script>

Can you test this code please?

I just added an extra

   macyInstance.runOnImageLoad(function () {
     macyInstance.recalculate(true);
   }, true);

after the gsapInit

2 Likes
12

That worked perfectly for my use case here! Thanks so much @Support-Luis!

1 Like