Jump to content
Search Community

Move object when mouse hovers over

Ilse test
Moderator Tag

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 comment
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 comment
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.
×
×
  • Create New...