Jump to content
Search Community

Clip-path and mousemove effect

ochalmers test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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,


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

Link to comment
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 comment
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 comment
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.
  • Create New...