Hi there, I have a bit of a niche question regarding using the GSAP javascript library within Captivate. I’ve used GSAP within Captivate to a small extent and I really like the flexibility it gives to create smooth and unique animations pretty quickly (downside being you have to publish the Captivate project each time you want to preview it).

I should add I’m working in Captivate 9 and working in a non-responsive project (no breakpoints or fluid boxes. Initially I thought this might have to be exported as a SWF).

Here’s a summary of my question – how does Captivate determine the hit box of images and is there a way to adjust to hitbox via javascript?

Here’s the longer version – I have a slide with two images on it and I would like the user to be able to click on each image to have it enlarge and center in the screen, almost like a lightbox effect. I have used GSAP to animate the tweening of images to scale them up and center them on the screen. I have written it so the image scales up and re-positions on click, then scales back down and moves back to it’s original position once clicked again. At first I had an issue with the Z Index of the images (seeing as they are two separate images on two separate layers), but thanks to another forum post I was able to learn how to call to the Z Index and change it. I then had an issue of both images scaling up even though one of them already was, so I changed some things around so that the image will only scale up if the other images are still ‘minimized’ (i.e. the two images can’t be enlarged at the same time). My final issue and the one I am struggling to fix is that the hit boxes for my images stay at the same size and position that the image is originally placed at. So when the user clicks on an image and it enlarges and re-positions, it will only scale back down if the user clicks in the area of the images original hitbox. The hitbox is not scaling and re-positioning with the image. I image this has something to do with using GSAP to animate the image, and for some reason the hitbox isn’t tracking it?

Is there a way I can call to the images hitbox and have that tween too?

I have tried adding another event listener to the window to have the images scale back down with a mousedown event on the window itself, if the image is enlarged. However this resulted in the animation not working at all. I also tried that method with an invisible ‘hidden’ shape (alpha set to 0), but that did nothing either.

Like I said, this is a pretty niche question. I’m not sure how many users out there are using GSAP within Captivate, but I would appreciate any advice or points in the right direction.

Thanks!

Here is my code for that slide if it is helpful – my images are named Image_18 and Image_19.

cp.disable(“text_content_35”);

var reImage19 = document.getElementById(“re-Image_19c”);
reImage19.style.zIndex = 1000;

var reImage18 = document.getElementById(“re-Image_18c”);
reImage18.style.zIndex = 1000;

function myFunction(){
reImage19.style.zIndex = 1000;
}

function myFunction2(){
reImage18.style.zIndex = 1000;
}

var image19 = document.getElementById(“Image_19c”);
var tl = new TimelineMax({paused:true, reversed:true, onReverseComplete:myFunction});
tl.to(image19, .8, {x:-185, y:-200, scaleX:1.5, scaleY:1.5, ease:Quad.easeInOut});

var image18 = document.getElementById(“Image_18c”);
var tl_2 = new TimelineMax({paused:true, reversed:true, onReverseComplete:myFunction2});
tl_2.to(image18, .8, {x:-210, y:50, scaleX:1.5, scaleY:1.5, ease:Quad.easeInOut});

window.addEventListener(“mousedown”, function(e){
if(e.target.id==”Image_19″ && reImage18.style.zIndex == 1000){
tl.reversed() ? (reImage19.style.zIndex=5000, tl.play()) : tl.reverse();
}
});

window.addEventListener(“mousedown”, function(e){
if(e.target.id==”Image_18″ && reImage19.style.zIndex == 1000){
tl_2.reversed() ? (reImage18.style.zIndex=5000, tl_2.play()) : tl_2.reverse();
}
});