Задания на анимацию
Первая задача
https://www.figma.com/proto/m4fpmvbSIo5bYWN4dV5n6Q/Анимация?page-id=0%3A1&type=design&node-id=25-798&t=UJpo7AhGUwggrlj6-0&scaling=min-zoom&starting-point-node-id=25%3A798
Стек можно на чистом js с использованием библиотеки gsap, на vue сами перенесем
Воспроизведение анимации Для воспроизведения анимации в фигме нужно нажать на экран в самом начале, затем в конце на розовый прямоугольник
Описание анимации Когда пользователь доходит до данного блока и появляется половина планшета с UI элементами (цветные прямоугольники в примере), планшет начинает немного поворачиваться и раскрываться во весь экран (будто внутрь него погружаемся). Все действия связаны со скролом.
Дальше скроля вниз, планшет увеличивается, а UI элементы разъезжаются по своим местам на экране и появляется текст с описанием. Отображаются в виде карточек (картинка, заголовок, текст)
Скроллим дальше, когда заканчивается контент блока с UI элементами, планшет (внешний серый контур) сворачивается обратно и мы видим UI дэшборда в 3D (розовый большой прямоугольник). Данный дэшборд - картинка без анимаций внутри. Дэшборд немного реагирует на движение мышки. Пример как должен реагировать дэшборд на наведение курсора https://explicitpromo.com/. На адаптиве этот 3д эффект отсутствует.
При скролле снизу вверх анимация проигрывается в обратном направлении. Анимация должна выглядеть на всех разрешениях одинаково
Вторая задача
Пример анимации. Воспроизводится по клику
https://www.figma.com/proto/xu6AqT0NmYPeVFj83HadoD/Untitled?page-id=0%3A1&type=design&node-id=1-179&viewport=550%2C391%2C0.06&t=a4LhZzPr4z5ht1Ij-1&scaling=min-zoom&starting-point-node-id=1%3A34&mode=design
Когда доходим до данного блока , справа начинаются появляться карточки с текстом, а слева узкая длинная картинка, которые едут немного быстрее, чем карточки.
Анимация для карточек строится следующим образом:
Снизу подъезжает карточка до верхней точки экрана с определенным отступом, так же в этом моменте снизу выезжает уже вторая карточка.
Скроллим дальше, как только нижняя карточка подъезжает к верхней, верхняя начинает исчезать и уменьшаться примерно на 30%. Нижняя карточка приезжает на ее место и анимация повторяется пока не кончатся все карточки.
Последняя карточка просто уезжает вверх без исчезновения.
При скролле снизу вверх анимация проигрывается в обратном направлении. Смысл анимации на всех разрешениях одинаковый, но на адаптиве длинная узкая картинка расположена за карточками