Create a Rotating Textual content Animation Impact With CSS Variables and JavaScript

On this new tutorial, we’ll learn 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. 

Primary Textual content Rotating Animation

We’ll outline a h1 aspect the place we’ll put as spans all of the phrases that we wish to animate. By default, all spans could 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 can 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 performed in lots of different tutorials up to now, we’ll use CSS Grid to position all phrases on prime of one another. However keep in mind that every time, solely the phrase with the present class will seem. 

Listed below 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

  shade: #2ec4b6;

9

}

10

11

.words-wrapper .phrases {

12

  show: inline-grid;

13

  padding: 0 10px;

14

  border-radius: 6px;

15

  shade: 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 special phrase after a sure period of time, we’ll comply with this method:

• Each 1.5 seconds, we’ll goal the seen (lively) 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 lively phrase and add it to the brand new aspect.
• Lastly, we’ll seize the colours of the brand new lively 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.type.setProperty("--color", nextWord.dataset.shade);

12

  wrapper.type.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 other than one change; this time, we’ll add the subsequent class to the phrase that comes after the lively 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 gained’t use CSS Grid to place the phrases, however as an alternative, every phrase can be an absolute positioned aspect. Their instant dad or mum (i.e. the .phrases aspect) could have a width that may rely upon the width of the lively phrase. The subsequent phrase will seem easily from backside to prime after which transfer to the highest to vanish.

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 lively phrase’s width, we’ll set all phrases’ widths equal to the width of the most important phrase. On this case, we’ll use the !essential key phrase to override the width of the .phrases aspect that is set through the width CSS variable.

Listed below 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

  shade: #2ec4b6;

9

}

10

11

.words-wrapper .phrases {

12

  show: inline-block;

13

  place: relative;

14

  vertical-align: backside;

15

  width: var(--width);

16

  top: 60px;

17

  padding: 0 10px;

18

  border-radius: 6px;

19

  shade: 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

  remodel: translate(-50%, -100%);

31

  transition: remodel 0.7s, opacity 0.25s 0.25s;

32

}

33

34

.words-wrapper .phrases span.present {

35

  opacity: 1;

36

  remodel: translate(-50%, 0);

37

}

38

39

.words-wrapper .phrases span.subsequent {

40

  remodel: 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 indicate a special phrase after a sure period of time, we’ll comply with this method:

• Each 1.5 seconds, we’ll goal the seen (lively) and subsequent lively phrases.
• Then, we’ll discover the adjoining sibling phrase of the following lively phrase if it exists, in any other case, we’ll get the primary phrase.
• We’ll take away the present class from the lively phrase and the subsequent class from the following lively phrase.
• We’ll add the present class to the following lively phrase and the subsequent class to its adjoining sibling phrase.
• Lastly, we’ll seize the width and colours of the brand new lively 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.type.setProperty("--width", `${currentWord.offsetWidth}px`);

10

wrapper.type.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.type.setProperty("--color", nextWord.dataset.shade);

23

  wrapper.type.setProperty("--color-bg", nextWord.dataset.bgColor);

24

  wrapper.type.setProperty("--width", `${nextWord.offsetWidth}px`);

25

}, 1500);

I like to recommend you utilize 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 ideal addition to portfolio web sites or hero sections to focus on 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.