My full code if someone every gets here and wonders on how I've solved it:
if (tl === undefined) {
tl = gsap.timeline({
defaults: {
immediateRender: false,
},
});
} else {
tl.clear();
}
tl.set(circleOneRef.current, {
attr: {
cx: getCircleCx(shapes.one.left),
cy: getCircleCy(shapes.one.top),
fill: shapes.one.fill,
r: getCircleR(shapes.one.width),
},
scrollTrigger: {
end: 'bottom top',
markers: true,
scroller: backgroundShapesRef.current,
start: 'top top',
trigger: sectionOneRef.current,
},
})
.to(circleOneRef.current, {
attr: {
cx: getCircleCx(shapes.two.left),
cy: getCircleCy(shapes.two.top),
fill: shapes.two.fill,
r: getCircleR(shapes.two.width),
},
duration: 1,
ease: 'elastic.out(1, 0.5)',
immediateRender: true,
scrollTrigger: {
end: 'bottom top',
markers: true,
scroller: backgroundShapesRef.current,
scrub: true,
start: '20% top',
trigger: sectionOneRef.current,
},
})
.to(circleOneRef.current, {
attr: {
fill: shapes.three.fill,
r: getFullscreenCircleR(),
},
duration: 1,
ease: 'elastic.in(1, 0.2)',
scrollTrigger: {
end: 'bottom top',
markers: true,
scroller: backgroundShapesRef.current,
scrub: true,
start: 'top top',
trigger: sectionTwoRef.current,
},
})
.to(circleTwoRef.current, {
attr: {
cx: getCircleCx(shapes.five.left),
cy: getCircleCy(shapes.five.top),
fill: shapes.five.fill,
r: getCircleR(shapes.five.width),
},
duration: 1,
ease: 'elastic.out(1, 0.5)',
immediateRender: true,
scrollTrigger: {
end: '80% top',
markers: true,
scroller: backgroundShapesRef.current,
scrub: true,
start: '20% top',
trigger: sectionThreeRef.current,
},
})
.fromTo(
circleTwoRef.current,
{
attr: {
cx: getCircleCx(shapes.five.left),
cy: getCircleCy(shapes.five.top),
fill: shapes.five.fill,
r: getCircleR(shapes.five.width),
},
},
{
attr: {
r: getFullscreenCircleR(),
},
duration: 1,
ease: 'elastic.in(1, 0.2)',
scrollTrigger: {
end: 'bottom top',
markers: true,
scroller: backgroundShapesRef.current,
scrub: true,
start: '20% top',
trigger: sectionFourRef.current,
},
},
);
This code is being ran in an useEffect hook which runs every time the window size changes. @GreenSock does this make sense or is it a bad solution?