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.
Any help on how to change the attribution/src of an image through the accessibility features in gsap?
Thank you-Ali
4 Replies
Do share a sample showing what issue you have. As is this method still works, i use it regularly.
Ah, Storyline 3... that might be the issue.
GSAP nor jQuery are included in Storyline 3, so you need to add those libraries manually first.
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
I guess an alternative can be using the animation: moving out the current image and moving in the new image. I'm testing it if all of my images must be on the same slide.
Image names in an array are a bit tricky due to so many ", , and '. :-)
You are making several mistakes. Do check up on how to use WebObjects to load things... i dont have time now to elaborate...and donot have Storyline3.