Встретился мне прекрасный ресурс для усложненной векторной анимации в Тильде. Упрощает работу дизайнерам, которые не владеют кодом.
Покажу на примере анимации этой стрелки.
Вам потребуется файл в SVG-формате. Его можно сделать и в фигме, я сделала в Иллюстраторе.
И так, нарисовала стрелку в Люстре, сохранила в формате SVG. Загружаю файл на сайт. Слева сверху кнопка Open SVG:
- В значении animation tipe обязательно выбрать ANIMATION.
- В значении animation easing ту анимацию, которая необходима (см. изображение выше).
Т.к. у меня вектор состоит из двух элементов, мне нужно задать разное время их появление. Например, там где линия спиралью, должна появляться раньше, чем головка стрелки, поэтому я ставлю значение спирали на 2 секунды, а появление стрелки на 1 секунду.
Отлично, теперь внедряем анимацию в тильду. Нажимаю на кнопку Get code (справа сверху).
Нам потребуется внедрить оба кода. Сначала тот, что слева:
Снизу слева нажимаем кнопку Copy SVG. Переходим в тильду, нажимаем редактировать тот блок, где должна отображаться ваша анимация:
Слева сверху нажимаем кнопку + и выбираем HTML.
Двойной щелчок мыши, стираем тот код, что есть и нажимаем Ctrl+V, вставляем наш код. Окошко с кодом ставим на то место, где должна находится ваша анимация. Свою стрелку я ставлю сюда:
Хорошо. Сохраняем. Закрываем. Возвращаемся на ресурс SVG Artista и копируем правый код (кнопка внизу справа):
Переходим на тильду, создаем новый блок в разделе Другое T123 HTML. Нажимаем Контент и пишем открывающий и закрывающий тег <style></style>. Без него у нас ничего не сработает. Между ними вставляем то, что скопировали ранее. Сохраняем, публикуем страницу, любуемся.
Если где-то не разобрались, та же самая информация в видео формате>>