Change hover cursor to image on each gallery item

[Louienator]

Hi, good day. Is there a way that i can change the cursor everytime the i hover on an item?

Here's the fiddle that i made.. i'm confused on what did i do wrong..

https://jsfiddle.net/kf67zpe0/3/

 

Cheers and thank you

[GreenSock]

I assume you were looking to do something like this?: 

See the Pen dyjywaZ?editors=0110 by GreenSock (@GreenSock) on CodePen

 

Your version had quite a few issues, like:

1. Variables were referenced out of scope, throwing errors
2. A new callback was being added to the gsap.ticker on every single mousemove which is extremely inefficient
3. A new gsap.set() was created on every tick too (inefficient)
4. There's really no need for jQuery

Much of this code was borrowed from the mouse follower example in the gsap.quickTo() docs: 

https://greensock.com/docs/v3/GSAP/gsap.quickTo()

 

I hope that helps!

[Louienator]

Hi Jack, apologies for the late reply.. Yeah this is what i want but when i applied it in my website then the starting point of the cursor will not reset.. it will just go down .

 

[GreenSock]

It's very difficult to troubleshoot blind. I wonder if you didn't apply position: fixed to the cursor element's CSS. Please make sure you very carefully follow the example I provided, including the CSS. If you still have trouble, please make sure you provide a minimal demo so that we can see the issue in context.

[Louienator]

Apologies Jack.. here.. when the cursor enters on the top portion of the image, the circle will show at the bottom.. seems a bit weird..

[GreenSock]

A screenshot doesn't help, sorry. We need to see the HTML, CSS, and JavaScript live in the browser. Like in a CodePen that can be tinkered with. The problem could be your CSS, a 3rd party library, your markup, or all kinds of things. If you want help, please make sure you provide a minimal demo. 

[Louienator]

i've customized your code and i don't know why it didn't worked..

here's the fiddle:
https://jsfiddle.net/o8tavks3/20/

[Rodrigo]

Hi,

 

You have a syntax error:

var tl = gsap.timeline();

var items = tl.utils.toArray(".gallery-item__inner"), // Here
    cursor = document.querySelector(".me"),
    xTo = tl.quickTo(cursor, "x", {duration: 0.3, ease: "power3"}), // Here
    yTo = tl.quickTo(cursor, "y", {duration: 0.3, ease: "power3"}); // Here

The issue is that you're referencing the timeline instance. There is a difference between an instance and GSAP core constructor. The utils object and the quickTo method is part of the core constructor, not a timeline instance.

https://greensock.com/docs/v3/GSAP

https://greensock.com/docs/v3/GSAP/Timeline

 

This seems to work the way you expect:

var tl = gsap.timeline();

var items = gsap.utils.toArray(".gallery-item__inner"),
    cursor = document.querySelector(".me"),
    xTo = gsap.quickTo(cursor, "x", {duration: 0.3, ease: "power3"}),
    yTo = gsap.quickTo(cursor, "y", {duration: 0.3, ease: "power3"});

Hopefully this clear things up. Let us know if you have more questions.

 

Happy Tweening!

[Louienator]

Hi Rodrigo, mind if i ask? how to reposition the cursor to center? because i tried absolute but it doesn't work. when you hover, the arrow cursor is not in the center.

https://jsfiddle.net/qh5e1gfd/2/

[GreenSock]

I assume you meant to do something like this?: 

var items = gsap.utils.toArray(".gallery-item__inner"),
    cursor = document.querySelector(".me"),
    xTo = gsap.quickTo(cursor, "x", {duration: 0.3, ease: "power3"}),
    yTo = gsap.quickTo(cursor, "y", {duration: 0.3, ease: "power3"});
    
gsap.set(cursor, {xPercent: -50, yPercent: -50, autoAlpha: 1, scale: 0, pointerEvents: "none"});

window.addEventListener("mousemove", (e) => {
  xTo(e.pageX);
  yTo(e.pageY);
});

items.forEach((item) => {
  item.addEventListener("mouseenter", () => {
    gsap.to(cursor, {scale: 1, duration: 0.2, overwrite: "auto"});
  });
  item.addEventListener("mouseleave", () => {
    gsap.to(cursor, {scale: 0, duration: 0.01, overwrite: "auto"});
  });
});

https://jsfiddle.net/t6byepfa/

[Louienator]

