ScrollSmoother with center cursor image on hover

[JayShukla]

Greetings,

 

I'm trying to center the cursor image on hover with the scroll smoother, I checked the document where it says that the fixed content should be outside the smooth scroll container. But the hover image inside the red box is part of the container.

 

Is there something we can do to manage fixed objects within the scroll smoother?

See the Pen bGOoQbp by henrymanektech (@henrymanektech) on CodePen

[Rodrigo]

Hi,

 

There were a couple of logic issues in your codepen.

 

This returned an empty array:

gsap.utils.toArray(".container");
console.log(gsap.utils.toArray(".container")); // -> []

So that loop did nothing.

 

Then you had a wrong selector in your ScrollSmoother setup:

const smoother = ScrollSmoother.create({
  content: "#content",
  smooth: 1,
  normalizeScroll: true, 
  // ignoreMobileResize: true, 
  effects: true,
  preventDefault: true
 });

There is no element with that ID on your DOM tree, so you have to change it to a class selector.

 

This seems to work the way you expect:

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

 

Hopefully this helps.

Happy Tweening!

[JayShukla]

Hello @Rodrigo, Thanks for your reply. Yep, because it was a last-minute quick demo.

 

But my real question still stands. You can see in your demo that if you hover over the red background the images are visible but not in the middle of the cursor and if you scroll the image slips off the cursor.

 

Video - Dropbox Link

 

How can we manage these images in the middle of the cursor while hovering?

[GreenSock]

That's because @Rodrigo accidentally used .clientY instead of .pageY for the element positioning that's not position: fixed: 

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

 

If you really need it to update on scroll, that's more tricky because there's no corresponding mouse event that gives you access to .pageY, so you'd need to track the scroll offset and adjust accordingly, like in an onUpdate on the ScrollSmoother instance maybe.