Jump to content
GreenSock

_youri

flip image

Recommended Posts

Hi,
I've found this Pen on the forum. And I wonder how to modify the code to flip the image "only" when pointer is over the image ?
Actually I'd like to apply this flip effect on 2 images independently. I mean eachone can be flipped.

Thank you !
 

See the Pen PPOdmw by emanuelbaran (@emanuelbaran) on CodePen

Link to comment
Share on other sites

Hey @_youri

 

You could wrap your funtionality in a function and change your box to the event-target

 

function mouseMove(e) {
   var xPos = (event.clientX/$(window).width())-0.5,
       yPos = (event.clientY/$(window).height())-0.5,
       //box = $('.box'),
       box = e.target;
       coord = $('.coordinates')
  
  		...

 

and then

instead of applying that function to mousemove on the document, you could apply it on mouseenter of the .box and remove it again on mouseleave.

 

$('.box').on('mouseenter', function() {
  $('.box').on('mousemove', mouseMove)
})


$('.box').on('mouseleave', function() {
  $('.box').off('mousemove', mouseMove)
})

 

 

You could also add another tween on mouseleave to make it go back to its original position

 

 

See the Pen f9e1c2228d53cabb25f3549ad53dba43 by akapowl (@akapowl) on CodePen

 

 

One thing I would highly recommend, is migrating things to a more recent version of GSAP.

That pen you posted uses a veeery old version (2.1.3) and also a very old version of jquery, too.

 

 

Hope this helps getting a basic understanding of how to achieve what you thought of, though.

 

Cheers,

Paul

 

  • Like 4
Link to comment
Share on other sites

 

That is, because it listens to the mouseposition in relation to the window and animates the image according to that.

 

Thus, depending on where your image is positioned inside the window when hovering it, you will only see it move in a certain direction.

You can check that with the picture of the plane on your demo-page when scrolling, for example.

If it is in the upper portion of the window, you will see it behave differently, than when it is in the lower portion of the window.

  • Like 2
Link to comment
Share on other sites

Ok, I've understood, fine !
Thank you for the fix and quick response!

Link to comment
Share on other sites

 

You'd have to find a way to make it check inside the image bounds only, but that is over my head atm.

 

Since the demo you provided uses jquery, if it makes things easier for you, you could also use a library, such as tilt.js

 

It doesn't rely on animating things with GSAP, but it seems to do what you intend just fine, and you wouldn't have to worry about what's under the hood.

 

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