Jump to content

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

Custom mouse cursor with ScrollTrigger.scrollerProxy()

Go to solution Solved by OSUblake,

Recommended Posts

Hello everybody,

I try to get a custom cursor using native scroll proxy. I don't know if this is the best way. It's work with mouse move event .I have compensated the transformed position of '#content'  but when I make scroll not working.


 window.addEventListener( 'mousemove', ( event )=>{
   const style = window.getComputedStyle(document.querySelector('#content'));
      const matrix = new WebKitCSSMatrix(style.transform);
      gsap.to('#triangle',{ x: event.clientX, y: event.clientY - matrix.m42, yPercent:-50, xPercent:-50, duration: .05})

Somebody knows how to get this result when we make scrolling?


See the Pen QWpYKRb by sanprieto (@sanprieto) on CodePen

  • Like 1
Link to comment
Share on other sites

  • Solution

The cursor should have a position of fixed.


Here's an example of following the cursor.


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




  • Like 3
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.