Jump to content
Search Community

adding delay on the div which follows the cursor (on react.js)

amapic test
Moderator Tag

Go to solution Solved by Sam Tremblay,

Recommended Posts

Hello, 

I just would like to do this classical trick but I didn't find the right way to do it with react.

I tried the code below :

 

let xTo = gsap.quickTo(".mousemove", "x", {
        duration: 0.6,
           ease: "power3",
        }),

and it should be trigger by :

 

window.addEventListener("mousemove", (e) => {
    ctx.xTo(e.pageX);
})

but it doesn't work.

 

I put all this in this codesandbox : https://codesandbox.io/p/sandbox/falling-river-ygqcdo


For the moment, my code only succeeds to make a div follow the cursor but with no delay. (with quickSetter)

 

How to do ? 

See the Pen by (@) on CodePen

Link to comment
Share on other sites

  • Solution

Hello @amapic!

 

Put a look on this example:

import gsap from './gsap/index.js';
import gsapCore from './gsap/gsap-core.js';

class App{
	constructor(){
		this.moveLight();
	}
	moveLight(){

		const x = gsap.quickTo('#id_element_to_move', 'x', {duration: .5, ease: 'power2'});
		const y = gsap.quickTo('#id_element_to_move', 'y', {duration: .5, ease: 'power2'});

		window.addEventListener('mousemove', (e) => {

			x(e.clientX);
			y(e.clientY);

		});

	}
}

new App();

 

Happy Tweening!

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