GSAP + Finsweet Filtering/Load Issue Explanation

[Agha-pixel]

Hey! I’m currently working on this website and wanted to walk through an issue I'm running into.

I'm using GSAP animations across the site — mainly reveal and scroll-trigger effects — and on regular pages, everything works perfectly.

For my reveal animation, I’m currently using Webflow’s new GSAP animation panel, not a custom code animation. Let me know if this issue can be completely resolved by switching to a GSAP reveal animation with code — if that’s the better and more stable approach, I’m totally open to doing that.

Now, the problem happens on pages where I'm using Finsweet CMS Attributes, specifically the Filter + Load More setup.

When I click Load More, new CMS items load correctly, but the reveal animation does not trigger on those new items. They just appear with no animation — but I need them to animate exactly like the initial batch does.

Also, when filtering , some scroll animations lower on the page stop working — especially the footer animation section.

To confirm the issue:
If I completely remove the Finsweet script, all animations work fine again. So it's definitely related to CMS load + filter interfering with GSAP initialization.

So what I need help with is:

1. Re-triggering the reveal animation after Load More
2. Re-initializing scroll animations after filtering
3. Basically refreshing GSAP when new CMS items are injected into the DOM

Thanks in advance — would really appreciate guidance on the correct event hooks or methods for re-initializing GSAP here.

---

🔗 Links

Loom video: https://www.loom.com/share/dd1886522cf340a088e7cbedcb20849d
Live page: https://underbite-staging.webflow.io/insights-more

---

📌 Footer Animation Code

<script>

gsap.registerPlugin(ScrollTrigger);

function initFooterParallax(){
  document.querySelectorAll('[data-footer-parallax]').forEach(el => {
    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: el,
        start: 'clamp(top bottom)',
        end: 'clamp(top top)',
        scrub: true
      }
    });
  
    const inner = el.querySelector('[data-footer-parallax-inner]');
    const dark  = el.querySelector('[data-footer-parallax-dark]');
  
    if (inner) {
      tl.from(inner, {
        yPercent: -25,
        ease: 'linear'
      });
    }
  
    if (dark) {
      tl.from(dark, {
        opacity: 0.5,
        ease: 'linear'
      }, '<');
    }
  });
}

// Initialize Footer with Parallax Effect
document.addEventListener('DOMContentLoaded', () => {
  initFooterParallax();
});

</script>

---

[lmgraf]

Hi there!

I don't know about the card loading animation re-triggering on "load more", but I have a solution for your other problem.

The issue your having with your footer animation doesn't have anything to do directly with finsweet attributes. The problem is that when you initialize your animation, the scroll trigger saves the current height of the body. When you switch filters, the body height updates, causing the animation to appear "stuck". What you need to do is refresh the scroll trigger when the height of the body changes. Add the following code to the end of your script tag and you should be fine:

const resizeObserver = new ResizeObserver(() => {
  ScrollTrigger.refresh();
});
resizeObserver.observe(document.body);

Thanks for the video, that really helped, wouldn't have taken a look at this otherwise.

Hope this helps!

[lmgraf]

What I can do is tell you why the card loading animation is not working: It's because gsap only initializes animations for elements that are in the DOM before gsap starts loading. Finsweets filtering solution inserts these elements into the DOM after gsap has initilized, which is why it is not registering those elements, which results in no animation.

First of all, you won't get this to work without custom code. Secondly, finsweet will probably not implement this, for various reasons. Attributes delivers ready-to-use solutions via a cdn. To my understanding, it is not meant to provide extensible solutions, which is what your asking for.

Hint: You could try using a MutationObserver. If you're not comfortable with coding this yourself, I suggest you try generating some code using LLMs. You should be able to get somewhere with this.

I would excpect finsweet to mark this issue as closed soon, since this is request is kind of out of scope for Finsweet Attributes.

[Agha-pixel]

Hey @lmgraf , thanks a lot that was really helpful!
I know there’s an attribute that resets Webflow IX2 animations, but can it also reset GSAP animations when clicking a Load More button (like the ones initialized with gsap.to() or ScrollTrigger)?

[lmgraf]

Are you talking about the fs-filter-resetix attribute? To my knowledge this only works for IX2 animations, not for gsap animations (I might be wrong). As I said, you will probably need custom code if you want to do the animations with gsap. I have to admit though, I don't really know a lot about animations firing when filters are updated.

This is all I got for you right now, hope this helps and good luck!