Jump to content
Search Community

Optimization for Custom Cursor & Best Way to Call a Function on Scroll

Dushyant Kumar test
Moderator Tag

Recommended Posts

Hey Dushyant and welcome to the GreenSock forums.


I'm curious: why do you have an animation inside of the mousemove listener and try to set the position in the ticker? They are going to overwrite each other. 

 

13 minutes ago, Dushyant Kumar said:

i  want to remove  .hover-active on scroll

Are you talking about changing the cursor back to the default if someone hovers an element then scrolls?

 

One way would be to keep track of the scroll position the last time that the mouse moved. Then in the scroll event you check to see if that's over a maximum distance and change it back to the default. 

Link to comment
Share on other sites

1 minute ago, ZachSaucier said:

Hey Dushyant and welcome to the GreenSock forums.


I'm curious: why do you have an animation inside of the mousemove listener and try to set the position in the ticker? They are going to overwrite each other. 

 

Are you talking about changing the cursor back to the default if someone hovers an element then scrolls?

 

One way would be to keep track of the scroll position the last time that the mouse moved. Then in the scroll event you check to see if that's over a maximum distance and change it back to the default. 

Yeh  Sir   i want to make it default whenever users scroll

 

Plz Suggest some  Optimization 

Thankyou so much for reply

Link to comment
Share on other sites

I want Some Smoothness so   i need some animation inside mousemove

and for performance optimization i used ticker

 

what is the best way to do so   

 

 

gsap.to(dpkCursorMouse,{
            duration:.25,
            x: e.x,
            y: e.y,
            ease:'sine.out'          
          })
Link to comment
Share on other sites

7 minutes ago, ZachSaucier said:

I did :) Do you have a specific question?

How Can I optimize This Sir

 

 

const dpkCursor = document.querySelector(".dpkCursor");
 
 
 
   gsap.set(dpkCursor, { xPercent: -50, yPercent: -50 });
 
   let dpkCursorPos = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
   let dpkCursorMouse = { x: dpkCursorPos.x, y: dpkCursorPos.y };
  
 
    window.addEventListener("mousemove", e => {
        // best Power4.out  or sine.out
        gsap.to(dpkCursorMouse,{
            duration:.25,
            x: e.x,
            y: e.y,
            ease:'sine.out'          
          })
    });
 
    let dpkCursorSpeed = 1;
    let dpkCursorXSet = gsap.quickSetter(dpkCursor, "x", "px");
    let dpkCursorySet = gsap.quickSetter(dpkCursor, "y", "px");
 
    gsap.ticker.add(() => {
        dpkCursorPos.x += (dpkCursorMouse.x - dpkCursorPos.x* dpkCursorSpeed;
        dpkCursorPos.y += (dpkCursorMouse.y - dpkCursorPos.y* dpkCursorSpeed;
        dpkCursorXSet(dpkCursorPos.x);
        dpkCursorySet(dpkCursorPos.y);
    });
Link to comment
Share on other sites

6 minutes ago, Dushyant Kumar said:

what is the best way to do so

gsap.to(dpkCursorMouse,{
            duration:.25,
            x: e.x,
            y: e.y,
            ease:'sine.out'          
          })

At the least you should apply overwrite: true to this tween so that it kills off previous ones. Otherwise you can just adjust the formulas in the ticker to affect the ease:

dpkCursorPos.x += (dpkCursorMouse.x - dpkCursorPos.x) * dpkCursorSpeed;
dpkCursorPos.y += (dpkCursorMouse.y - dpkCursorPos.y) * dpkCursorSpeed;

 

Link to comment
Share on other sites

Thankyou  This work good

 

  window.addEventListener("mousemove", e => {
        // best Power4.out  or sine.out
        gsap.to(dpkCursorMouse,{
            duration:.10,
            x: e.x,
            y: e.y,
            ease:'sine.out',
            overwrite:true,
 
          })
    });
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...