Creating a smooth landing page reveal animation with CSS animations and vanilla JS

This is my first post on Dev, so I will keep it simple and short. Recently I came back to Codepen after years to do what I love the most - create awesome stuff(at least I try to).
And this time I decided to put the big guns (react, vue, webgl, etc) aside and use the ultimate old school swiss knife (html, CSS, JavaScript) to create something.
Animations and interactions attract me the most when I visit a website or a product. Hence I tried to create a small animation and I had two things in mind:
• Can I create something which does not require a lot of complex code or use of a library?
• Despite being simple it should offer delightful user experience and should be smooth!

I came up with this:

The idea

The concept behind the text reveal animation is dead simple.

1. Make a <div>.
2. Put some text in it.
3. Apply overflow: hidden on the div so that anything outside the box is not visible.
4. Move the text downwards and rotate it a by a few degrees using transform: translateY(200px) rotate(15deg).
5. Now the text is hidden because it is outside the box and tilted a little bit.
6. Create a CSS animation using @keyframes - Move the text upwards by 200px and rotate it to 0 deg by the end of the animation.

@keyframes slideup {
  0% {
    transform: translateY(200px) rotate(20deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

7.Now comes the fun part where you need to set the animation duration and other attributes as well as bezier curve for the animation. These attributes combined are the key to make a good animation.
I choose easeInOutCubic(0.65, 0, 0.35, 1) because it resembles the flow that I wanted in my animation. You can choose some other values depending on what you like and how you want your animation to look and feel like. Here's the class that enables the animation:

.animate-slideup {
  transform: translateY(200px) rotate(15deg);
  animation: slideup 1000ms cubic-bezier(0.65, 0, 0.35, 1) 1 forwards;
  transform-origin: top center;
}

Notice how initially the text is shifted 200px downwards in Y direction.

This is it. This is the css used to create that effect where the text slides up with a slight rotation. But it still does not feel good. Why?

It's because right now, we are animating the whole text at once. What we want is that the words flow up slowly and individually so that the animation seemsa bit more interesting.
To achieve that, we use some javascript magic ;)

1. We create a quote string.
2. Traverse that string and on each word, create a span using document.createElement("span"). Attach the class animate-slideup to that span and append this child to the parent . Also, we need to add an animation-delay on every traversal with the delay increasing at a constant rate on every iteration. Something like delay(in ms) = delay(in ms) + x(const).

   Congratulations!! This is it. This gives you the animation that you've been craving for. The flow that you couldn't get out of your head while you were trying to sleep. And god, you feel so great now!

   Extra efforts

   I added some extra animations(CSS only) which will reveal our hero text and our main animations. The code for that is simple too. Grow the width of a div till 50% of the time and then height from 2px to 100vh till 100% of the time. (in this case the light green background), render the main animation and at last a sweet rotating effect for the full stop to give a solid ending to our smooth animation.

   Parting words

   I failed at keeping this post short but I hope I made it simple. This is my first blog/post on any platform that I've written. I hope you enjoyed it! Let me know in the comments.

   You can follow me and get in touch with me on various social media accounts. I would love to talk to you, listen to your stories and experiences and help you out in any way possible!
   • Twitter
   • Codepen
   • Github
   • LinkedIn

   And lastly, remember, try to keep it simple because Simple is the new sexy!