I'm using useTransition from react spring to build a masonry-gridish display of animated words for a blog. My work is heavily based on react spring's official codesandbox demo of a masonry grid which can be found here: https://codesandbox.io/embed/26mjowzpr
My work can be found here: https://codesandbox.io/s/qrzn-issue-2-david-byrne-8s7bo?file=/src/App.js:1267-1293
What you'll notice in my codesandbox, is that if you click on one of the little heads on the bottom, the transition occurs, but then the page will rerender about 20 times and I can't figure out why.
I think it has something to do with my invocation of useTransition, but am totally at a loss
const leftTransitions = useTransition(leftGridItems, item => item.word, {
from: ({ xy, width, height }) => {
return {
xy: [xOffset, yOffset],
width,
height,
opacity: 0
};
},
enter: ({ xy, width, height }) => ({ xy, width, height, opacity: 1 }),
update: ({ xy, width, height }) => ({ xy, width, height }),
leave: ({ xy, width, height }) => {
return {
xy: [xOffset, yOffset],
opacity: 0
};
},
config: { mass: 5, tension: 500, friction: 100 },
trail: 25
});
