ginseng Posted July 20, 2020 Share Posted July 20, 2020 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? Link to comment Share on other sites More sharing options...
ZachSaucier Posted July 20, 2020 Share Posted July 20, 2020 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? Link to comment Share on other sites More sharing options...
Ihatetomatoes Posted July 21, 2020 Share Posted July 21, 2020 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. 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now