[bug]: useTrail not working #2158
Description
Which react-spring target are you using?
-
@react-spring/web -
@react-spring/three -
@react-spring/native -
@react-spring/konva -
@react-spring/zdog
What version of react-spring are you using?
@react-spring/web 9.7.2
What's Wrong?
useTrail not working under any circumstance in code. When I use the same spring for a normal animation it works, however, when used as a trail it would not animate at all.
// Would work when used in a component
const trailStyle = useSpring({
config: { mass: 5, tension: 2000, friction: 200 },
opacity: isOverlayVisible ? 1 : 0,
});
// Would not work and no animation happens
const Trail: React.FC<{ open: boolean; children: ReactNode[] }> = ({
open,
children,
}) => {
const trail = useTrail(children.length, {
config: { mass: 5, tension: 2000, friction: 200 },
opacity: open ? 1 : 0,
});
return (
<div className="mt-24">
{trail.map(({ ...style }, index) => (
<a.div
key={index}
className="custom-will-change flex w-sscreen flex-row-reverse px-8 pt-2"
style={style}
>
{children[index]}
</a.div>
))}
</div>
);
};
In the above example both springs depend on the same state variable and render the same kind of component with the same styling.
To Reproduce
Simply create a trail using my versions of react/nextjs and react-spring: next@13.4.2
Expected Behaviour
The trail should work
Link to repo
https://codesandbox.io/p/sandbox/crazy-pine-ybolec?file=%2Fapp%2Fpage.tsx%3A39%2C53