Mouse cursor follow animation

[AkhilRaja]

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

[OSUblake]

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

 

[AkhilRaja]

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. 

[Cassie]

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

[AkhilRaja]

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)

[Cassie]

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

[AkhilRaja]

thank you @Cassie and @OSUblake for helping me on this. it was interesting topic and i learn so much from it.

[MishaA]

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? 

[Cassie]

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

[MishaA]

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

 

[Cassie]

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 🥳

 

 

[alechance]

On 12/28/2021 at 12:35 PM, Cassie said:

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.
 

 

Hi @Cassie I was looking to animate my set of images like you did here with a mouse cursor follow. Also here is another kind of mouse follow that only display one by one like here https://our-revolution.com/, is it possible to show one image then the next one when your cursor is moving and so on?

Thank you for your help.

[Cassie]

Heya! Sure - it's possible, I'm afraid it's a little more than I have time to help with though.

If I were you I'd start off with the example I linked to and mess around, try things out! Experimentation is a great way to learn. If you get stuck with a specific part, pop back with a minimal demo and I'll see if I can help shed some light on it

 

[Vasil]

On 12/25/2021 at 9:11 PM, 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...

 

Thank you! <3