Jump to content
Search Community

Creating tilt.js effect using transform: matrix3d

kodralex test
Moderator Tag

Recommended Posts

Hi,

 

New to using gsap, very good so far. Just wrapping my head around the functions. I'm currently using tilt.js (little jQuery plugin) to adjust perspective on some elements on hover. It works fine, but i've see a few sites doing the same function using gsap - with better effect (much smoother). I've got an example of what i'm trying to achieve here: https://www.raoul-gaillard.com/work if you move your cursor around you will notice maybe 3 different image elements tilt around. I can see this is being done using gsap. 

 

Can anybody point me in the right direction where to start in creating something like this? I'm sure there is a bit of work involved, i'm just unsure where to start (hence why i've not attached a codepen - sorry).

 

Any help will be greatly appreciated. 

 

Thanks

Link to comment
Share on other sites

Hey kodralex and welcome to the GreenSock forums. Thanks for supporting GreenSock with a Club GreenSock membership!

 

This effect is actually pretty straightforward. You just map the mouse position to some range of values for each element that you want to rotate. In its essence for a single element you can see this post:

Same sort of thing with a CSS 3D element:

Another one:

If you have more specific questions please ask and we'll do our best to help.

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