Jump to content
Search Community

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

Posted

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.

Posted

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
Posted

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
Posted

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

  • Like 1

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...