Jump to content

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

Using GSAP to hover scroll around the window / element

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, 


This is my first time posting on these forums. I'm a regular browser but have yet to post! 

First off - love Greensock. It has transformed how I go about building and designing websites and applications due to the power of it. It really is awesome!

My question today is quite broad, but if possible i'd love somebody to point me in the right direction as to how to complete it.


I was wondering what's the best method to use a hover state to navigate around a div, both horizontally and vertically through CSS transforms. Would you have to give the div a strict width and height then navigate around that? 

The effect I'm looking to replicate is used here - http://www.jakobdeboer.com/gallery/series/ which i've noticed uses tweenmax to scroll through the div.

I know this isn't a very specific question, but if somebody could point me in the right direction I'd be very grateful.

Thanks, Oliver

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


Nice effect indeed!!


But instead of using scroll Chrysto came up with this concept some time ago:


See the Pen GjAfd by bassta (@bassta) on CodePen


Hopefully that's enough to get you started.



Link to comment
Share on other sites

Thanks for your very speedy reply Rodrigo!

That is a lovely example of using a parrallax with tweenmax, so thank you for that :)


The process I am more looking to uncover is how to navigate through a div of content whilst using the dimensions of that window as the directions. As with the example of http://www.jakobdeboer.com/gallery/series/the 4 columns of content obviously overflow horizontally and vertically (with the overflow of the div and body set to hidden as there are no scrollbars) but then you're able to navigate in any which way you want once you hover. I'm assuming you'd integrate GSAP with the mousemove event? 


Sorry, it's quite difficult to articulate what it is i'm getting at :( 



Link to comment
Share on other sites



One thought just crossed my mind.


You could create two tweens, one for animating the vertical position and another to animate the horizontal position of the element, and based on the mouse position, relative to the screen center, you can move each tween forwards or backwards.

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.