Многие веб-сайты, и особенно сайты-портфолио, используют эффект печати текста на машинке. Выглядит это действительно круто, и сегодня мы разберем, как воспроизвести такой эффект в своем проекте. Теме более, с библиотекой Greensock сделать это будет достаточно легко.

Итак, приступим. Для начала нужно подключить библиотеку gsap.min.js. Сделаем это самым быстрым и простом способом - через CDN:

/cdnjs.cloudflare.com/ajax/libs/gsap/3.0.5/gsap.min.js
// ссылка актуальна на момент написания статьи (19.10.2020)

Теперь нам нужно создать какое-то предложение, например: “Это эффект печатной машинки”. Поместим его между тегами

:

Это эффект печатной машинки

Как Вы заметили, абзацу присвоены css-классы type-me и text-description.

Переходим к CSS:

body {
    display: flex;
    justify-content: center;
    font-family: Courier, serif;
}
.text-description {
  width: 702px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 3em;
}

Ширина текста является очень важным параметром, так как от нее зависит JavaScript-анимация. Свойство width должно соответствовать ширине текста.

Переходим к JavaScript.

Сперва мы создадим экземпляр класса TimelineMax.

const tl = new TimelineMax()

Теперь создадим анимацию для t1:

tl.fromTo(".type-me", 5, {
  width: "0",
}, {
  width: "702px", /* ширина равна ширине абзаца */
}, 0);

Для элемента с классом type-me мы установливаем ширину равной 0, а затем увеличиваем ее до 702 пикселей в течение пяти секунд. В результе мы получаем плавную анимацию увеличения ширины элемента за отведенный промежуток времени - уже хорошо, но не то, что нам нужно.

Именно здесь на помощь приходит библиотека Greensock, которая позволяет разбить процесс на шаги, количество которых равно количество символов в строке (включая знаки препинания и пробелы, так как мы симулируем работу печатной машинки):

tl.fromTo(".type-me", 5, {
  width: "0",
}, {
  width: "702px", /* ширина равна ширине абзаца */
  ease:  SteppedEase.config(24)
}, 0);

Используем метод config объекта SteppedEase со значением 27, что равно количеству символов в строке.

Теперь мы получили превосходный анимационный эффект печати на машинке.

Вот пример на codepen:

Спасибо за внимание.