Gsap 3D rotation question

[Joy098]

I am fairly new to Gsap . Just wondering how this perspective header animations are done on
https://chroniclehq.com

and on https://pipe.com/

Where the app angles with 3d rotation. Anyone can guide me to the right direction please?

[mvaneijgen]

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! 

 

[elegantseagulls]

The gsap/scrollTrigger objects would look something like this:

gsap.to(el, {
  transformOrigin: '50% 0',
  rotateX: '50deg',
  scrollTrigger: {
    target: hero,
    start: 'top bottom'
    end: 'bottom top',
    scrub: true,
  }
})

You'll also want to make sure to set a perspective value in your CSS to the parent div.