Copy of Тренажер по уроку on scroll

Тренажёр

Сбс анимация.
on scroll

Урок 20

Чтобы посмотреть тренажёр, откройте его через десктопную версию

Пример анимации из урока:

Попробуй зафиксировать этот элемент и назначить стартовый триггер от центра экрана, а после — от верха экранга

На каждом этапе не забывай сохранять изменения в блоке и опубликовывать эту страницу, чтобы посмотреть результат

Настрой анимацию по скроллу движения элемента вправо + поворот на 180^о и движение влево + поворот на 180^о

Инструкция:

Ниже находятся один элемент, на который
нужно настроить анимацию

01

03

02

Good design is obvious. Great design is transparent.

Продублируй квадрат, чтобы их стало 4 и попробуй настроить анимацию «разлетания» этих элементов

Можешь пройтись по всем
анимациям из урока:

Тоже самое, но наоборот, попробуй настроить анимацию «собирания» этих элементов

Оставь 1 квадрат и добавь к нему текст. Тексту и квадрату задай фиксацию, а квадрату добавь поворот на 360^о. Не забудь правильно настроить триггер оффсет

03

01

02

Доп.задание 02

Шпаргалка

Step 2:

Distance: 250
Move x:-250 y:0
Rotate: 180
Fix: fixed

Start trigger:

On window center / on window top

Step 2:

Distance: 250
Move x:-250 y:0
Rotate: 180

Event:

On scroll

02

01

задания

Event:

On scroll

Step 2:

Distance: 250
Move x: 0 y:0
Rotate: 360

Step 1:

Distance: 250
Move x: 250 y:0
Rotate: 180

Step 1:

Distance: 250
Move x: 250 y:0
Rotate: 180
Fix: fixed

Event:

On scroll

01

Доп.задание 01

Event:

On scroll

Start trigger:

On window center

Step 1:

Distance: 250
Move x: 500 y:500
Rotate: 360

Event:

On scroll

Event:

On scroll

Step 2:

Distance: 250
Move x: -500 y:-500
Rotate: 360

Step 2:

Distance: 250
Move x: -500 y:500
Rotate: 360

Event:

On scroll

Step 2:

Distance: 250
Move x: 500 y:-500
Rotate: 360

02

01

02

Start trigger:

On window center

Start trigger:

On window center

Start trigger:

On window center

Start trigger:

On window center

Step 2:

Distance: 0
Move x: 500 y:500
Rotate: 0

Event:

On scroll

Step 2:

Distance: 250
Move x: 0 y:0
Rotate: 360

01

Start trigger:

On window center

Step 2:

Distance: 0
Move x: 500 y:500
Rotate: 0

Event:

On scroll

Step 2:

Distance: 250
Move x: 0 y:0
Rotate: 360

01

Start trigger:

On window center

Step 2:

Distance: 0
Move x: 500 y:500
Rotate: 0

Event:

On scroll

Step 2:

Distance: 250
Move x: 0 y:0
Rotate: 360

01

Start trigger:

On window center

Step 2:

Distance: 0
Move x: 500 y:500
Rotate: 0

Шпаргалка

посмотреть