I'm attempting to create a greensock animated banner with the ability to switch between different scenes. I've made progress by setting up the timeline for each scene's intro and outro animations using the GreenSock API documentation. However, when I try to add click event handlers, nothing happens – no alerts are triggered.
If you could take a look at my code pen HERE, that would be greatly appreciated.
I've configured a main timeline that plays transitions for each scene in and out, along with pauses after each scene's intro. Additionally, I've labeled the intros and outros for each scene.
$("#NYBtn").click(function() {
alert('Clicked NY!');
tlSlideMain.play(NYSceneIntro);
});
My goal is to have the initial intro animation slide in, and upon clicking the NYBtn, trigger the timeline to play from the label 'NYSceneIntro' as defined in the JavaScript file.
Ideally, I envision having specific functions to animate each Slide depending on which button is clicked:
NYBtn -> NYSlideIntro
NJBtn -> NJSlideIntro
PABtn -> PASlideIntro
...and so on. Am I overlooking something, or is there an issue with my code? Please note that I am fairly new to jQuery and GSAP.