Jump to content
Search Community

Div follow mouse

Tootall test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello,

 

Im new with GreenSock and i can use some help.
Im trying to get a custom cursor/div follow mouse on specific divs (on hover). 

Like this one:
https://www.mattersmost.nl/werk/herpositionering-simon-levelt/  (top part & bottom part (on employees)

I've tried to play with the following CodePen ()

 

but that one just works on the whole body.
When i try to set the code on a specific div its not responsive & and i cant use it on other divs on the same page.

Does anyone know where to start?
 

See the Pen QQOmwW by anon (@anon) on CodePen

Link to comment
Share on other sites

Hey guys!

 

Mikel did beat me to it but I have a comment to make: Be aware of where your element is. Because pageX/Y, clientX/Y, offsetX/Y (amongst other attributes) all yield different values depending on a series of factors: size of the window, size of the screen, how much the page has scrolled and so on.

 

See the Pen RQjypW by dipscom (@dipscom) on CodePen

 

  • Like 6
Link to comment
Share on other sites

Hi all!

 

Wow you guys are great!

One more question: Is it possible to get this function on multiple divs on a page?

Example:
Div 1 (mouse follower is red)
Div 2 (mouse follower is blue)

Because in all your examples when i copy the div (with the mouse follow)  the effect is on the both divs.

Thanks in advance!

 

Link to comment
Share on other sites

@DipscomHere i am once again :P

It works great on my own created divs,  but now i am trying to build my website on Wordpress.
Im trying to show 4 news posts (with each the follow div in it).

The problem is that now all 4 news posts get the class parent parent1:

<?php
  $args = array(
    'post_type' => 'news',
    'posts_per_page' => 4,
  );
	$preview = new WP_Query($args);
    	?>

	<?php
		if ( $preview->have_posts() ) :
		while($preview->have_posts() ) : $preview->the_post();
	?>
                      
            <div class="newsPost">
                <div class="imageHolder parent parent1">
                    <div class="image" style="background-image: url('<?php the_field('news_image'); ?>');"></div>
                    <div class="follower arrow"></div>
                </div>
            </div>

<?php endwhile; endif; wp_reset_postdata();  ?>


Is there a way to automatically generate the parent selector? 
I thought something like this:
 

parent parent-<?php echo $i++; ?>


But i dont know how to let this work with the Jquery you provided.
For example on my news overview page im showing like 20 posts, and every week there is a new post.


 

Link to comment
Share on other sites

22 hours ago, Dipscom said:

Mikel did beat me to it but I have a comment to make: Be aware of where your element is. Because pageX/Y, clientX/Y, offsetX/Y (amongst other attributes) all yield different values depending on a series of factors: size of the window, size of the screen, how much the page has scrolled and so on.

 

I tend to stay away from using offsetX/offsetY because it doesn't work for touch, forces a layout / reflow, and absolutely worthless with SVG. The coordinates are also local, which may not be what you are expecting. It works for this particular use case, but may cause problems if you need screen coordinates.

 

Is the container 400px or 800px wide?

 

See the Pen MQrpaE by osublake (@osublake) on CodePen

 

 

I would also recommend creating your tweens outside of the mousemove event handler. I made this to show how many times an event will fire in-between animation frames. 

 

See the Pen yvpMaz by osublake (@osublake) on CodePen

 

 

Edge will fire around 17 times per frame on my computer. So for every second of mouse movement, you would be creating around 1020 tweens.

  • Like 5
Link to comment
Share on other sites

Aye, indeed Blake. Your comments are wise and welcome.

 

The suggestions I made are specific for this particular case, mouse only hover and local coordinate as stated in the brief.  -_-

 

The creation of the tweens outside the mousemove event is indeed a point to be noted. But give us mortals a break, we don't want to twist normal people's brains with having to calculate the physics of easing right in their first question, do we?

 

See the Pen OQQMXP?editors=0010 by dipscom (@dipscom) on CodePen

 

Edited by Dipscom
Adding a 'Blakefied' version of my original pen.
  • Like 4
Link to comment
Share on other sites

16 hours ago, Dipscom said:

The creation of the tweens outside the mousemove event is indeed a point to be noted. But give us mortals a break, we don't want to twist normal people's brains with having to calculate the physics of easing right in their first question, do we?

 

Yep. I have an issue with mouse following animations. Not that they look bad, but they can run really slow if you're not careful, which seems to be the case with a lot of sites.

 

And sometimes people can get too creative with them.

 

// False assumption... 
// If there are touch events, the user is using touch

if ("ontouchstart" in window) {
  // some clever stuff here like hiding the mouse cursor
  // and ignoring mouse events
}

 

Great. Now me and millions of other people who have a computer with a touch screen won't be able to interact with the site using a mouse.

 

 

  • Like 2
Link to comment
Share on other sites

Totally. There is plenty of things along those lines out in the world.

 

In a way it is good for the likes of us as it makes sure we will always have work to do improving those sites. On the other hand, it's pretty bad experience if the site that's doing it is one that you and other millions need to use frequently.

  • Like 1
Link to comment
Share on other sites

15 minutes ago, Dipscom said:

In a way it is good for the likes of us as it makes sure we will always have work to do improving those sites. On the other hand, it's pretty bad experience if the site that's doing it is one that you and other millions need to use frequently.

 

I don't frequent any sites that do that. But almost every mouse move animation question on this forum (with the exception of this one) has linked to an example with the bad user experience I'm talking about. They block mouse events if there are touch events so I have to open the site up in Edge to get around their false assumptions, but then Edge fires mouse move events constantly, so the animation is really slow.

 

  • Like 1
Link to comment
Share on other sites

@Dipscom The blocks with the custom cursors are almost done!

But im getting the following bug when i tried to get the same effect on a slider.

See the Pen QQQOWY by Tootal (@Tootal) on CodePen


I'm trying to get the custom cursor over a slider. (the slider works with mouse drag or button clicks).
When i hover the red part the cursor goes back to the beginning and the whole effect is weird.

I think its because the slider uses css with transform / translate etc.

 

Link to comment
Share on other sites

From above...

 

On 2/17/2018 at 5:07 AM, OSUblake said:

I tend to stay away from using offsetX/offsetY because it doesn't work for touch, forces a layout / reflow, and absolutely worthless with SVG. The coordinates are also local, which may not be what you are expecting. 

 

It's using the local coordinates of every element you move your mouse over. If you want it to work all over your page, then use pageX/pageY. If you want it to work on certain elements, then use clientX/clientY and subtract getBoundingClientRect from it.

 

And you need to be careful about what transitions you have in your CSS. They will conflict with GSAP if they target the same property.

 

See the Pen qxxYZK by osublake (@osublake) on CodePen

 

 

 

 

  • Like 2
Link to comment
Share on other sites

  • 1 year later...

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