Text Fade In With Skew

[Guest]

Hey everyone,

 

I am trying to find examples of how the effect on large headline on the top here can be achieved. The text fades in with an elastic behaviour (skew). I thought it would be easy to find a CodePen example or a piece of code somewhere but I couldn't. Can you point me in the right direction? Ideally the text would reveal with scroll.

 

Thanks!

[ZachSaucier]

Hey pkid and welcome.

 

If you right click the element and inspect it using your dev tools you can see something like this:

translate3d(0px, -0.0188vh, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0.00564deg)

The only two values that change if you scroll the page are the y translation and the y skew. First, create an animation that changes the heading like you want it to.

 

The only thing left to do at that point is attach the animation to the scroll position of the page. As for how to do that, there are lots of threads that can help: