Centering and mouse follow

[AndreasBP]

Hello, im having this problem where im trying to have a hovering effect that follows my mouse. But i simply cant make it be in middle of mouse. It worked when i had it in another single project, where it was 100% height and width. But when i put it inside this project, it wont work when the window is taller. 

Im very new to GSAP, and webdeveloping in general.

Thanks in advance!

See the Pen zYerGMY by AndreasBP (@AndreasBP) on CodePen

[Rodrigo]

Hi @AndreasBP and welcome to the GSAP forums!

 

Just a CSS issue here. You have an element with fixed position but with no top or left position set initially, so it gets positioned after the other elements. Just specify it's top and left position and it works:

.teaser {
  width: 250px;
  height: 250px;
  background-color: #4c4c4c;
  position: fixed;
  pointer-events: none;
  cursor: pointer;
  opacity: 0;
  overflow: hidden;
  /* SET TOP AND LEFT POSITION */
  top: 0;
  left: 0;
}

Here is a fork of your codepen with those changes:

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

 

Hopefully this helps.

Happy Tweening!

[Rodrigo]

I forgot, you might want to have a look at this demo as well

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

 

Happy Tweening!

[AndreasBP]

Damn. Many thanks!

[AndreasBP]

It worked perfectly. Again, thanks for the quick problem solving!