Это скролл

Не писать текст!!!
Делать все только на скролл (опционально можно юзать другие анимации, но основная масса по скроллу)
Использовать все видоизменения (движение по осям, скейл, поворот, непрозрачность)
Можно использовать дополнительные элементы по мимо круга и квадрата)

И рассказываем историю их любви

....... и можете анимировать сами

ИНСТРУКЦИЯ

ТУТ

А

Нам надо, чтобы надпись зафиксилась сразу же как человеку начал скроллить, поэтому сюда ставим расстояние на котором она от верха. Если бы, например, нам было нужно, что бы фикс поставился с задержкой 100px, мы бы писали 160px

Считаем начало исполнения анимации от верха экрана

Нам надо, что бы элемент был на фиксе в течение 1000px

Эта штука фиксирует элемент на экране

Расстояние от верха блока

Сначала нам надо, чтобы эта надпись доехала до первой, между ними 500px

Пока фикс не ставим

После того, как она доехала до первой, ее надо зафиксить на оставшиеся 500px

Эта штука фиксирует элемент на экране

У третьей записи анимации нет, она просто сама едет по скроллу

Расстояние от верха блока

Текст будет зафиксирован на протяжении 1000px

ставим фикс что бы текст оставался на экране

и проедет 5000px влево

Расстояние от верха блока

Наш первый шаг анимации произойдет за 100px

Элемент подвинется на 200px вниз (тем самым опережая скорость скролла: страница листается на 100, а элемент летит вниз на 200)

Элемент подвинется на 700px вправо и останется на месте по оси Y (что бы он остался на месте значение должно совпадать с предыдущим шагом)

Второй шаг анимации произойдет за 100px

Элемент подвинется на 260px вниз (200+260=460) и на 695px влево (тут одновременно по обеим осям)

Третий шаг анимации произойдет за 100px

Расстояние от верха экрана

шаг анимации произойдет за 200px

Элемент увеличится на 500%

Расстояние от верха блока

первый шаг анимации произойдет за 200px

Элемент расскейлится по вертикали на 900%

Элемент расскейлится по горизонтали на 900%

Второй шаг анимации произойдет за 200px

Расстояние от верха блока

шаг анимации произойдет за 200px

Элемент исчезнет

Расстояние от верха блока

первый шаг подменяет изначальное положение предмета

изначально нам нужна прозрачность

Элемент проявляется

Второй шаг анимации произойдет за 100px

Расстояние от верха блока

шаг анимации произойдет за 200px

Элемент повернется вокруг своей оси

Расстояние от верха блока

первый шаг анимации произойдет за 140px

первым шагом крутим вокруг своей оси

Элемент крутится против часовой

третий шаг анимации произойдет за 140px

четвертый шаг дублирует третий

второй шаг дублирует первый

Расстояние от верха блока

первый шаг анимации произойдет за 150px

фиксируем

первым шагом двигаем в право на 310(тк от первого края текста до левой стороны квадрата Б 310) и вниз по Y на 150(это число должно быть равно тому, за сколько произойдет анимация, что бы текст не улетал быстрее и не опаздывал)

Как мы посчитали 150px? Помним, что не только текст едет вниз, но и буквы наверх (органически). Расстояние от низа текста (да и от низа квадрата А) до низа квадрата Б 300px (Померили через option и добавили высоту квадрата Б (она 100px)). Соотвественно тексту надо пройти половину от общего пути (вторую пройдет квадрат). Половина от 300 это 150 :)

фиксируем

двигаем влево (до правой границы квадрата В) и вниз на 210px(тк в дистансе 210). Почему написано 360px? Шаги суммируются. На предыдущем мы уже подвинули текст на 150 вниз, значит тут, когда мы двигаем еще на 210px, суммарно будет 360px

второй шаг анимации произойдет за 210px. Почему? Потому что расстояние от низа Б до низа В 420px (option + высота В). Квадрат В идет навстречу тексту и идут они с равной скоростью, а значит к моменту встречи пройдут каждый по половине пути = 210px

Расстояние от верха блока

первый шаг анимации произойдет за 140px

фиксируем

первым шагом двигаем в право на 310 и вниз на 140(это число должно быть равно тому, за сколько произойдет анимация, что бы текст не улетал быстрее и не опаздывал)

фиксируем

двигаем в лево и вниз на 200px

второй шаг анимации произойдет за 200px