Как сделать анимацию картинки в картинке

Шаг 1

• Создаём прямоугольник (R).
• Добавляем фотографию. Можно воспользоваться плагином Unsplash.

• Помещаем фотографию поверх прямоугольника, выделяем и создаём маску (Ctrl+Alt+M).

Шаг 2

• Увеличиваем фотографию внутри маски.
• Выбираем группу с маской и создаём из неё фрейм (Ctrl+Alt+G).
• В меню справа поставьте галочку Clip content.

Шаг 3

• Выбираем наш фрейм и создаём их него компонент (Ctrl + Alt + K).

• Добавляем вариант нашему компоненту (кнопка в верхнем меню Add variant).

Шаг 4

• В варианте нашего компонента выбираем фотографию внутри маски и поворачиваем её на 50°.
• Выбираем группу с маской и уменьшаем её до 0 (K).

Шаг 5

Связываем варианты со следующими настройками:



• While hovering
• Smart animate
• Slow — 300ms.

Шаг 6

• Дублируем всю компонентную группу.
• В копии компонентной группы меняем время анимации: Slow — 400ms.

Шаг 7

• Снова дублируем компонентную группу и меняем время анимации: Slow — 550ms.
• Продолжаем дублировать компонентные группы и изменять время анимации.
• Время анимации для всех групп:
  1. 250ms; 2. 400ms; 3. 550ms; 4.700ms; 5. 850ms; 6. 1000 ms.

Шаг 8

• Копируем в макет все первые фреймы компонентных групп. 
И размещаем их в нашем фрейме по порядку, сначала 6-й, затем 5-й поверх 6-го, 4-й поверх 5-го, и т.д.
• В результате в слоях слева должен получится следующий порядок: Component 1, Component 2, Component 3, Component 4, Component 5.

Готово

Необычная анимация для твоих проектов готова. Эту анимацию можно использовать для эффектной загрузки первого экрана или для hover-эффекта на различных карточках.