Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Ilse

Move object when mouse hovers over

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

Hi Everyone!

I'm new here at GSAP and I'm trying to create an interactive infographic. (final goal) 
For now, I want to move the right image when the mouse hovers over it. When the mouse doesn't hover over it, the image should go back to the starting position. It's a quite easy movement but for one reason the code doesn't work. Can anyone tell me what I'm doing wrong?
 

Thanks in advance :)

See the Pen gxvyje by ilsethijs (@ilsethijs) on CodePen

Link to post
Share on other sites

Hi and welcome to the GreenSock forums.

 

Thanks for the demo. There were a few little problems.

 

  • hover() is deprecated in the version of jQuery you are using
  • HTML you have class"beerRight" (missing =) instead of class="beerRight"
  • in JS you are using beerright instead of beerRight

beerRight should be working below. I took out beerLeft as I was troubleshooting.

 

See the Pen KvQjMq?editors=1011 by GreenSock (@GreenSock) on CodePen

 

In general it is a little troublesome having an object move away on mouseenter as it can trigger a mouseleave (depending on where the mouse is and how far the object moves)

  • Like 4
Link to post
Share on other sites

Hi @Ilse,

 

I would like to pick up the hint of CARL. 

 

I don´t know your layout/concept, but you could define a 'hover area' as you want independent from e.g. the image.

 

In this example the area is the #container (marked with green border):
 

See the Pen qXxzMe by mikeK (@mikeK) on CodePen

 

Kind regards

Mikel

 

  • Like 3
Link to post
Share on other sites

Thanks for the help Carl and Mikel! You guys clarified a lot for me :)

  • Like 1
Link to post
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.

×