Due to the complexity of the project in it's current state, I have not created a demo but I will if need be. For now, I'm hoping you can point us in the right direction based on the information below.
ScrollSmoother is setup in <Page/>:
const Page = ({ children, ...props }) => {
const el = useRef(null);
useLayoutEffect(() => {
const ctx = gsap.context(() => {
const smoother = ScrollSmoother.create({
wrapper: el.current,
content: '#smooth-content',
...
});
}, el);
return () => ctx.revert();
}, []);
return (
<div ref={el}>
<div id="smooth-content">
...
The (simplified) component structure looks something like this:
<Routes>
<Page>
<Home>
<IAlwaysTween />
<GsapEffect vars={{ autoAlpha: 0, y: 60 }} triggerVars={{ duration: 1.5 }}>
<IDontNormallyTween/>
</GsapEffect>
</Home>
</Page>
</Routes>
<Home> contains route-specific effects setup in its useLayoutEffect(). No known issues.
<IAlwaysTween> contains component-specific effects setup in its useLayoutEffect() that cease firing after ScrollSmoother is added to <Page>.
<GsapEffect> sets up one-off effects in its useLayoutEffect() that cease firing after ScrollSmoother is added to <Page>.
Without ScrollSmoother, all ScrollTrigger-based effects behave as expected. After, the inspector confirms no transforms are applied to children of <Home> that contain pre-baked tweens or are wrapped <GsapEffect>.
Any ideas? ?