Animating button on hover

[MG Dev]

Hi, I'm trying to add animation on hover in my button.

The animation work but I'd some issue in the element after the page scroll as you can see in this example

 

How can apply the animation to all page elements?

 

Thank you!

See the Pen VwYawbe by MG_Dev (@MG_Dev) on CodePen.

[ZachSaucier]

Hey MG and welcome to the forums. 

 

This isn't really a GSAP question but the answer is straightforward: 

// This gets the y position and subtracts the amount of scroll so far
y: e.clientY - $(window).scrollTop()

// It should be this instead
y: e.clientY

It's best to understand code that you're copying. That way you can catch errors like this and be able to modify it to your needs.

 

Happy tweening.

[MG Dev]

Thank you fro your reply but unfortunately it doesn't work

 

Maybe the problem is in this line

var $self = $(this);
// size
        var width = $self.outerWidth();
        var height = $self.outerHeight();

but I can't figure out how to change $self for all page area

[ZachSaucier]

Please do not save over previous demos. When you do, context is lost and the old version cannot be referenced to compare to. When creating new versions of the demo, please use the "fork" button on CodePen  

 

Changing it to y: e.clientY + $(window).scrollTop() seems to work fine:

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

 

[OSUblake]

7 hours ago, ZachSaucier said:

Changing it to y: e.clientY + $(window).scrollTop() seems to work fine:

 

e.pageY does the same thing.

[MG Dev]

Yes, this work fine...Thank you!