How to replace image by gsap?

Jan 21, 2023

Hello Heroes,

After spending several days on this, I guess I need some help. I've been trying to change images (from a file list) through gsap, in a storyline 3 page.

I managed to change the dimensions and do animations on the selected image. What I could not do is replace the current image with others from a folder in the WebObjects.

The image change was possible to do previously through an iframe with both html and js are within the iframe. But this method has the problem of linking the iframe and storyline player.

 

I saw a few posts including this which focuses on states of image.

https://community.articulate.com/discussions/articulate-storyline/changing-state-directly-from-javascript

 

Any help on how to change the attribution/src of an image through the accessibility features in gsap?

Thank you-Ali

4 Replies
Ali Al-Shufafa

Hi Math, thank you for jumping in.

SL3 latest versions include gsap. I've used it successfully to animate stuff. It adds amazing flexibility.

 

 I'm attaching two zip folders:

1) native *.story project with it's WebObject folder (images, index.html, JS)

2) the output files just in case the native files were not clear.

 

The project is a single slide with an iframe to show images randomly from the included images. It also loads the file name and reads it out loud. On the player, a bullhorn is clicked to call the same JS function to do the same but it does not work (my original problem).

As an alternative solution to the original problem, I tied to use gsap.set to change the attribute src but I could not figure it out.

 

I'm keen to use gsap in order to avoid the iframe altogether and have the control directly done by the player.

Can you please look into the files and help?

 

Ali