Thank you so much Jack.. now, i'm dissecting your code line by line so that i can understand how did you came-up with that idea. Cheers mate!

[Louienator]

Hi Jack, Last quesiton.. I've changed the gsap.util to bannerHover so that it'll be unique but bec. it didn't fire in my end. and when i checked the console, it says "cannot read property of undefined"

here's my code

https://jsfiddle.net/2L74ymj0/13/

[Cassie]

Heya, no this is definitely 100% not valid at all.
 

var bannerHover = gsap.timeline();

bannerHover.utils.toArray(".box-inner a")
bannerHover.quickTo(cursor, "x", {duration: 0.3, ease: "power3"})

quickTo and utils are a method belonging to GSAP itself, they aren't timeline methods. There's no need to reassign GSAP itself to a different variable name. What's your thinking here? Is there something you're trying to avoid or guard against?

[Louienator]

 Hi Cassie, i'm trying to avoid conflicts cause it didn't work, maybe a conflict with my other gsap animation i guess. 

[GreenSock]

I don't understand what you mean by that, sorry. What exactly didn't work? Where's the minimal demo that's broken? When I put the code into your demo that I provided, it seems to work great. What am I missing? 

 

Here are some tips that will increase your chance of getting a solid answer:

 

• A clear description of the expected result - "I am expecting the purple div to spin 360degrees"
• A clear description of the issue - "the purple div only spins 90deg"
• A list of steps for someone else to recreate the issue - "Open the demo on mobile in IOS safari and scroll down to the grey container" 
• A minimal demo - if possible, using no frameworks, with minimal styling, only include the code that's absolutely necessary to show the issue. Please don't include your whole project. Just some colored <div> elements is great.

 

[Robbor]

Hey there,

 

Thanks for the help that has already been provided here. Everything works for me. But now I have encountered a problem. If I place a container with 90% width, position relative and margin-auto (all 3 must haves) around your demo, the cursor has an offset to the actual mouse position. Seen here. I'm currently in the process of researching what it is. Maybe it's easy for pros? I'm still a beginner learning GSAP here. 

 

https://jsfiddle.net/epLra8bj/

 

Thank you for your time.
Greetings Robin

[Rodrigo]

Hi @Robbor,

 

Since you have a known width for your main container (90%) you know that the margin on each side (the left side is the one we care about actually) is 5% of the window object's width, so just offset your calculations with that and the dimensions of the mouse follower:

let _width = window.innerWidth;

window.addEventListener("mousemove", (e) => {
  xTo(e.pageX - 30 - _width * 0.05);
  yTo(e.pageY - 30);
});

window.addEventListener("resize", () => _width = window.innerWidth);

Here is a fork of your fiddle:

https://jsfiddle.net/f26qnvp0/2/

 

Hopefully this helps.

Happy Tweening!

[Robbor]

Hi Rodrigo,

thank you for your quick response. I'm researching again because I think we're addressing a symptom here, but not the cause. Maybe I haven't fully understood it yet
What I mean is: why does everything work perfectly with position: static, but no longer with position:relative. As soon as I switch to relative, the mouse coordinates are no longer correct and the cursor is offset.
I don't always know the offset, so your solution doesn't work 100% for me.

Example: container has max-width:1000px, margin:auto.
Or content with variable height on top ( same problem with the Y coordinate offset).

 

 

https://jsfiddle.net/rsk257bd/1/

 

[mvaneijgen]

You're fighting a CSS spec here. You've created an element that tis relative to the container it is in and it can not be out of the element. You can do a few things in this instance. 

 

• Move the element out of the container so that it is not relative to anything 
• Make the element position: fixed;
• Calculate where the mouse is relative to the box it is in.

The easiest is just to move the cursor element outside everything and make sure it doesn't have a parent element. Also I've removed your timeline, because each mouse enter and leave you were creating new tweens to that timeline and I've also set xPercent: -50, yPercent: -50 to the initial .set() so that the element is in the middle of the cursor.

 

I'd looked at your question yesterday and was almost done debugging it, but then jsfiddle just froze on me and I couldn't do anything on the page anymore, that is why I've moved to codepen here. 

 

Hope it helps and happy tweening! 

 

See the Pen qBvLLVQ?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[Robbor]

Thanks mvaneijgen, 

 

Now I finally understand it It works now.
Many thanks for the help to everyone. Great forum.