Jump to content


Assistance with hover gallery

Moderator Tag
Go to solution Solved by GreenSock,

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 all, i'm attempting to build a gallery that is able to be navigated by hovering around your browser window. The idea would be when you hover in the top right of the window you see the upper right chunk of content, and similarly if you hover in the bottom left you'd see the bottom left chunk. You can see the effect working to a T here - http://www.jakobdeboer.com/gallery/series/ . Attached is my codepen which has the basics of it working but it really seems to dislike working within anything larger or smaller than the current 200% given to the container wrapper. I was hoping a fresh pair of eyes may be able to shed some light on what's going wrong with my prototype?



See the Pen rOJeYq by olichalmers (@olichalmers) on CodePen

Link to comment
Share on other sites

Are you asking about the animation itself or about how to make all the images arrange themselves in the layout properly (with some padding)? 

Link to comment
Share on other sites

Isn't it because you've only got width: 200% set in your .content css, and not height: 200% as well?

.content {
  position: absolute;
  width: 200%;
  left: 0;
  top: 0;
  z-index: 100;
Link to comment
Share on other sites

Hey guys,


Thanks for getting back to me. I have significantly slimmed down the codepen demo now to illustrate the effect i'm after. What I want to be able to do is to use the browser window to map the positions of the container div and then navigate to that part of the div. So now I have it as only one image (i've set the width to 150% of the browser window, but this could be anything). The idea would be that you would be able to see the bottom right of the div (or in this case an image) by hovering your mouse to the bottom right of the browser window. If you held your mouse in the direct middle of your browser window you'd be in the direct centre of the div or in this case the image. I suppose this is more of a maths based question than a direct GSAP question, but I was hoping some of you kind fellows would be able to assist in any shape way or form. Maths is not my strong point!



Link to comment
Share on other sites

  • Solution

I assume you meant something like this:



Notice I made it tween a bit so that it "feels" slicker, and I added a "padding" variable that lets you add some space around the edges so that the user doesn't have to move their mouse ALL the way up/down/left/right to get to the edge of the image (I find that awkward). You could probably boost it up to 50 or 100 depending on how you want things to feel. 


I hope that helps. :)

  • Like 4
Link to comment
Share on other sites

Jack - you are a star, thanks so much for this. Quick question - what is the reasoning for the if statements that sets the x and y to 1 / 0 ? Thanks again - this is perfect and exactly what I was after.

Link to comment
Share on other sites

That logic that clamps x/y to no more than 1 and no less than 0 is necessary for the "padding" to work properly (otherwise when your mouse is within that padding area, the image would move beyond its maximum/minimum, like you'd see a gap between the edge of the window and the image). 


Glad that was what you were looking for! Math in programming can be pretty fun and useful :)

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.