Custom external js back button skipping two slides backwards

[KeelyM]

Hi! So this is a pretty niche issue, but I'm hoping someone may have some insight. Basically I'm trying to control my navigation buttons (next button and back button) via an external javascript file. My buttons are .png's in my Captivate file, that I'm then calling by their ID's in my javascript file. I am also using GreenSock library to animate my buttons (a scale up and scale down on mouseup and mousedown). My next button is working fine, but my back button is skipping a slide each time I press it and I am at a complete loss as to why. 

All my javascript is put in a function that listens for the slide enter event (forums helped me put this together, I didn't come up with this code) 

var interfaceObj;
var eventEmitterObj;
window.addEventListener("moduleReadyEvent", function(evt){
	interfaceObj = evt.Data;
	eventEmitterObj = interfaceObj.getEventEmitter();
	initializeEventListeners();
});

function initializeEventListeners(){
	if(interfaceObj){
		if(eventEmitterObj){
			eventEmitterObj.addEventListener("CPAPI_SLIDEENTER", function(){
// my functions here 
})
}
}
}

then I pull my next and back buttons by their ID's (nextBtnc and backBtnc) and put them in variables called nextBtn and backBtn. My GreenSock timelines have the buttons scale down on mousedown and scale back up on mouseup so it looks something like this - 

function nextDown(){
					tlNext.play();
				}
				
				function nextUp(){
					tlNext.reverse();
				}
				
				function nextSlide(){
					window.cpAPIInterface.next();
				}
				
				tlNext = new TimelineMax({paused:true, onReverseComplete:nextSlide});
				tlNext.to(nextBtn, .2, {scaleX:.95, scaleY:.95, ease:Quad.easeOut})

window.nextBtn.addEventListener("mousedown", nextDown);
window.nextBtn.addEventListener("mouseup", nextUp);

This is working correctly for my next button. My back button follows the same structure, however I've split it's mouseup and mousedown actions into two separate GreenSock timelines, as I thought this may have had something to do with my issue (it didn't make any difference though). 

function backDown(){
				tlBack.play();
				}
						
				function backUp(){
				tlBackUp.play();
				}
				 
				function prevSlide(){
					window.cpAPIInterface.previous();
				}
						
				var tlBack = new TimelineMax({paused:true, onComplete:prevSlide});
				tlBack.to(backBtn, .2, {scaleX:.95, scaleY:.95, ease:Quad.easeOut})
				
				var tlBackUp = new TimelineMax({paused:true});
				tlBackUp.to(backBtn, .2, {scaleX:1, scaleY:1, ease:Quad.easeOut})
window.backBtn.addEventListener("mousedown", backDown);
window.backBtn.addEventListener("mouseup", backUp);

I have the window.cpAPIInterface.next(); and window.cpAPIInterface.previous(); in functions set to run after the completion of the GreenSock timelines, so that the button will animate scaling back up, before the slide change happens. 

But whenever I click the back button, it seems to change slides before the mouseup event, and it will move backwards by two slides. 

Like I said, I know this is a very niche issue and it could be something to do with my GreenSock code - though with my next button and back button set up the same, I'm confused as to why they are acting differently. 

If anyone has any thoughts/advice to share on this issue I would be highly appreciative. Thanks! 

[Stagprime]

So this is the second time I encountered a reference to GreenSock. Had no idea what it was so I checked it out. Seems interesting - I will likely try to trial this at some point.

That said, I don't think I am truly addressing your question here but wanted to offer it anyway.

If you create a button on the Captivate stage - you will automatically get the little animation effect of "pushing the button".

Then, for the onSuccess action you can choose to 'Execute JavaScript'

Simply enter

cp.goToPreviousSlide();

- no need for an external library either.

Of course - you could just do a simple onSuccess action as well - no JavaScript if this is all you need to do with the button.

Perhaps this would work for you?

I notice, too, that it looks like you have two extra lines of code with your backDown function that you do not have with the nextDown function.

[KeelyM]

Thank you! I may just give-in and make the buttons inside of Captivate. I know it will be easier, but I also like the flexibility of having an external javascript file control as much as I can - guess it's no good if I can't figure out how to work it properly though lol. 

I'm by no means great at using GreenSock, but it was very approachable for me as someone who is new to coding. It seems like it can do a lot as far as animating and I'm interested in what neat things may be able to be done using it with Captivate.