Jump to content
GreenSock

ankitdetroja

facing problem in cursor animation

Go to solution Solved by elegantseagulls,

Recommended Posts

Heya!

 

You're telling it to scale here -
 

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

 

  • Like 1
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

  • Solution

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

  • Like 2
Link to comment
Share on other sites

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

 

 

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×