Forum Discussion
GSAP 3.5.1 ( latest version ) is now included in Storyline 360
A few months ago i discovered Storyline uses the GSAP Tweening library for all its animation features. Any animation you make in Storyline somehow is triggered by GSAP under the hood of Storyline. T...
Hi Math
I really appreciate the time you take to answer questions here - and you are clearly, the man to go to for advice on GSAP.
I'm new to GSAP but I like the potential it creates for developers in Storyline. I'm starting with small steps and it's looking good, I can move images, add effects etc.
A quick question though, if I may post it here? I'm assuming you can't change the 'src' property of an image in Storyline? I saw your post on dynamically loading a QR code - so I'm guessing if it had been possible to dynamically load an image from Storyline using GSAP by changing the src you would have gone that route?
This code works in straight JavaScript:
//Create array of links to images
var cards = [
'Jack.png',
'Queen.png',
'King.png'
];
//random number generator
function getRnd(max) {
return Math.floor(Math.random()*max);
}
//locate card by altName and select card at random
function selectCard(){
var cardImage01 = document.querySelector('img[alt="card01"]')
console.log (cardImage01);
gsap.set(cardImage01, { attr: { src: cards[getRnd(3)] } });
}
Here it is used on a test page:
I have three image files - the Jack Queen and King of spades. Clicking the button calls a random number generator and selects the card image at random from the array "cards" which contains the URL's of the image files (they are in the root folder).
If I put that on a button in Storyline - it doesn't work. If I replace the set command with a to and move the image it moves it - so I know it locates the image on the screen - but I'm guessing it restricts the functions available?
Any advice would be appreciated... Thanks
In fact you can change the src image of any 'real' image in Storyline on runtime. I do think i have samples showing that....
https://community.articulate.com/discussions/articulate-storyline/how-to-create-dynamic-texts-links-and-dynamic-images-in-storyline
The url above shows a bit of it. In the end i ended up generating the QR's dynamically as they needed added customizable querystrings.
In the end there are 2 solutions to creating / changing images with Javascript. One is using a WebObject to point to some URL ( i use Cloudinary, so you can also allow users to upload images and change them on the fly ). Then an action can change the url/src of the image/WebObject.
Another one is adding multiple images upfront to your resources and then you can switch them on an action. You need to setup a array for them... like this...var urlArray = ['story_content/external_files/avatar1.png','story_content/external_files/avatar2.png','story_content/external_files/avatar3.png'];
Then you can either add them to the viewport...or change the href of an existing image on screen by one from the array.
Do share a sample and i will see if i can help better.
Do try GSAP to change the src... it will work.
