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

[amapic 3 Likes (Newbie)]

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

[Rodrigo 5,889 Likes (Superhero)]

Hi

 

Right now I can't check your example but hopefully this example provides some inspiration and/or ideas to accomplish what you want

 

https://greensock.com/react-advanced#imperative-communication

 

Hopefully this helps.

Happy Tweening!

[Sam Tremblay 24 Likes (Newbie)]

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!

[amapic 3 Likes (Newbie)]

Thanks