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


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) => {

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{

		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) => {




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