Animate circle position using React and GSAP

[ginseng]

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?

[ZachSaucier]

Hey ginseng and welcome to the GreenSock forums.

 

It looks like you're mixing the new and old GSAP syntax. We highly recommend using the GSAP 3 syntax since it is more condensed and lets you make use of new features like defaults and keyframes. See the migration guide for more info:

 

Nothing immediately stands out to me as something that you're doing wrong (besides using the old syntax which won't cause an error), though I'm far from a React expert. Can you please create a minimal demo of your issue using CodeSandbox or StackBlitz?

 

[Ihatetomatoes]

As @ZachSaucier a Codepen would be useful, it's hard to help when we don't know what error you are getting.

 

const TheCircle: React.FC<Props> = ({ datum, xScale, yScale }) => {
	...

    let dotRef = useRef(null)
    useEffect(() => {
      gsap.to(dotRef.current, {...})
    }, [xScale]) // specify here which of the updated props should trigger this tween

    return (
      <g>
        <circle ... ref={dotRef} />
      </g>
    )
}

The above code should work.