Create a Rotating Text Animation Effect With CSS Variables and JavaScript

On this new tutorial, we’ll discover ways to create a rotating textual content animation impact utilizing CSS variables and JavaScript. Though we are able to definitely construct a easy text-changing animation in pure CSS, we’ll put within the loop JavaScript to make issues extra maintainable and efficient. 

Fundamental Textual content Rotating Animation

We’ll outline a h1 factor the place we’ll put as spans all of the phrases that we wish to animate. By default, all spans may have the data-bg-color and data-color customized attributes that may decide their textual content and background colours accordingly. Plus, initially, solely the span with the present class shall be seen—the primary one in our case.

Right here’s the required markup format:

1
<h1 class="words-wrapper">
2
  I wish to study <span class="css">CSS</span> and
3
  <span class="phrases">
4
    <span class="present" data-bg-color="#ffc703" data-color="#000">React</span>
5
    <span data-bg-color="#004e98" data-color="#fff">TypeScript</span>
6
    <span data-bg-color="#8cb369" data-color="#000">Python</span>
7
    <span data-bg-color="#104911" data-color="#fff">PrestaShop</span>
8
    <span data-bg-color="#b8c0ff" data-color="#000">Ruby</span>
9
    <span data-bg-color="#e71d36" data-color="#fff">Angular</span>
10
    <span data-bg-color="#e2c044" data-color="#000">WordPress</span>
11
    <span data-bg-color="#065a82" data-color="#fff">Node</span>
12
  </span>.
13
</h1>

As we’ve achieved in lots of different tutorials previously, we’ll use CSS Grid to put all phrases on prime of one another. However keep in mind that every time, solely the phrase with the present class will seem. 

Listed here are all of the required kinds:

1
.words-wrapper {
2
  font-size: 40px;
3
  font-weight: daring;
4
  text-align: heart;
5
}
6

7
.words-wrapper .css {
8
  colour: #2ec4b6;
9
}
10

