This is our end goal.
Let’s add the HTML first.
Now, we need to bring the texts in one single line. Let’s do it by adding some style.
As we can see, now all the words and the other part of the sentence are on the same line. But as we can see all the words are on top of each other. We need to hide them and show them one by one to create the rotating effect. We will do that by setting opacity to 0.
Let’s get all the words in word variable. We’ll also create an empty array wordArray that will be used to store words one by one later on. To change the index we will create the currentWord variable with initial position at 0.
The first step to do is to make the first word visible from words array. We will simply change the opacity to 1 from 0 for the first word. Later on, we will do the same thing for each word one by one.
Now, we need move the word letter by letter. For that, we need to split the word into letters and do that for each word in the words array.
Let’s use for loop to loop through each word in the words array and split the word into letters. We will create a seperate function and call it with the word parameter.
Let’s go through the splitLetters() function. The first thing we did is to copy the the HTML contents of the passed parameter word into content variable and remove the HTML contents of word. We did that so that we can only show one word at a time. Also, we can use that empty variable to add each letters individually.
After that we created an empty array to store letters. After that using for loop, we loop through the content array which has the word copied into from the passed parameter.
Inside the for loop, we created an element and assigned attributes to it. We did that so that we can split the letters from the word and apply styles to individual letters. Now, we will use that empty word variable that we emptied earlier to append each letter one by one into it. We are also going to push each letter into letters array in the loop and when the loop ends we’ll push the letters variable into wordArray variable.
Now, let’s add some CSS classes for creating the rotating effect.
For main .letter class we are using transform property and setting the translateZ for all letters. We are also setting the transform-origin so that we can control how the letters are transformed and where the main pin point should be. (I call transform-origin values a pin. You can read about more in transform-origin post.)
The main trick in CSS classes is that we are rotating the letters by setting the transform property to rotateX(0), rotateX(-90deg) and rotateX(90deg). The 90 deg rotation will completely hide the letters from the view.
Now, let’s create a function to change the words.
Let’s breakdown the new code. In the changeWord() function we are going through words from the wordArray. We’ll store the current words in cw and new word in nw. nw will start over when it hits the end of the array.
After that, for each word in cw, we’ll call the function animateLetterOut and pass the cw and i (current loop index). In , we are just changing the classes of each letter. We have setTimeout added as well so that we can move through it in incremental time.
Same process we followed in the second loop where we went through each letter in nw and changed the classes. We are also changing the opacity of parent element from 0 to 1 and lastly calling a function animateLetterIn to apply the animation to letters going out.
At the end, we are changing the index currentWord by incrementing and getting the next index position so that we can get the next word from the wordArray.
Finally, when everything is done, all we need to do is call the changeWord() function with setTimeout.
Here is the complete demo and code:
The code is a smart work of Rachel Smith. The explanation is my work from the way I looked at the code.
animation opacity property rotate setTimeout style transform-origin