This works as far as I can tell.
Thank you very much!
In my actual project, I shouldn't use CSS for the starting position, but I was able to achieve the same result by using .fromTo() and setting the "from" point to the same value as the first keyframe like so:
useEffect(() => {
gsap.fromTo(q(".App"), 0.75, {
scrollTrigger: {
trigger: ".App",
markers: true,
start: "top center",
end: "bottom 30%",
toggleActions: "play reverse play reverse"
},
clipPath: "circle(0% at 50% 50%)"
},
{
scrollTrigger: {
trigger: ".App",
markers: true,
start: "top center",
end: "bottom 30%",
toggleActions: "play reverse play reverse"
},
keyframes: {
clipPath: ["circle(0% at 50% 50%)", "circle(75% at 50% 50%)"]
}
});
}, []);
