I have a React component that basically draw some svg circles. How can I create a transition/animation between the two renders? What I would like is to see the points move from one position to another.
const dataset = this.props.dataset
<App>
{dataset.map((datum, i) => (
<TheCircle
key={i}
datum={datum}
xScale={xScale}
yScale={yScale}
/>
))}
</App>
const TheCircle: React.FC<Props> = ({ datum, xScale, yScale }) => {
const { x, y, country } = datum
const cx = xScale(x)
const cy = yScale(y)
let dotRef = useRef(null).current
useEffect(() => {
TweenMax.to(dotRef, 5, {
cx: cx,
cy: cy,
ease: 'bounce.out',
})
}, [])
return (
<g>
<circle
className=""
fill="none"
stroke="black"
strokeWidth={1}
cx={cx}
cy={cy}
r={10}
ref={(element) => { dotRef = element }}
/>
</g>
)
}
What I'm doing wrong?
