Не удается получить GSAP для навигации по временной шкале с моими функциями

Я пытаюсь достичь анимированный баннер greensock, что я могу перемещаться по различным сценам.

Используя их документацию API, я дошел до настройки временной шкалы, чтобы каждая сцена имела анимацию intro и outro, но по какой-то причине, когда я начинаю добавлять обработчики событий click, ничего не происходит, и никакие предупреждения не отправляются.

Пожалуйста, посмотрите на мою ручку кода здесь

Я настроил временную шкалу miain, которая играет через каждую trainsition для каждой сцены В и из, я добавил паузы после каждой сцены интро и этикетки для интро и outro в каждой сцене.

Цель здесь состоит в том, чтобы иметь начальный ввод анимации слайд, и при нажатии на NYBtn вызовите функцию, которую я написал в нижней части файла js, чтобы вызвать временную шкалу для воспроизведения из метки «NYSceneIntro»

$("#NYBtn").click(function() {
alert('Clicked NY!');
tlSlideMain.play(NYSceneIntro);
});

В идеале у меня была бы одна из этих функций для анимации в каждом слайде в зависимости от того, какая кнопка нажата:

NYBtn — > NYSlideIntro

NJBtn — > NJSlideIntro

PABtn — > PASlideIntro

так далее…
Я что-то упускаю? или просто неверное кодирование? Имейте в виду, что я совершенно новый для jquery и gsap

1 ответ

  1. Оказывается, я использовал неправильную функцию addPause в моей временной шкале, и поэтому она была нарушена. Я обновил codepen, чтобы отразить это. Теперь у меня есть загрузка переходов соответствующим образом.