Jump to content
GreenSock

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

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

Recommended Posts

Hello Sir !

I want Some Optimization On my Custom Cursor Example

 

and most importantly i  want to remove  .hover-active on scroll  ( plz suggest some logic in the place where i comment in codepen )

in  the best way  as calling a function on scroll  may create lag or jank

Link to post
Share on other sites

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 post
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 post
Share on other sites
3 minutes ago, Dushyant Kumar said:

Suggest some  Optimization 

I did :) Do you have a specific question?

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

×