Kahlub

Awesome! Thanks for explaining why my logic didn't work. Since I prefer using React Hooks over classes here's my updated codepen by using useEffect in which it kicks in after the DOM is rendered. https://codepen.io/Kahlub/pen/xxxBLgX?editors=1010

Thank you so much! Setting the overwrite mode worked! Creating the tween looks like the best alternative so I tried using that, but React is crashing logging t.getAttribute is not a function. const animation = gsap.fromTo( circleId, { attr: { r: 1 }, transformOrigin: "center", }, { scale: 20, transformOrigin: "center", paused: true } ); animateIconEnter = () => animation.timeScale(1).play(); animateIconLeave = () => animation.timeScale(6).reverse(); Here's my codepen.

Hello, I'm animating a radius of circle and it is triggered by events of mouseenter or mouseleave. In my codepen link, I've commented out the duration(line 20) and the animation works as intended where if you mouse over the icon, the clipped circle enlarges and when leave, the clipped circle minimizes. But when I add the duration, the clipped circle continues enlarging even when you leave. The commented out duration is on line 20. I'm using React 16.10 and gsap3.0.