Yeah I am using the useGSAP hook. Below is my code snippet that I have ended up with which appears to work in my production build now but not in dev mode. Could dev mode be impacted by useEffect running twice in strict mode?
useGSAP(
() => {
matchMediaRef.current = gsap.matchMedia().add(
{
isMobile: '(max-width: 768px)',
isDesktop: '(min-width: 769px)',
},
(context) => {
const { isMobile } = context.conditions || {};
gsap.set(firstViewRef.current, {
opacity: 1,
lazy: false,
});
gsap.set(scrolledViewRef.current, {
lazy: false,
opacity: 0,
yPercent: 0,
scale: 0.7,
});
timelineRef.current = gsap
.timeline({
scrollTrigger: {
trigger: containerRef.current,
start: 'top 44px',
end: 'center 44px',
invalidateOnRefresh: true,
pin: true,
pinSpacing: false,
scrub: true,
markers: isDev,
},
})
.to(firstViewRef.current, {
...(isMobile
? {
yPercent: -40,
xPercent: -30,
}
: {
yPercent: -38,
xPercent: -15,
}),
opacity: 0.8,
scale: 0.3,
})
.to(
scrolledViewRef.current,
{
opacity: 1,
scale: 1,
yPercent: 0,
xPercent: 0,
},
0.2
);
}
);
},
{
scope: containerRef,
revertOnUpdate: true,
}
);