Как сделать плавный эффект разбрасывания и сбора букв?

Question

Всем добрый день . Делаю такой эффект:

Каждая буквы текста разбрасываются по всему экрану и через несколько секунд возвращается на то положение где должна быть и всё это происходит плавно.

Я сделал код разбрасывания и сбора букв на своих местах , но не знаю как сделать плавный сбор букв. Помогите пожалуйста.

Заранее спасибо.

Вот ссылка на Codepen

let text =
  'За это время мы опубликовали ряд книг, альбомов, научных работ по культурному наследию Узбекистана';
let textBottom = document.getElementById('textBottom');
let letter = document.getElementsByClassName('letter');
let textBottomArray = [];

for (let i = 0; i < text.length; i++) {
  textBottomArray[i] = text[i];
}

function createElement(itemArray, item) {
  for (let i = 0; i < itemArray.length; i++) {
    item.innerHTML += `<span class="letter">${itemArray[i]}</span>`;
  }
}

function scatterElementRandom(item) {
  for (let i = 0; i < item.length; i++) {
    let randomX = Math.random() * 0.9 * window.innerWidth;
    let randomY = Math.random() * 0.9 * window.innerWidth;
    if (i % 5 == 0) {
      item[i].style.bottom = `${randomX}px`;
      item[i].style.right = `${randomY}px`;
    } else if (i % 3 == 0) {
      item[i].style.top = `${randomX}px`;
      item[i].style.left = `${randomY}px`;
    } else if (i % 7 == 0) {
      item[i].style.bottom = `${randomX}px`;
      item[i].style.left = `${randomY}px`;
    } else {
      item[i].style.top = `${randomX}px`;
      item[i].style.right = `${randomY}px`;
    }
  }
}

function returnElementPosition(item) {
  for (let i = 0; i < item.length; i++) {
    item[i].style.fontSize = '';
    item[i].style.top = '';
    item[i].style.left = '';
    item[i].style.bottom = '';
    item[i].style.right = '';
  }
}

createElement(textBottomArray, textBottom);

scatterElementRandom(letter);

setTimeout(() => {
  returnElementPosition(letter);
}, 2000);

* {
  margin: 0;
  padding: 0;
}

.effects {
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.text {
  text-align: center;
  max-width: 50vw;
}

.letter {
  color: black;
  font-size: 2rem;
  line-height: 1.2em;
  position: relative;
}

<div class="effects">
  <text class="text" id="textBottom"></text>
</div>

Answer 1

К буквам можно добавить transition, а позицию сбрасывать на ноль.

 let text =
                'За это время мы опубликовали ряд книг, альбомов, научных работ по культурному наследию Узбекистана';
            let textBottom = document.getElementById('textBottom');
            let letter = document.getElementsByClassName('letter');
            let textBottomArray = [];

            for (let i = 0; i < text.length; i++) {
                textBottomArray[i] = text[i];
            }

            function createElement(itemArray, item) {
                for (let i = 0; i < itemArray.length; i++) {
                    item.innerHTML += `<span class="letter">${itemArray[i]}</span>`;
                }
            }

            function scatterElementRandom(item) {
              
                for (let i = 0; i < item.length; i++) {
                    let randomX = Math.random() * 0.9 * window.innerWidth;
                    let randomY = Math.random() * 0.9 * window.innerWidth;
                    if (i % 5 == 0) {
                        item[i].style.bottom = `${randomX}px`;
                        item[i].style.right = `${randomY}px`;
                    } else if (i % 3 == 0) {
                        item[i].style.top = `${randomX}px`;
                        item[i].style.left = `${randomY}px`;
                    } else if (i % 7 == 0) {
                        item[i].style.bottom = `${randomX}px`;
                        item[i].style.left = `${randomY}px`;
                    } else {
                        item[i].style.top = `${randomX}px`;
                        item[i].style.right = `${randomY}px`;
                    }
                }
            }

            function returnElementPosition(item) {
                for (let i = 0; i < item.length; i++) {
                    item[i].style.fontSize = '';
                    item[i].style.top = 0;
                    item[i].style.left = 0;
                    item[i].style.bottom = 0;
                    item[i].style.right = 0;
                }
            }
            
            createElement(textBottomArray, textBottom);

            scatterElementRandom(letter);

            setTimeout(() => {
                returnElementPosition(letter);
            }, 3000);

 * {
                margin: 0;
                padding: 0;
            }
            .effects {
                overflow: hidden;
                width: 100vw;
                height: 100vh;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .text {
                text-align: center;

                max-width: 50vw;
            }
            .letter {
                color: black;
                font-size: 3rem;
                line-height: 1.2em;
                position: relative;
              transition: 1s all;
            }

<div class="effects">
            <text class="text" id="textBottom"></text>
        </div>

БЛОГ НА HUSL

Как сделать плавный эффект разбрасывания и сбора букв?

Ответы (1 шт):