Jump to content
GreenSock

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

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

Thank you !!!

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.
×