Ivan Bogachev

Скорее всего вам нужно выделить css для первого экрана и вставить его сразу в начале страницы в тег style. Это можно автоматизировать, есть разные инструменты, например вот этот. В любом случае стоит гуглить по запросу critical css.

Сама линия делается по вот такому принципу с помощью SVG:

Появление иконок - так же. Заливка надписей с помощью линии - это прямо задача для SVG-масок. Дальше к этому прикручивается кастомный скролл, поскольку сайт нестандартный - проще руками его сделать, чем пытаться доделать какое-то стороннее решение. Плюс немного CSS-анимаций для всего остального. Дальше много абсолютного позиционирования чтобы это все подогнать. Как говорится, ябзаверстал.

Не могу понять, почему.

Потому что .slideToBringImg во всех случаях является первым ребенком .slide. Так что вам нужно считать сами слайды, а не эти элементы:

.slide:nth-child(1) .slideToBringImg { ... }
.slide:nth-child(2) .slideToBringImg { ... }
.slide:nth-child(3) .slideToBringImg { ... }

Responsive And Fluid Typography With vh And vw Units.

Посмотрите вот этот пример:

Он по сути похож на вашу задачу (если убрать четные пункты и немного стилизовать псевдоэлементы).

танцы с бубном... прокачать навыки верстки максимально быстро и при этом достаточно углубленно... Главное - результат и время.

Был в похожей ситуации. Могу сказать, что очень полезно порисовать картинки с помощью CSS (если не сталкивались - сходите на CodePen, там это дело очень полюбили). Звучит глупо, но тем не менее такая деятельность помогает очень быстро освоить те свойства CSS, которые обычно все гуглят и не понимают. Это своеобразные "концентрированные" задачи на верстку. Если в одном макете 5 сложных моментов, то тут в одной картинке - 25.

Например, если подключить так:

<link rel="stylesheet" href="http://evil.com/styles.css">

На CSS можно сделать недокейлоггер, который даст информацию о том, что пользователь начинает вводить (повторы одного и того же символа уже не срабатывают).

Можно отсылать себе информацию о том, куда пользователь нажимает - ссылки, чекбоксы, даже продолжительность наведения мыши на тот или иной объект. Можете посмотреть примеры вот тут. Я сам не все идеи оттуда проверял, но те, что проверял - работают. Собственно эту всю фигню очень любят в письмах использовать, но никто не мешает и на сайте внедрить.

Можно издеваться над "отключением" кнопок (pointer-events к примеру поменять) или вообще скрыть какие-то важные блоки и пользователи не смогут нормально пользоваться сайтом. Для какого-нибудь магазина - это полный фейл как вы понимаете. Причем, в отличии от полного дефейса, пользователи могут даже не понять, что что-то не так.

blockquote {
    overflow: auto;
}

Попробуйте добавить preserveAspectRatio="xMidYMid slice" к SVG с этими полигонами.

но которую можно реализовать и с помощью css, и с помощью javascript...
ваше мнение хотел услышать

Мне самому нравится делать все на CSS, но... Если анимация должна быть интерактивной и нужно ее останавливать в процессе, откатывать в изначальное положение и.т.д., или некоторые ее части зависят от данных (в широком смысле - это и движение по сложной траектории, и построение графиков и.т.д.) и их проще рассчитать скриптом, чем подбирать коэффициенты в CSS keyframes, то JS будет лучшим выбором. Если это последовательность мало связанных между собой изменений, то опять же скрипты почти всегда будет проще реализовать. Если речь идет о CSS-анимациях с фильтрами (особенно SVG-фильтрами), то можно влететь в очень сильные проблемы с производительностью на слабом железе. И никакие хаки с GPU тут не помогут - все равно будет тормозить. В такой ситуации может иметь смысл не просто писать на JS, но и подключить WebGL и все делать руками на шейдерах.

В остальных случаях стоит смотреть по ситуации - разные :hover / :focus эффекты обычно легко реализуются на CSS, и, если это так, то зачем что-то придумывать? CSS в последнее время очень даже неплох. Но если, например, в проекте вся анимация делается на JS, то может иметь смысл продолжать делать так же, сохраняя единообразие в коде.

есть микрофризы и фреймрейт скачет где-то. Стоит ли в таких случаях полностью переходить на js-движок типа GSAP ?

Важно понимать, что GSAP, Anime.js или еще что-то похожее - это инструменты, которые не приносят ничего принципиально нового в плане технологий. Они просто дают удобный интерфейс, через который мы можем менять значения свойств CSS или каких-то атрибутов SVG. Не более того. Соответственно если у вас есть нормально написанная анимация на чистом CSS/JS и она тормозит, то GSAP ее особо не ускорит.

есть микрофризы и фреймрейт скачет

Если есть проблемы с текущими анимациями, то стоит проверить, что:
- Везде используется transform, а не изменения width, height, top, bottom, margin, background-position и.т.д.
- По возможности не запускается более одной CSS-анимации в единицу времени.
- Все js-анимации собраны в один requestAnimationFrame.
- Все CSS/SVG фильтры по возможности заменены на шейдеры. Советую почитать введение в эту тему и еще примеры.
- Изменение теней в анимациях по возможности заменено на появление псевдоэлементов с такими фонами.
- CSS-свойство will-change используется по назначению.

Сходите на codepen и посмотрите демки с первых 3-4 страниц по запросу "glitch". Там есть самые разные варианты того, как этот эффект можно сделать.

Надо что бы анимацию каждый делал поочередно

.header-icon {
  animation: mymove 3s linear infinite;
  animation-fill-mode: forwards;
}

.header-icon.two{
  animation-delay: 1s;
}

.header-icon.three{
  animation-delay: 2s;
}

@keyframes mymove {
  0%   { transform: translateY(0);     }
  15%  { transform: translateY(-60px); }
  33%  { transform: translateY(0);     }
  100% { transform: translateY(0);     }
}