Jump to content
Search Community

Gsap 3D rotation question

Joy098 test
Moderator Tag

Recommended Posts

  • Joy098 changed the title to Gsap 3D rotation question

Hi @Joy098 welcome to the forum!


We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  


My recommendation would be open the DevTools of your browser and inspect the element that is rotating (probably takes awhile to find it, but watch for changing values, that usually indicates that something is animating. On the site of the first link it looks like they are animating the property of rotateX(0) to a maximum of rotateX(-45deg). I would recommend opening up a code pen and playing around with that property, keep in mind that if you want to have perspective: 1000px on the parent element to make 3D work. The second example is a lot more complex, but I leave that one for you to debug, know that you don't learn from looking at code, open up a codepen and get your hands dirty, that is the best way to learn! 


You probably also want this to happen on scroll, right? But best thing to do with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. Hope it helps and happy tweening! 


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