Attempt at recreating an interesting text reveal

[fantaz]

I recreated initial text reveal animation from AROCK’s website and am pleased with the result. Any thoughts on optimization or suggestions for improvement? Do you think their approach was similar?

 

See the Pen rNbbRje by fantaz (@fantaz) on CodePen

[Rodrigo]

Hi,

 

Looks nice. The only change I'd do is to use yPercent instead of a percentage string:

gsap.from(lines, {
  yPercent: 100,
  rotationX: -90,
  rotationY: -30,
  duration: 0.5,
  ease: "power2.out",
  stagger: 0.08,
  transformOrigin: "center left"
});

Also in order for rotations on the X and Y axis to take effect you need to add perspective and a z value in the transform origin. I'd recommend you to read this article by David DeSandro on the subject:

https://3dtransforms.desandro.com/

 

Hopefully this helps.

Happy Tweening!

[fantaz]

8 hours ago, Rodrigo said:

Hi,

 

Looks nice. The only change I'd do is to use yPercent instead of a percentage string:

gsap.from(lines, {
  yPercent: 100,
  rotationX: -90,
  rotationY: -30,
  duration: 0.5,
  ease: "power2.out",
  stagger: 0.08,
  transformOrigin: "center left"
});

Also in order for rotations on the X and Y axis to take effect you need to add perspective and a z value in the transform origin. I'd recommend you to read this article by David DeSandro on the subject:

https://3dtransforms.desandro.com/

 

Hopefully this helps.

Happy Tweening!

Thanks Rodrigo ❤️

You are correct, better to use yPercent. Regarding the perspective, it was added to the "container" div which is the animated text's parent. Do you think it's better to add it using gsap.set?

[Rodrigo]

6 hours ago, fantaz said:

Do you think it's better to add it using gsap.set?

Shouldn't really matter, the only suggestion we have around here when it comes to transforms is to always use GSAP for setting initial values that later you will animate with GSAP, perspective shouldn't be affected by setting it with CSS or GSAP.

 

Finally remember to add a Z value in the transform origin, because right now your rotations are just in 2D:

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

 

Happy Tweening!

[fantaz]

6 hours ago, Rodrigo said:

Shouldn't really matter, the only suggestion we have around here when it comes to transforms is to always use GSAP for setting initial values that later you will animate with GSAP, perspective shouldn't be affected by setting it with CSS or GSAP.

 

Finally remember to add a Z value in the transform origin, because right now your rotations are just in 2D:

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

 

Happy Tweening!

I removed the Z rotation since I couldn't make it work. Do you even think they used it? I honestly can't tell if my animation is the same as theirs.

Also, I could use help with FUOC on the title...

[Rodrigo]

Yeah, we got you covered, check this article from our Learning Center:

https://gsap.com/resources/fouc/

 

Hopefully this helps.

Happy Tweening!

[PointC]

Feels like the origin is much higher on the targets in that example. I also don't think there is any z rotation. Just a trick of the perspective. Here's a quick fork of your demo. I also switched to SplitText instead of SplitType. This is a GSAP forum after all. 😉

 

See the Pen dyLERxK by PointC (@PointC) on CodePen

 

Hopefully that helps. Happy tweening.