jkhaui Posted May 9, 2020 Share Posted May 9, 2020 Hi, this is best explained by viewing the example directly: https://vx-demo.now.sh/gallery Notice how when you move your over a card - in particular the corner areas - the elevation of the card becomes more depressed in one area but more elevated in the opposing corner. This gives it a subtle tilting effect. I have no idea where to even start to reproduce this with GSAP, so any guidance is greatly appreciated. Link to comment Share on other sites More sharing options...
ZachSaucier Posted May 9, 2020 Share Posted May 9, 2020 Hey jkhaui and welcome to the GreenSock forums! Thanks for being a Club GreenSock member - we couldn't do what we do without people like you. If you inspect the element being hovered, you can see that this effect is simply created by using rotational transforms. More specifically, on the mouseover event the distance and position from the element's center is calculated and then the element is rotated based on that distance and direction according to a formula. This thread talks about the same effect: 1 Link to comment Share on other sites More sharing options...
jkhaui Posted May 9, 2020 Author Share Posted May 9, 2020 No worries Zach, I'm always happy to support anything I feel is of high quality And perfect - that thread is exactly the solution I'm looking for. Thanks a lot! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now