Анимируйте временную шкалу GSAP между двумя метками "самым коротким" способом
У меня есть анимация GSAP (Greensock), которая "кажется безразличной", и это означает, что когда она воспроизводится по бесконечному циклу, вы не можете определить, какая часть является началом, а какая - концом.
Допустим, у меня есть две метки, одна в начале (около 10% пути), а другая в конце (около 90% завершено):
| start end |
|----|----|----|----|----|----|----|----|----|
Если я создам tweenTo от "начала" до "конца", он пройдет "долгий путь", продвигая точку воспроизведения вперед с 10% до 90%.
Tween from 'start' to 'end' would go
"long ways" from the left to the right
:==================================>
| start end |
|----|----|----|----|----|----|----|----|----|
Пока все хорошо, это имеет смысл для меня.
Но что, если я не хочу, чтобы это случилось? Так как моя анимация кажется бесполезной, технически анимация может начинаться с 10% и идти назад, пока не достигнет начала, затем возвращается к концу анимации и продолжается в обратном направлении, пока не достигнет метки "end" на 90%.
But what if I wanted to go "backwards" from
'start' and loop around to 'end'?
/====: <====/
| start end |
|----|----|----|----|----|----|----|----|----|
Это был бы "короткий путь" между этими двумя ярлыками.
У меня вопрос, как бы мне создать такой эффект?
То есть, если у меня есть две метки, можно ли анимировать между ними, где моя анимация "оборачивается" по временной шкале, а не остается в пределах временной шкалы?
См. Следующий код для примера этого - https://codepen.io/romellem/pen/yQOQar?editors=0010
Внутри этого кодового маркера слева находится проблема, с которой я сталкиваюсь, а справа - фальшивый "пример", показывающий, что я хочу сделать, чтобы анимация слева выполнялась при анимации "вокруг" моих двух меток.