Hey there 👋
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]
After piecing together sections of code from around the web, and before I discovered GSAP.
This is what I had.
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.
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.