[Trouble with using Duration]

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.

See the Pen xxxBLgX?editors=1010 by Kahlub (@Kahlub) on CodePen

[Trouble with using Duration]

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

See the Pen XWWOPbM by Kahlub (@Kahlub) on CodePen

.

[Trouble with using Duration]

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.

See the Pen KKKJBeO by Kahlub (@Kahlub) on CodePen