Step by step - при клике
При клике на кнопку - появляется сначала полоска, она разворачивается и появляется заголовок слева, а через 0,2 сек появляется описание немного сверху. При повторном клике всё возвращается в исходное положение.
Для меня тяжелой является настройки шейпа, остальное не ново.
Настройки:
Есть шейп 400x250 px
1 шаг - длительность - 0, шейп уезжает наполовину вверх и влево - влево =-200, вверх=-125, scale =0, прозрачность=0
2 шаг - прозрачность=100
3 шаг - анимация - появление палочки - scale x =100%, scale y =1%, убираем сдвиг х =0, длительность=1сек, изинг - easeInOut.
4 шаг - сдвиг по y=0, scale y =100 %
5 шаг - меняем delay - 0,2
Добавляем триггер на кнопку
Меняем цвет у шейпа.
Добавляем текст и анимацию.
Заголовок - по клику.
Шаг 1 - по х=-20, убираем прозрачность, длительность=0.
Шаг 2 - длительность=0,8 сек, х=0, прозрачность=100%, изинг - easeInOut.
Указываем триггер - кнопка.
Шаг 3 - меняем delay - 0,2
Delay - 1,8 сек
Анимация для описания: по клику. Указываем триггер - кнопка.
Шаг 1 - по y=-20, убираем прозрачность, длительность=0.
Шаг 2 - длительность=0,5 сек, прозрачность=100%, y=0, Delay - 2 сек, изинг - easeInOut
Шаг 3 - меняем длительность - 0, delay - 0,2