Доработать скрипт анимации svg (библиотека GSAP)
Добрый день!
Сразу хочу сказать, что исполнитель требуется с опытом работы с библиотекой GSAP и ее плагинами, время ограничено, эксперименты не нужны
- MotionPathPlugin.min.js
- DrawSVGPlugin3.min.js
Проект в виде файла HTML + js + css (сборку отправлю исполнителю)
Необходимо доработать javascript, который выполняет анимацию svg-элементов. Сейчас скрипт находится в такой стадии:
при загрузке страницы объект <circle> начинает движение по пути <path>, по мере движени <path> закрашивается зеленым цветом. Проходя через точки на пути, каждая точка тоже анимируется.
Что требуется:
1) Сделать так, чтобы на каждой точке объект останавливался на 2 секунды, точка (на время этой паузы) получала анимацию пульсации, и на время паузы останавливалось закрашивание маршрута, объекту на время нахождения на точке присваивался css-класс. После паузы в 2 секунды, объект продолжает движение, у него снимается присвоенный ранее класс, маршрут продолжает закрашиваться. Пройденная точка перестает пульсировать. И так до конца маршрута
Что важно:
1) Пройденный маршрут должен закрашиваться корректно, закраска не должна отставать от объекта или опережать его, запускаться вовремя и когда пройден весь маршрут, он должен быть закрашен полностью
2) Объект тормозит не точно на точке, а чуть перед ней, визуально миллиметров 5 на экране, то есть не должен перекрывать собой точку во время остановки
3) Точки на маршруте я должен иметь возможность добавлять в svg (сейчас их три штуки, но будет больше). Сейчас точки в svg выглядят так
<circle id="point-1" class="ball ball02" r="20" cx="278" cy="201"></circle>
<circle id="point-2" class="ball ball03" r="20" cx="327" cy="401"></circle>
<circle id="point-3" class="ball ball04" r="20" cx="203" cy="601"></circle>
Пишите сразу ТГ
Сразу хочу сказать, что исполнитель требуется с опытом работы с библиотекой GSAP и ее плагинами, время ограничено, эксперименты не нужны
- MotionPathPlugin.min.js
- DrawSVGPlugin3.min.js
Проект в виде файла HTML + js + css (сборку отправлю исполнителю)
Необходимо доработать javascript, который выполняет анимацию svg-элементов. Сейчас скрипт находится в такой стадии:
при загрузке страницы объект <circle> начинает движение по пути <path>, по мере движени <path> закрашивается зеленым цветом. Проходя через точки на пути, каждая точка тоже анимируется.
Что требуется:
1) Сделать так, чтобы на каждой точке объект останавливался на 2 секунды, точка (на время этой паузы) получала анимацию пульсации, и на время паузы останавливалось закрашивание маршрута, объекту на время нахождения на точке присваивался css-класс. После паузы в 2 секунды, объект продолжает движение, у него снимается присвоенный ранее класс, маршрут продолжает закрашиваться. Пройденная точка перестает пульсировать. И так до конца маршрута
Что важно:
1) Пройденный маршрут должен закрашиваться корректно, закраска не должна отставать от объекта или опережать его, запускаться вовремя и когда пройден весь маршрут, он должен быть закрашен полностью
2) Объект тормозит не точно на точке, а чуть перед ней, визуально миллиметров 5 на экране, то есть не должен перекрывать собой точку во время остановки
3) Точки на маршруте я должен иметь возможность добавлять в svg (сейчас их три штуки, но будет больше). Сейчас точки в svg выглядят так
<circle id="point-1" class="ball ball02" r="20" cx="278" cy="201"></circle>
<circle id="point-2" class="ball ball03" r="20" cx="327" cy="401"></circle>
<circle id="point-3" class="ball ball04" r="20" cx="203" cy="601"></circle>
Пишите сразу ТГ