Правильно ли использован requestAnimationFrame?

Сергей, во-первых "костыльно" звучит смешно, несмотря на то, что вы имеете статус куратора данного тега.
Потому как JS - сам по себе один большой костыль.
Вот эти строки подтверждают это:

el.style.transform = '';
	l.style.transition = '10s';
  	el.style.transform = 'translateY(100%)';

Переведите - код в обычные задачи на русском языке. И?
Что хотите и что получается? transition применяется еще до того как мы убрали трансформацию.
Использование промисов - эффект такой же, хотя .then по человеческой логике, должен решать эту проблему.

Добавление css-анимаций - это одно из правильных решений. Но не единственное.

Я сейчас в процессе изучения requestAnimationFrame - и меня интересует именно requestAnimationFrame.

Правильно ли использован requestAnimationFrame?

Егор Живагин, Чтобы получилось именно так как:


Иначе не получается, а пугает меня именно потенциальная вложенность, в случае если захочу двигать еще куда либо, с другой transition

Как сделать правильно анимацию, в э том примере?

Александр Варлаков, Даже использование промисов не изменяет результатов:

Как сделать правильно анимацию, в э том примере?

Что-то таки нет...
Попробовал три варианта:



Что-то не получается...

Получается: либо ставит на начальную позицию, но дальше не двигает, либо двигает все также по диагонали

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

Большое спасибо!

Как настроить прокрутку?

Вот блок contaner - 5000px
sub-container - max-width 200px, но с большим количеством текста,
родитель прокручиватся, sub-container нет. Так?

Как настроить прокрутку?

Вообще погуглить лень?
Body - это отображаемая часть html, если коротко. Куда выше крутить? К метатегам и файлам стилей?

body - Представляет тело документа (содержимое, не относящееся к метаданным документа).
html - Корневой элемент HTML-документа. Сообщает браузеру, что это HTML-документ. Является контейнером для всех остальных html-элементов.

Тег является контейнером, который заключает в себе все содержимое веб-страницы, включая теги и . Открывающий и закрывающий теги в документе необязательны, но хороший стиль диктует непременное их использование. Как правило, тег идет в документе вторым, после определения типа документа (Document Type Definition, DTD), устанавливаемого через элемент . Закрывающий тег должен всегда стоять в документе последним.

Как адаптировать div в плане position?

Edgark, А вообще тут конкретно можно вообще без абсолютного позиционирования обойтись:
В секции два блока - текст и картинка.
На flex-ах такое легко верстается, отступы регулируются paddng

Как адаптировать div в плане position?

Сайты посмотри другие:
в некоторых целые блоки вообще убираются в мобильных версиях.
Ломаться у тебя после 980px, так и расположи все по центру, текст сверху, картинка снизу

Как адаптировать div в плане position?

Нужен код, желательно сразу сюда:
https://jsfiddle.net/

Как адаптировать сайт?

Совет 2 - наиважнейший:
Изучи, что такое flex. Посмотри в youtube как верстают на flex-ах. А потом переходи к изучению media-запросов.

Как адаптировать сайт?

Вот тут ты используешь flex.

.objj1, .objj2{
  margin-bottom: 73px;
  display: flex;
  justify-content: space-between;
}

Но почему у тебя сам документ и твои блоки не flex-овые?
Т.е. с флексами ты знаком, но где и как использовать ты не знаешь? (это не критика, а вопрос).

Как адаптировать сайт?

смотри:

body {
  padding: 0;
  margin: 0;
  color: black;
  font-size: 16px;
  font-family: FuturaBookC;
}

h1, h2, h3, h4, h5, h6 {
  padding: 0;
  margin: 0;
  text-transform: uppercase;
}

h1 {
  font-family: FuturaDemiC;
}

a {
  text-decoration: none;
}

p {
  margin: 0;
  font-size: 25px;
}

ul, li {
  display: block;
  padding: 0;
  margin: 0;
}

Совет № 1:
Если хочешь всему на странице поставить одинаковые стили используй универсальный селектор *

* {
  padding: 0;
  margin: 0;
  color: black;
  font-size: 16px;
  font-family: FuturaBookC;
}

Как адаптировать сайт?

Нуу? Что непонятно-то?
Вопросы задавай.
Вот для примера:

@media(max-width: 700px){
header a{
color: red;
}
}

при ширине экрана 700 px и меньше - ссылки окрасятся в красный цвет, так можно работать со всем: отступами, шириной, размерами шрифтов и т. д.

Подойдет ли игровой ноутбук для программирования?

Вопрос обычно ставят противоположный, подойдет ли мой рабочий ноутбук для игры.

Как анимировать тест по строкам?

keksochka65, буквы в span можно и без js завернуть, а анимацию можно сделать бесконечной, вот пример
https://yournet.kz/blog/js/beskonechnaya-animaciya...

Как анимировать тест по строкам?

Можно, но каждую букву, нужно заворачивать в блок и блок анимировать

Как сверстать содержание в квадратном блоке?

fron321, В этом коде никак. - потому как это разные блоки.
Можно попробовать media-запрос при определенной ширине., допустим
- будет абсолютно позиционирован и растянут на какое-то кол-во процентов, что-бы он доезжал до слов

Как выровнять перевернутый текст во flex-контейнере?

Roman_Gy,

Как выровнять перевернутый текст во flex-контейнере?

Roman_Gy, так поменяй:

.box-3{
  transform: rotate(270deg);
  justify-content: start;
}