Image Scale and Custom cursor scale on hover

[dotsinspace]

i am trying to scale image on hover along with it i want to scale blue circle ( which is bounded to cursor ). but all it does is flicker. Please help me out
Demo: Flickering cursor

// Const assignment.

const _getAllElements = document.querySelectorAll('.projectWrapper')

 

// Execute gsap animation.

_getAllElements.forEach((el, __index) => {

// Const assignment.

const _el = `.projectWrapper:nth-child(${__index + 1}) > .projectImageWrapper > div`

 

// Add listener to given element.

document.querySelector(_el).addEventListener('mouseenter', () => {

_Gsap.default.to(_el, {

'scale': 2

})

})

document.querySelector(_el).addEventListener('mouseleave', () => {

// Rescale image to lowest value.

_Gsap.default.to(_el, {

'scale': 1

})

})

})

// Add listener to given element.

document.querySelector('.ProjectContainer').addEventListener('mouseenter', () => {

_Gsap.default.to('#Cursor', {

'width': 200,

'height': 200,

'margin': '-100px -100px'

})

})

document.querySelector('.ProjectContainer').addEventListener('mouseleave', () => {

_Gsap.default.to('#Cursor', {

'width': 10,

'height': 10,

'margin': '-10px -10px'

})

})

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[dotsinspace]

Sorry for my dumbness please delete this question sorry once again :*(

[Rodrigo]

Hi @dotsinspace,

 

Just out of curiosity, did you solve your issue? It seemed to be caused by the fact that the dot was triggering the mouse leave event and then the mouse enter was being triggered again?

 

Also there are no dumb questions around here. This is a safe place where users are always treated with respect and guided towards the best possible solution of their GSAP issues, so no need to be sorry about it

 

Let us know if you have more questions.

 

Happy Tweening!

[dotsinspace]

Seriously loved your answer thanks...no i didn't find out any answer brother and i prepared the codepen to show case the problem.

See the Pen vYaOXrx by dotsinspace (@dotsinspace) on CodePen

Please help me out.

[GreenSock]

Hi @dotsinspace. You can make it much more efficiently like this: 

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

• Use transforms (scale, x, y) instead of width/height/top/left/margin. Much cheaper for the browser to render because those properties don't affect layout. 
• Use gsap.quickTo() instead of recreating a whole new tween on every mousemove event for maximum performance.
• Make sure you set pointer-events: none in your CSS for the cursor, otherwise when it moves between the pointer and the item, it'll trigger a mouseleave, and then when you move the pointer fast enough to get outside the cursor, it'll trigger the mouseenter on the element below it. 

I hope that helps.