Rotating 3D Text

[tinarc]

Hey all my GSAPers! I found this cool heading effect on https://khaby.rocani.co/ and tried to recreate it in React / NextJS. I was wondering if anyone knew why the text in the demo im linking, is not rotating in the same matter. Im wondering if it has something to do with perspective of the parent container? Any help is highly appreciated!

https://stackblitz.com/edit/stackblitz-starters-zg7lch?file=components%2FRotatingtext.tsx

See the Pen globals.css by edit (@edit) on CodePen.

[Rodrigo]

Hi,

 

Indeed if you inspect the site you're linking you'll see that all <h2> elements have the same width, so that should be the first thing to achieve is to give every element and it's parent the same width and see if that works. Also at some point rotate the entire container element instead of each element individually. If you check carefully on the url you shared the elements are rotated individually until they reach 0 degrees on the Y axis, then they are all rotated at the same time,  so also you should try to get all elements at 0 degrees and then animate the entire parent.

 

Hopefully this helps

Happy Tweening!

[tinarc]

Thank you Rodrigo for the tips, I didnt quite solve it but it did get better, something still feels off here tho: https://stackblitz.com/edit/stackblitz-starters-anyoos?file=components%2FRotatingtext.tsx
 

[Rodrigo]

You're still moving each element individually in a staggered way, my idea is to move the container of all three elements:

<div class="wrapper">
  <div class="container">
    <h2></h2>
    <h2></h2>
    <h2></h2>
  </div>
</div>

My idea is to move each <h2> until rotationY is 0, then move the element with the class "container", which  should also be wrapped in an element with perspective on it as well. It could be possible to have the element wit the class "wrapper" to be the only one with perspective (I haven't played with 3D stuff in a while so I'm a bit rusty on these concepts).

 

Finally you can replace your code with this without any issues:

  .from(text.current, {
  	rotationY: -80,
  })
  .fromTo(text.current, { opacity: 0 }, { opacity: 1 }, '<')
  .to(text.current, {
    y: -216.51,
    duration: 5,
  })
  .to(container.current, {
    ease: 'none',
    duration: 1,
    rotationY: 70,
  });

There is definitely no need for this with GSAP:

.to(text.current, {
  transform: 'translate3d(0px, -216.51px, 0px)',
  duration: 5,
})

Hopefully this clear things up

Happy Tweening!

[tinarc]

By moving each h2 to rotationY = 0, do you mean rotating each h2 individually and when the first h2 reaches 0degrees then the container rotates?

15 hours ago, Rodrigo said:

You're still moving each element individually in a staggered way, my idea is to move the container of all three elements:

<div class="wrapper">
  <div class="container">
    <h2></h2>
    <h2></h2>
    <h2></h2>
  </div>
</div>

My idea is to move each <h2> until rotationY is 0, then move the element with the class "container", which  should also be wrapped in an element with perspective on it as well. It could be possible to have the element wit the class "wrapper" to be the only one with perspective (I haven't played with 3D stuff in a while so I'm a bit rusty on these concepts).

 

Finally you can replace your code with this without any issues:

  .from(text.current, {
  	rotationY: -80,
  })
  .fromTo(text.current, { opacity: 0 }, { opacity: 1 }, '<')
  .to(text.current, {
    y: -216.51,
    duration: 5,
  })
  .to(container.current, {
    ease: 'none',
    duration: 1,
    rotationY: 70,
  });

There is definitely no need for this with GSAP:

.to(text.current, {
  transform: 'translate3d(0px, -216.51px, 0px)',
  duration: 5,
})

Hopefully this clear things up

Happy Tweening!

 

[Rodrigo]

Nopes, when all three elements are at 0 degrees, move the container with all three elements.

 

I think the best approach is to create a single timeline for this, while I understand the approach of having three different components, it'd be better to have the animation in the parent component, keep in mind that you can scope your selectors with useGSAP so getting all 3 <h2> elements would be quite simple. So you can create a staggered animation for the three <h2> and then add a single tween to the timeline for the container and control everything using ScrollTrigger on that Timeline:

https://gsap.com/resources/getting-started/Staggers

 

Happy Tweening!

[Rodrigo]

I had some time so I made this simple demo illustrating my idea:

See the Pen GRbaZJV by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!