Анимация: появление фона из большого круга
Анимация: появление фона из маленького круга
Анимация: шторка
Анимация: статичный фон, блок накладывается поверх
Второй способ
Третий способ
Анимация: композиция собирается по скроллу
  1. Котик на прозрачном фоне
  2. У котика появляемтся фон (или сначала котик по контуру, а потом прорисовывается)
  3. Сначала настраиваем анимацию котику на фоне, потом котику без фона
  4. Тригер оффсет - расстояние от изображения до верха блока
Анимация: по скроллу меняется сцена
Черный кот
Котик с зеленым фоном
  1. Настраиваем заголовок
  2. Настраиваем черного котика, потом надпись к нему
  3. Настраиваем по аналогии котика на зеленом фоне. ВАЖНО - нужно посчитать логику исчезновения и появления котиков по пикселям, чтобы они появлялись друг за другом и проигрывались за установленную длину анимации (например, 1000 пикселей)
Белый кот
паралакс
паралакс
паралакс
паралакс
Если задать дистанцию побольше, а смешение помоньше, то элементы будут двигаться более плавно

  1. Для элементов, которых нет на экране - по низу окна. Тригер оффсет для надписей под котиками - высота изображения с соответствующим котиком, плюс расстояние межде картинками
  2. Для элнмнгтов, которые уже на экране - по верху окна. Тригер оффсет для котика и для надписи к нему - высота до верхнего края зеро блока
Потом расставляем котиков в слоях, чтобы решить какие будут проплывать повер текста, а какие под ним
Через базовую анимацию
Сначала настраиваем текст через базовую анимацию
Анимация: фото поверх и позади текста
Потом расставляем котиков в слоях, чтобы решить какие будут проплывать повер текста, а какие под ним
Через sbs анимацию
Сначала настраиваем текст через sbs анимацию
Анимация: фото поверх и позади текста
Анимация: предмет скроллиться через весь сайт
Анимация: Горизонтальный скролл
кот на улице
белый котенок
кот на зеленом фоне
  1. Делаем шейп и отправляем на 5000 по Х и 5000 по Y
  2. Проверить расположены ли элементы в блоке в соответствии с системой отступов (сверху и снизу)
  3. Все элементы для горизонтального скролла нужно добавлять сразу, потому что последний элемент будет задавать дистанцию
  4. Начинаем с последнего элемента. Настраиваем первый шаг для последнего элемента. И ту же дистанцию, что по оси Х добавляем в длину анимации
  5. !Поставить фиксед в значении фикс!
  6. В тригер оффсет выставляем значение элемента по оси Y (где он изначально находился)
  7. Далее копируем и добавляем эту анимацию для всех элементов, и меняем у каждого только тригер оффсет. Подставляем значение, которе по оси Y у каждого элемента
  8. Скопировать длину анимации и на нее увеличить длину артборда (блока)
Creativity is to discover a question
Creativity is to discover a question
Creativity is to discover a question that never. Creativity discover a question that never. Creativity is to discover a question that never.
Creativity is to discover a question that never. Creativity discover a question that never.
Creativity is to discover a question that never.
Анимация: Фиксация элементов в step-by-step анимации
Everything should be made as simple as possible, but not simpler. Everything should be made as simple as possible, but not simpler.
Чтобы элемент фиксировался ровно по середине экрана, нужно взять половину от высоты его контейнера и добавить это хначение с минусом в тригер оффсет
Анимация: Фиксация элементов в step-by-step анимации
  1. Ставим один текст под другой
  2. Сначала настраиваем первый текст
The best ideas come as jokes. Make your thinking as funny as possible.
Everything should be made as simple as possible, but not simpler. Everything should be made as simple as possible, but not simpler.