small terrace
Hello. I'm facing something that I don't really understand how to solve.
I use the clipPath with svg and an image and make an interpolatePath from star to triangle on top of that.
My issue is that when the transition comes around the path does not go back to original but stays a triangle until the normal interpolate on frame 20 - 50 kicks in again and makes the star into triangle again.
I tried to use a useMemo but nothing came from it.
const { path: pathStar, width: widthStar, height: heightStar, transformOrigin, instructions } = makeStar({
innerRadius: 150,
outerRadius: 200,
points: 5,
});
const { path: trianglePath, width, height, } = makeTriangle({
length: 400,
direction: "down",
});
const s = interpolate(frame, [20, 50], [0, 1], {
extrapolateLeft: "clamp",
extrapolateRight: "clamp",
})
// const interpolated = interpolatePath(s, pathStar, trianglePath);
const interpolated = useMemo(() => {
return interpolatePath(s, pathStar, trianglePath);
}, [s, pathStar, frame, trianglePath]);
return (
<div >
<svg >
<defs>
<clipPath id="svgPath">
<path d={interpolated} />
</clipPath>
</defs>
</svg>
<Img
style={{
clipPath: 'url(#svgPath)',
}}
src="https://....."
/>
</div>
);```
sage sandal
