Hi everyone,
I’m running into a massive frustration with a client project right now and I’m wondering if anyone else is experiencing this or knows a workaround.
The Issue:
I am building a sticky scroll animation (similar to GSAP ScrollTrigger behavior) directly inside a Component. My expectation, as with any component-based workflow, is that if I define the interaction on the main component, it should propagate to every instance of that component across the site.
However, the scroll interaction triggers seem completely disconnected from the instances. Even if I set up the Interaction on the main component perfectly, when I drop that component onto a new page, the interaction is not shown.
The Consequence:
Because the sync isn’t working, I am currently forced to manually recreate or re-bind the scroll interaction for every single instance. I have this component across 20 different pages.
This defeats the entire purpose of using Components for reusable UI patterns. It is turning a scalable design system into a maintenance nightmare.
My Setup:
- A standard Webflow Component.
- Inside the component: Elements set up for a sticky scroll interaction.
- Interaction type: Element trigger (While scrolling in view).
- Target: Class-based (I have ensured the interaction targets the class, not the specific element ID, hoping that would fix it). Also tried it with attributes and directly targeting the elements.
Has anyone managed to get complex scroll interactions to sync properly within Components? Is this a known limitation of the current GSAP flow, or am I missing a specific setting to “force” the sync?
Any help would be appreciated because doing this manually 20 times is painful!
Thanks!