Как написать такую-же анимацию, как в первом блоке на сайте, что текст разъезжается? https://otherside.xyz/ Искал в интернете, всё ссылалось на использование REACT, но для меня это не выход.
-
1ну, реакт нужен не для анимаций. Я бы использовал GSAP для упрощения жизни– Михаил Камахин1 мая 2022 в 13:15
-
1Там это, похоже, в threejs сделано, но можно просто png на канвас кинуть, при скролле отзеркаливать и сдвигать с одновременным масштабированием.– Leonid2 мая 2022 в 6:13
Добавить комментарий
|
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 задать нужную форму.