Jump to content
GreenSock

AkhilRaja

Mouse cursor follow animation

Go to solution Solved by Cassie,

Recommended Posts

im trying to create this animation but its glitching for some reason i cant find, i tried to add delay: and then i use "<+=2.5" but its not working, sometimes it work if i dont move my mouse too much. please can anyone tell me where i made mistake or is this is the wrong way of making this timeline.

thank you

See the Pen BawmYQq by AkhilRaja (@AkhilRaja) on CodePen

Link to comment
Share on other sites

You're creating bunch of animations in your mousemove handler, which might be conflicting with the animations you created on the previous mouse move, so you should overwrite those...

 

See the Pen jOGaxWY by GreenSock (@GreenSock) on CodePen

 

  • Like 2
Link to comment
Share on other sites

On 12/26/2021 at 12:41 AM, OSUblake said:

You're creating bunch of animations in your mousemove handler, which might be conflicting with the animations you created on the previous mouse move, so you should overwrite those...

 

 

 

 

its still not working smooth or fine, i see stagger is look like off time or something, like image 2 is big and image 4 is big and rest of them getting small. Its only happen when animation gets complete and images getting small with no mouse movement. 

Link to comment
Share on other sites

Hey there!

A timeline might not be what you're after? Are you trying to make the images small when the cursor movement stops and then show them as the mouse moves around?

If so, you might want to hook into the velocity and then adjust the size of the images depending on how fast the mouse is moving.

This really isn't a great implementation, it's a buggy and I don't think movementX and movementY can be used in older browsers - but it might point you in the right direction!

See the Pen oNGpYLY?editors=0010 by GreenSock (@GreenSock) on CodePen



You also might like to look at quickSetter...

See the Pen WNNNBpo by GreenSock (@GreenSock) on CodePen

  • Like 3
Link to comment
Share on other sites

thank you @Cassie for creating this second way doing it with speed but i want to create this which i tried in my original code 

1. so when mouse move all the images will size from (0 to 1) with stagger animation.

2. all the images will be follow mouse cursor position which is working fine.

3. if mouse movement stop then image will size to (1 to 0) with stagger animation.

4. when mouse move all the images should hit (0 to 1) and then mouse stop and images will goto (1 to 0) and if i move mouse again then it should stop this animation "sizing (1 to 0)" or override it and play it something like (0.7 to 1).

Now if you see my original code all 3 points are following it but 4rth one is glitchy, sometimes it work and sometimes it doesn't and in @OSUblake code all 4 points are working but in 4 point sometime it has glitch of uneven size like (0.2, 0.7, 0.5, 0.3, 0.8,) its working but if images size can keep the stagger timing of image array 0 index to 3 as increasing or decreasing order size like (0.9, 0.8, 0.7, 0.6)

Link to comment
Share on other sites

  • Solution

Ok!  I see.

So currently the function is being called hundreds and hundreds of times on every mouse move, which means your timeline is constantly being overwritten


From your description you just want to

 

1) size them up when the mouse starts moving
2) make them small when it stops moving

 

So you'll need to detect those exact moments and then only animate the size when they happen.

See the Pen LYzeJWo?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 2
Link to comment
Share on other sites

  • 8 months later...

How to make it that this Image interaction only stays within one <div></div> and as soon as the mouse cursor leaves that div, the images go back to their original centered position? 

Link to comment
Share on other sites

Heya! Adding the event listener on a div instead of the window should get you some way towards that. If you need more help pop together a codepen demo with what you've tried.
 

myDiv.addEventListener("mousemove", (e) => {})

  • Like 1
Link to comment
Share on other sites

import React from "react";
import "./FollowImage.css"
import gsap from "gsap";
import Image from "react-bootstrap/esm/Image";

function FollowImage (){
let FollowBox = "#Wrap .FollowBox";
gsap.set(FollowBox, {
  xPercent: 1,
  yPercent: 1,
  scale: 0
});

const MyDiv = document.getElementById('Wrap')

function clamp(num, min, max) {
  return num <= min 
    ? min 
    : num >= max 
      ? max 
      : num
} 



window.addEventListener("mousemove", (e) => {
  gsap.to(FollowBox, {
    duration: 0.5,
    overwrite: "auto",
    x: clamp(-100+e.clientX - e.target.offsetLeft,-50,150),
    y: clamp(-100+e.clientY- e.target.offsetTop,0,150),
    stagger: 0.15,
    ease: "none"
  });
});

  return (
    
<div id="Wrap">
  <Image id="FollowBox"
    className="FollowBox"
    src="1000x600(mykhaylo).png"
    alt=""
  />
  <Image
    className="FollowBox"
    src="1000x600(music).png"
    alt=""
  />
</div>
  )
}




export default FollowImage;

This is my current code, so far I failed to translate it for codepen. 

 

On 9/26/2022 at 5:17 PM, Cassie said:

Heya! Adding the event listener on a div instead of the window should get you some way towards that. If you need more help pop together a codepen demo with what you've tried.
 

myDiv.addEventListener("mousemove", (e) => {})

 

Link to comment
Share on other sites

Ah ok, if you're using React it's going to be a little bit more fiddly, both to set up a demo and to get the animation working! That code you've provided above doesn't look valid.

Here's a starting point -

See the Pen PoeQePv?editors=0010 by GreenSock (@GreenSock) on CodePen



I suggest taking a look at our React guides too for a little more understanding of how to handle different situations 🥳

 

 

  • Like 3
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   1 member

×