
Создание крутящегося по кругу текста в Тильде.
Содержание
Создание текста в Фигме
Для создания текста по кругу нам понадобится Figma. В фигме добавляем нужный текст.


Далее нам нужно установить плагин. Для этого заходим в Настройки —> Plugins —> Browse plugins in Community.

Вводим название плагина arc и нажимаем Поиск.

Плагин появится в результатах поиска. Нажмите Install.

Когда плагин установится, кнопка поменяется на Installed.

Возвращаемся к нашему тексту в Фигме и применяем плагин. Для этого нажмите на текст правой клавишей мыши и выберите Plugins —> arc.

Появятся настройки скругления текста. Введите процент скругления и нажмите Apply. Визуальное представление в настройках может не совпадать с результатом, поэтому возможно придется несколько раз повторить процедуру, играясь с процентами.


В моем примере цвет текста больше подойдет белый, поэтому я меняю его в настройках.

Когда результат нас устроит, экспортируем полученный текст.

Анимация в Тильде
На сайте добавляем нулевой блок (Zero block).

Нажимаем кнопку Редактировать блок.

Удаляем все элементы в Zero block.

Добавляем фигуру (Add Shape).

Открываем настройки фигуры (settings в правом нижнем углу при выделенной фигуре) и загружаем наш текст.



В настройках блока включаем настройку показа за границами блока.
- Overflow — Visible.
Размещаем нашу фигуру сверху листа.

Рабочую область делаем минимальной по высоте, т.к. наша фигура будет располагаться внахлест на верхнем блоке, этот нам по сути не нужен.

Сохраняем и закрываем Zero block и видим, что наша фигура наложилась на блок выше.

Возвращаемся обратно в Zero block и подгоняем ее по размеру и расположению.

В настройках фигуры добавляем анимацию. В разделе Basic Animation —> Step-by-step animation нажимаем кнопку Add.
Устанавливаем значения:
- Event — block on Screen;
- Loop — Loop.
С помощью кнопки Add step добавляем шаг (Step 1). Для шага 1 устанавливаем значения:
- Duration (скорость выполнения анимации в секундах) — 20;
- Rotate (поворот в градусах) — 360.



Для просмотра анимации нажмите Play Element.
Далее в параметрах фигуры убираем желтый фон и форму фигуры меняем на окружность. Сохраняем и выходим из нулевого блока.



Вот что у нас получилось:
В почему в виде html со стилями не экспортировали?
Алексей, вы можете делать на свое усмотрение)