Webflow staggered-icon only works on <circle>, not <rect> — how to fix?

Design help Custom code
1

Here is my site Read-Only: LINK

Hey everyone,

I’m stuck with a weird issue in Webflow.
I’ve got an SVG icon inside an Embed block that consists of multiple <circle> elements. Webflow adds an attribute staggered-icon to the wrapper, and when I click the parent element, the animation triggers:

  • all circles go from fill="var(--grey-light)" to fill="var(--brand)"

  • the effect runs with a nice staggered delay.

This works perfectly as long as the elements are <circle>.

But as soon as I swap <circle> for <rect> (to make squares instead of dots), the animation completely stops applying. It looks like Webflow’s interaction engine is targeting the <circle> tag specifically, not just “children of this embed.”

I don’t see any way to edit this in the Interactions panel — it’s invisible there, but still runs on click.

Any Webflow folks run into this? What’s the right workaround here?

2

That staggered-icon effect is hard-coded to <circle> elements , it won’t pick up <rect>. Easiest workaround is to wrap your squares in <circle> placeholders (invisible stroke/fill) or duplicate the behavior with a custom GSAP stagger targeting <rect>.

1 Like
3

Hey @Slava_k ,

It seems your site has a site-wide code inside the closing body tag - you can find this in the Site settings → Custom code → Scroll down to the Footer code section.

There you should be able to find a script as follows:

<script>  
  // Staggered animation for the ellipses in the services/values card icons
  
gsap.context(() => {
  gsap.utils.toArray('[staggered-icon-card]').forEach(card => {
    const icon = card.querySelector('[staggered-icon]');
    const trigger = card.querySelector('[staggered-icon-trigger]');
    const ellipses = gsap.utils.toArray(icon?.querySelectorAll('circle') || []);
    let toggled = false;

    const animateEllipses = (fromColor, toColor) => {
      gsap.killTweensOf(ellipses, 'fill');
      gsap.fromTo(
        ellipses,
        { fill: fromColor },
        {
          fill: toColor,
          duration: 0.3,
          ease: 'linear',
          stagger: { each: 0.04, from: 'random' }
        }
      );
    };

    gsap.delayedCall(0, () => {
      trigger?.addEventListener('click', () => {
        if (!toggled) {
          animateEllipses('var(--grey-light)', 'var(--brand)');
        } else {
          animateEllipses('var(--brand)', 'var(--grey-light)');
        }
        toggled = !toggled;
      });
    });
  });
});
</script>

You can replace the ‘circle’ with ‘rect’ and customize this code as per your design requirements and it should work. Hope this helps.