Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
ochalmers

Clip-path and mousemove effect

Recommended Posts

Hi guys!

As you can see in my codepen i've applied a clip-path to a group that is holding a gradient circle element, which will in turn mimic a kind of reveal. My main question is do you guys know why or how I can have the element completely follow the mouse within the surrounding box? At the moment it seems as if the transform on that certain element is working in relation to the viewbox. Do you guys know how I can work around this or approach it differently?

Thank you so much,

Oliver

See the Pen vWzGNM by olichalmers (@olichalmers) on CodePen

Link to post
Share on other sites

Hi @ochalmers

 

Your SVG coordinates aren't going to match up with your screen coordinates. GSAP makes SVG seems easy, but behind the scenes it can get really, Really, REALLY COMPLICATED!

 

 

I don't have time right now, but I'll show you how to use the correct coordinates later today.

 

  • Like 4
Link to post
Share on other sites

Thank you so much Blake! So are you saying I will correctly be able to move this circle (gradient) to the correct co-ordinates? I've been absolutely raking the net to find an answer but can't anywhere!

 

Thanks again for your reply :)

  • Like 1
Link to post
Share on other sites

Yeah, there's not a lot of documentation or tutorials about how to work with mouse or touch events inside an SVG. This is a really good example, but his code is kind of hard to understand.

https://stackoverflow.com/a/5223921

 

But I can rework your example later.

  • Like 3
Link to post
Share on other sites

Here you go. I simplified your demo just to make it easier to see what's going on. I used to the ModifiersPlugin to reduce object creation (creating a new tween on every mouse move), and as an easy way to pause the animation when not needed, like if your logo is no longer in the viewport.

 

 

See the Pen WXgyVZ?editors=0010 by osublake (@osublake) on CodePen

 

  • Like 5
Link to post
Share on other sites

Blake, you're an absolute star mate thank you so much.

 

Lovely work. 

  • Like 2
Link to post
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.

×