venizia03 Posted February 7, 2020 Share Posted February 7, 2020 Hello! I am starting to use gsap to add animations on website. I am trying to find if this is possible to animate a cube (3D rotation) based on the cursor position. Any idea? Thx! Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 7, 2020 Share Posted February 7, 2020 Hey venizia and welcome to the GreenSock forums! Thanks for being a Club GreenSock member. We couldn't do what we do without people like you. Yes, it is quite possible to rotate a cube based on cursor position. What sort of cube do you have? CSS? WebGL? If you provide a minimal demo we're happy to help you set it up if necessary The core of the approach is getting the mouse position and then setting (or tweening to) some rotation value based on a formula that you have set up. Here are some older threads related to the subject that might be useful to you. They don't use GSAP 3 but should be easy to convert if necessary: Link to comment Share on other sites More sharing options...
venizia03 Posted February 7, 2020 Author Share Posted February 7, 2020 Thx for your quick reply. Glad to be a club greensock member Below a codepen (really a start point from the moment): See the Pen dyoPYmb by venizia03 (@venizia03) on CodePen i will check the different post you gave me but honestly, I would appreciate some guidelines for this effect. thx! Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 7, 2020 Share Posted February 7, 2020 I don't know how you want it to rotate. Here's the basic setup: See the Pen vYOENwG?editors=0010 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
venizia03 Posted February 7, 2020 Author Share Posted February 7, 2020 Thx Zach for your help. I have updated the code pen with the solution I found thx to you. What about performance impact? Should I worry about it? Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 7, 2020 Share Posted February 7, 2020 7 minutes ago, venizia03 said: What about performance impact? Should I worry about it? If you have a lot of these or the element that you're rotating has filters or something intensive like that applied to it there might be an issue. Most the time you probably wouldn't be able to notice any performance impact. Link to comment Share on other sites More sharing options...
jonny_rich_ Posted May 15, 2023 Share Posted May 15, 2023 (edited) Would it be possible to affect say 30 cubes on in the same section, so that they all point to the cursor position? Each would have a slightly different angle — how would one go about calculating that? Edited May 15, 2023 by jonny_rich_ spelling Link to comment Share on other sites More sharing options...
GreenSock Posted May 15, 2023 Share Posted May 15, 2023 Sure, that's possible to do. Basically the same logic as shown in the demo(s) above (for each one). It's beyond the scope of help we can provide for free in these forums (please read the forum guidelines), but we'd be happy to answer any GSAP-specific questions. Good luck! 👍 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