Как реализовать анимацию?

Question

Как написать такую-же анимацию, как в первом блоке на сайте, что текст разъезжается? https://otherside.xyz/ Искал в интернете, всё ссылалось на использование REACT, но для меня это не выход.

Answer 1

самый простой вариант - сделать 2 svg картинки, одну отзеркалить. Потом через js добавлять какой-то класс, например, animated.

<div class="title">
  <div class="text-wrap">
   <svg class="text1"></svg>
  </div>
  <div class="text-wrap">
   <svg class="text2"></svg>
  </div>
</div>



.text-wrap {overflow: hidden}

.text1 {transform: translateY(100px)}
.text2 {transform: translateY(-100px)}

.animated .text1, .animated .text2 {transform: translateY(0)}

Если не хочешь svg, то бери обычный текст, зеркаль его (решения можно найти на codepen). И через transform + perspective задать нужную форму.

БЛОГ НА HUSL

Как реализовать анимацию?

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