Animate based on Cursors distance from Element

[samuelhigginson]

Hey there 👋

 

I have no real idea of what I'm doing when it comes to javascript, but I'm totally hooked on the interactions and animations that are possible when using it.

And today I discovered GSAP, which seems to tie all that stuff together very nicely.

So here I am asking for help, trying to implement GSAP into my most recent 'Project'.

 

What I'm trying to do is replicate an interaction on the Wieden + Kennedy home page.

 

The closer your cursor gets to the featured project title (lower left of the screen) the more it's underline grows.

When the cursor reaches the project title, the underline reaches it's full length, and underlines the project title.

 

I'll also point out that it doesn't matter where your cursor is hovered on that featured project title, the underline stays at it's maximum value.

(Something I've been having trouble figuring out)

 

[It's definitely easier to see this in action than to read my crappy explanation of it, so it might be worth clicking the link up there]

 

Phewf.

 

After piecing together sections of code from around the web, and before I discovered GSAP.

This is what I had.

 

See the Pen MWKBjJm?editors=0110 by samuelhigginson (@samuelhigginson) on CodePen

 

It's.. kind of something that works?

But there are a couple of things that aren't quite right.

 

• My line starts to get going as soon as the cursor enters the viewport. On W+K's page there seems to be some kind of 'Trigger Div' which initiates the interaction.
• My line only reaches 100% when the cursor is exactly in the centre of the Project Title.  W+K have a much more satisfying 'Hover anywhere on the Project Title' thing going on.
• If the window resizes, the distances change and things go wrong.

 

And the final difference I can spot, and what ultimately led me to GSAP.

• That delicious easing.

 

My lines width is a scaled replication of the cursors distance from the Project Title. What W+K have, is a buttery smooth, slippery sliming line.

And I'm all about that.

 

So I got to googling and came across this post, here on the GreenSock forum.

 

I noticed some similarities between the solution offered there and what I had going on, so I forked the pen and started trying to merge that solution with my own.

And I ended up with this.

 

See the Pen LYGgaab?editors=1111 by samuelhigginson (@samuelhigginson) on CodePen

 

Not great.

But.. not totally disgusting?

 

I know I've probably over complicated this massively,  and my approach and calculations are probably way off.

But this is all my perfectly smooth brain can manage, for now.

 

So I'm reaching out to you people with the GreenSocks and asking for help.

 

Anything you can suggest to get this little line dancing would be greatly appreciated.

 

Cheers.

 

 

 

 

 

See the Pen LYGgaab by samuelhigginson (@samuelhigginson) on CodePen

[elegantseagulls]

The math in your first codepen seems better than the second. If you combined that math with the gsap quickSetter, I think you'd be in business!

https://greensock.com/docs/v3/GSAP/gsap.quickSetter()

 

See the Pen WNNNBpo by GreenSock (@GreenSock) on CodePen

 

The example has an element following the mouse, but you could just as easy make that control your line's width.

[ZachSaucier]

Hey Samuel and welcome to the GreenSock forums. You're using a really old version of GSAP. We highly recommend using GSAP 3 because it has a smaller file size, a sleeker API, and a bunch of new features.

 

This isn't exactly the same effect, but my first inclination is to use a tween and affect its progress. To determine the progress I decided to just use the distance from the mouse position to the center of the title since that's simple to calculate. And if the title is hovered, set the progress to 1.

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