11
.words-wrapper .phrases {
12
  show: inline-grid;
13
  padding: 0 10px;
14
  border-radius: 6px;
15
  colour: var(--color, #000);
16
  background: var(--color-bg, #ffc703);
17
}
18

19
.words-wrapper .phrases span {
20
  grid-area: 1/1;
21
  show: none;
22
}
23

24
.words-wrapper .phrases span.present {
25
  show: block;
26
}

To indicate a unique phrase after a sure period of time, we’ll comply with this method:

  • Each 1.5 seconds, we’ll goal the seen (energetic) phrase.
  • Then, we’ll discover its adjoining sibling phrase if it exists, in any other case, we’ll get the primary phrase.
  • We’ll take away the present class from the energetic phrase and add it to the brand new factor.
  • Lastly, we’ll seize the colours of the brand new energetic phrase and replace the corresponding CSS variables.

Right here’s the required JavaScript:

1
const wrapper = doc.querySelector(".phrases");
2
const CURRENT_CLASS = "present";
3

4
setInterval(() => {
5
  const currentWord = wrapper.querySelector("span.present");
6
  const nextWord = currentWord.nextElementSibling
7
    ? currentWord.nextElementSibling
8
    : wrapper.firstElementChild;
9
  currentWord.classList.take away(CURRENT_CLASS);
10
  nextWord.classList.add(CURRENT_CLASS);
11
  wrapper.fashion.setProperty("--color", nextWord.dataset.colour);
12
  wrapper.fashion.setProperty("--color-bg", nextWord.dataset.bgColor);
13
}, 1500);

We’ll find yourself with the next demo:

Advanced Textual content Rotating Animation

Let’s now construct on the earlier instance and create one thing extra elegant!

The markup will stay the identical aside from one change; this time, we’ll add the subsequent class to the phrase that comes after the energetic one, like this:

1
<h1 class="words-wrapper">
2
  I wish to study <span class="css">CSS</span> and
3
  <span class="phrases">
4
    <span class="present" data-bg-color="#ffc703" data-color="#000">React</span>
5
    <span class="subsequent" data-bg-color="#004e98" data-color="#fff">TypeScript</span>
6
    <span data-bg-color="#8cb369" data-color="#000">Python</span>
7
    <span data-bg-color="#104911" data-color="#fff">PrestaShop</span>
8
    <span data-bg-color="#b8c0ff" data-color="#000">Ruby</span>
9
    <span data-bg-color="#e71d36" data-color="#fff">Angular</span>
10
    <span data-bg-color="#e2c044" data-color="#000">WordPress</span>
11
    <span data-bg-color="#065a82" data-color="#fff">Node</span>
12
  </span>.
13
</h1>

In contrast to the earlier instance, we received’t use CSS Grid to place the phrases, however as an alternative, every phrase shall be an absolute positioned factor. Their speedy mother or father (i.e. the .phrases factor) may have a width that may rely on the width of the energetic phrase. The following phrase will seem easily from backside to prime after which transfer to the highest to vanish.

How each word is placed in the containerHow each word is placed in the containerHow each word is placed in the container

On small screens the place the textual content splits into a couple of line, to keep away from line flickering that will happen relying on the energetic phrase’s width, we’ll set all phrases’ widths equal to the width of the biggest phrase. On this case, we’ll use the !essential key phrase to override the width of the .phrases factor that is set through the width CSS variable.

Listed here are all of the required kinds:

1
.words-wrapper {
2
  font-size: 40px;
3
  font-weight: daring;
4
  text-align: heart;
5
}
6

7
.words-wrapper .css {
8
  colour: #2ec4b6;
9
}
10

11
.words-wrapper .phrases {
12
  show: inline-block;
13
  place: relative;
14
  vertical-align: backside;
15
  width: var(--width);
16
  peak: 60px;
17
  padding: 0 10px;
18
  border-radius: 6px;
19
  colour: var(--color, #000);
20
  background: var(--color-bg, #ffc703);
21
  box-sizing: content-box;
22
  transition: all 0.7s;
23
}
24

25
.words-wrapper .phrases span {
26
  place: absolute;
27
  prime: 0;
28
  left: 50%;
29
  opacity: 0;
30
  rework: translate(-50%, -100%);
31
  transition: rework 0.7s, opacity 0.25s 0.25s;
32
}
33

34
.words-wrapper .phrases span.present {
35
  opacity: 1;
36
  rework: translate(-50%, 0);
37
}
38

39
.words-wrapper .phrases span.subsequent {
40
  rework: translate(-50%, 100%);
41
}
42

43
@media (max-width: 700px) {
44
  .words-wrapper .phrases {
45
    width: var(--width-mobile) !essential;
46
  }
47
}

When the DOM is prepared, we’ll specify the preliminary width of the .phrases wrapper by updating the values of the width and width-mobile CSS variable values.

Subsequent, much like the earlier instance, to point out a unique phrase after a sure period of time, we’ll comply with this method:

  • Each 1.5 seconds, we’ll goal the seen (energetic) and subsequent energetic phrases.
  • Then, we’ll discover the adjoining sibling phrase of the subsequent energetic phrase if it exists, in any other case, we’ll get the primary phrase.
  • We’ll take away the present class from the energetic phrase and the subsequent class from the subsequent energetic phrase.
  • We’ll add the present class to the subsequent energetic phrase and the subsequent class to its adjoining sibling phrase.
  • Lastly, we’ll seize the width and colours of the brand new energetic phrase and replace the corresponding CSS variables.

Right here’s the required JavaScript:

1
const wrapper = doc.querySelector(".phrases");
2
const phrases = wrapper.querySelectorAll("span");
3
const currentWord = wrapper.querySelector("span.present");
4
const wordsWidths = Array.from(phrases).map((phrase) => phrase.offsetWidth);
5
const maxWordsWidth = Math.max(...wordsWidths);
6
const CURRENT_CLASS = "present";
7
const NEXT_CLASS = "subsequent";
8

9
wrapper.fashion.setProperty("--width", `${currentWord.offsetWidth}px`);
10
wrapper.fashion.setProperty("--width-mobile", `${maxWordsWidth}px`);
11

12
setInterval(() => {
13
  const currentWord = wrapper.querySelector("span.present");
14
  const nextWord = wrapper.querySelector("span.subsequent");
15
  const nextNextWord = nextWord.nextElementSibling
16
    ? nextWord.nextElementSibling
17
    : wrapper.firstElementChild;
18
  currentWord.classList.take away(CURRENT_CLASS);
19
  nextWord.classList.take away(NEXT_CLASS);
20
  nextWord.classList.add(CURRENT_CLASS);
21
  nextNextWord.classList.add(NEXT_CLASS);
22
  wrapper.fashion.setProperty("--color", nextWord.dataset.colour);
23
  wrapper.fashion.setProperty("--color-bg", nextWord.dataset.bgColor);
24
  wrapper.fashion.setProperty("--width", `${nextWord.offsetWidth}px`);
25
}, 1500);

I like to recommend you employ the browser console to examine the phrases and see how they behave. 

We’ll find yourself with the next demo:

Right here’s what we’re going to create. It’s an incredible addition to portfolio web sites or hero sections to spotlight issues.

Conclusion

On this tutorial, we used CSS variables and JavaScript to construct a textual content animation impact the place sure phrases change after a selected interval. This can hopefully encourage you to create much more thrilling issues by altering maybe a couple of phrase concurrently, and so forth.

As at all times, thanks rather a lot for studying!

Uncover Extra JavaScript-Primarily based Textual content Results

Inquisitive about extra artistic textual content animation results with JavaScript? If that’s the case, try these tutorials: 

Trending Merchandise
[product_category category=”trending” per_page=”8″ columns=”2″ orderby=”date” order=”desc”].

We will be happy to hear your thoughts

Leave a reply

MyStudioCafe
Logo
Compare items
  • Total (0)
Compare
0