Trouble with using Duration

[Kahlub]

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

[GreenSock]

Welcome to the forums, @Kahlub!

 

In GSAP 3, overwriting is false by default. You were creating conflicting tweens in this case - in the mouseenter you started a 3-second long animation but let's say the user moves their mouse off of it 1 second later, you're creating another 0.5 second animation of the SAME property of the SAME object, which of course works (both tweens are setting that property, but since the mouseleave was created later, it runs last, thus its values are what's seen while it's running), and then when that animation finishes the OTHER one is STILL RUNNING. So suddenly you see the jump. That's not a bug in GSAP - it's just a logic issue with your code. But don't worry, it's easy to fix.

 

You have several options:

 

1) Just set overwrite: true on your tweens. That means that when the tween is created, it finds all other tweens of the same target and immediately kills them. No more conflicts!

 

2) You could manually accomplish that with gsap.killTweensOf(yourTarget) but I find it simpler to just set overwrite:true. 

 

3) You could set the default overwrite mode to "auto" or true, like:

gsap.defaults({overwrite:"auto"});

That will tell GSAP to automatically check the first time each tween renders and find any animations of the same property of the same target and kill just those pieces of the other tween(s). 

 

4) You could create a single tween that you simply play()/reverse() in the mouseenter/mouseleave events. That's even more efficient (but GSAP is so fast it's not as if there's a performance problem with the way you're currently doing it - I just tend to be a performance nut). If you want the mouseenter animation to be longer, you can simply set the timeScale accordingly, sorta like:

 

const animation = gsap.fromTo(...); //create your tween once, set paused:true
                              
animateIconEnter = () => animation.timeScale(1).play();

animateIconLeave = () => animation.timeScale(6).reverse();

Just an idea. 

 

Lots of flexibility

 

Happy tweening!

[Kahlub]

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

.

[GreenSock]

That's because you're trying to animate something that doesn't exist yet when you create that animation. It hasn't even rendered yet. See the problem? The tween basically has a null target. 

 

I assume you meant to do something more like this: 

See the Pen f2b0d5197b6af1ad34223639b82a61eb?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help? 

[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.

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