Jump to content
GreenSock

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

Using GSAP to hover scroll around the window / element

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

 

Rodrigo.

Link to post
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 :( 

 

Oliver

Link to post
Share on other sites

Hi,

 

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

×