facing problem in cursor animation

[ankitdetroja 1 Likes (Newbie)]

why every time I hover on link my radius of animated circle changed?

See the Pen RwLJOLB by abd786007 (@abd786007) on CodePen

[Cassie 4,860 Likes (Superhero)]

Heya!

 

You're telling it to scale here -
 

gsap.to(cursorInner, hoverEffectDuration, {
    scale: 1.6,
  });
gsap.to(cursorOuter, hoverEffectDuration, {
 scale: 1.2,
 // opacity: 0,
});

 

[ankitdetroja 1 Likes (Newbie)]

@Cassie no i am not talking about cursorInner or cursorOuter. I am talking about round animated text. cursorTextContainerEl

 

hover three time on link you will understand.

 

[elegantseagulls 1,340 Likes (Superhero)]

Because that animated circle text is being appended as a child of your cursor, so it's getting the scale property from its parent.

[ankitdetroja 1 Likes (Newbie)]

@elegantseagulls got it. Thanks 😉

[Cassie 4,860 Likes (Superhero)]

Oh right, what an odd one.. 

I removed all the scaling and actually it looks like rotation is causing an issue. If you get rid of the rotation tween it works fine.

I don't know how the third party library work that you're using for the circle text - so I'm afraid I can't really advise any more, something is messing with the calculations it needs...

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

Maybe you could roll your own solution?

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath

 

 

[ankitdetroja 1 Likes (Newbie)]

@Cassie Great Thank you 😇!!!