Adding Lerp functionality on timeline progress.

[mcode]

Hi to everyone, 

I am trying to make an skewX effect with Gsap and mouse move. I want to use the Linear Interpolation function in order to have  transition on timeline progress.

As you can see in the codepen demo, onmousenter the effect doesn't have any transition because the Lerp fuction doesn't work well.

On mouseleave works fine.

Can anyone help me?

See the Pen OJLZRbg by mcode84 (@mcode84) on CodePen.

[ZachSaucier]

Hey mcode and welcome to the forums.

 

You have a good bit going on in that demo. What exactly is your end goal? Could you describe it in more detail so that the code that you're using might make more sense to us?

 

In the mean time, maybe one of these threads can help.

 

 

 

[mcode]

Hi, thanks for the above information! I will check them out.

My main goal is to have a nice transition onmousenter as onmouseleave. 

If you try from left or right to hover the title you will see the title to skewX suddenly and not smoothly.

That's because onmousenter the "Lerp" doesn't works correctly. If you inpect the class "project__holder-title", onmousenter and on mouseleave  you'll understand what I' am saying.

[ZachSaucier]

Why write your own lerp function when you can just use GSAP's built in functionality? tweenTo() is perfect for this sort of thing:

 

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

 

Note that you can change the duration of the tweenTo by changing the value in the .duration() after it.

[mcode]

Using the lerp function you have a better control of the animation with the mouse move.

At your example if you try to increase the duration to 1, and move fast the mouse over the title, you will see that's not working.

Also the above codepen have  a problem, when moving left-right fast. The skew does't work well with  mouse position.

I can't understand why on mouse leave the lerp works fine(At the first example)..

Thanks for your answer, I appreciate it!

[ZachSaucier]

27 minutes ago, mcode said:

I can't understand why on mouse leave the lerp works fine

Most likely what is happening is that the mouseover fires (and may even work correctly) but then is overwritten by the mousemove event's function. I use a boolean to keep track of the animation in my version; you could likely do something similar to improve your version. I'd recommend either using your lerp version completely (if you want to use that to update the element using GSAP's timeline that's fine) or not using it - trying to mix custom lerping along with GSAP's tweens can get messy.

 

29 minutes ago, mcode said:

if you try to increase the duration to 1, and move fast the mouse over the title, you will see that's not working.

Understood, but I'm guessing that in practice it will be something small (like 0.1 or something) at which point it is very hard for a user to see any difference.

 

Anyway, this isn't really a GSAP question at this point. I hope you get it working like you're wanting.

 

Happy tweening!

[mcode]

Thanks for your time!