Jump to content
Search Community

Text following the cursor

DD77 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

I'm trying to implement a bit of gsap in here, perhaps a autoAlpha when I hover the pin.
The issue I'm having is that the text doesn't seems to be next to the pin correctly. 

- when  I hover the pin  with the mouse, the text should follow the mouse and it should be next to it.

I hope it makes sense.

 

       window.onmousemove = function (e) {
            var x = e.clientX,
                y = e.clientY,
                i, l = tooltipSpans.length;
            for(i = 0; i < l; i++){
              tooltipSpans[i].style.top = (y - 220) + 'px';
              tooltipSpans[i].style.left = (x - 420) + 'px';
            }
        };

 

See the Pen GXJKBV?editors=1010 by davide77 (@davide77) on CodePen

Link to comment
Share on other sites

The problem with the original pen is that the CSS had the element positions fixed with some absolute offsets and some relatively positioned parents and then some calculations being made to dynamically affect the style.top and style.left. That's a lot to deal with!

 

So, I find it easier to relatively/absolutely position the "hot-spots" and then position the tooltips absolutely within those parents at some "home" position. That could be 0 0 ... but in this case we don't want the text to overlap the hotspot by default, so I opted for 40px 40px.

 

Now, that gets the initial position of the tooltips in place out of the gates ... not need for javascript at this point (which is good for graceful degradation).

 

Now all we want to do is move the tooltip a small amount relative to the cursors position over the hotspot ... and we have a really good way to handle that with little calculation: the x/y position of the cursor minus the left/top position of the hotspot +/- some spacing (to your preference) and then use transform: translate(x,y) to move that small amount relative to its current position.

 

See the Pen rZVNRb by sgorneau (@sgorneau) on CodePen

 

  • Like 2
Link to comment
Share on other sites

47 minutes ago, DD77 said:

Hi @Shaun Gorneau thanks Shaun, this is great. 
Do you know how to add a bit of gsap in here? So it shows with opacity? 

 

Absolutely. Here is an edit with onmouseover to tween the opacity. onmouseout, on the other hand, is not tweening out because of what i suspect to be some interfering CSS. There are a lot of display, opacity, and visibility declarations making that a bit cumbersone to pinpoint.

 

I also removed "transition: all .4s"  ... making the follow much more snappy.

 

See the Pen rZVNRb by sgorneau (@sgorneau) on CodePen

 

  • Like 2
  • Haha 1
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...