Jump to content
Search Community

move in a large div with the cursor position

christof test
Moderator Tag

Recommended Posts

Of course - GSAP can animate literally anything JavaScript can touch. So all the movement can be handled by GSAP, but you'd need to wire up all the logic. There isn't an automated effect that does it all for you. 

 

I'd probably think of it like the window.innerWidth and window.innerHeight are mapped to the width/height of your overall bounding box of the whole area, and just animate the x/y of the container according to the position of the mouse in the viewport. gsap.quickTo() may come in very handy. Also, gsap.utils.mapRange(). 

 

Good luck!

  • Like 1
Link to comment
Share on other sites

Just an Idea, that might or might not work for you, if you set slight different transformZ values on you images and a matching perspective on the container, you might get the parallax  more or less for free. (you could also animate the z-value with GSAP - maybe in relation to the movement speed of the mouse - Observer plugin comes very handy for those things)

And as I'm on it - using tilt sensors on tablets and mobiles can be very cool... ;-)

  • Like 1
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.
×
×
  • Create New...