Forum Discussion
Javascript created by ChatGPT doesn't work
As GSAP is build into Storyline, i copied your code and pasted that into chatGPT as a new prompt..adding this. Change the following code so it uses GSAP.
As chatGPT has no knowledge of Storyline specific stuff you have to carefully pick the needed parts out of the response. In my case that was this.var image = document.getElementById("yourImageElementID");
var screenHeight = window.innerHeight;
var screenWidth = window.innerWidth;
// Set a random position along the horizontal axis
var randomX = Math.floor(Math.random() * (screenWidth - image.width));
// Set the initial position
image.style.left = randomX + "px";
image.style.top = "0px";
// Initial top position at the top of the screen
gsap.to(image, { top: screenHeight - image.height, duration: 2, ease: "power1.inOut", onComplete: function() {
// Animation complete
} });
One thing ( if you know a bit of Storyline Javascript ) that immediately shows is the CSS selector for the image. As is chatGPT has no knowledge that Storyline cannot select an image this way. You need to use the 'accessibility'-trick for that.
This is the way to select elements in Storyline with Javascript.var myImage = document.querySelector("[data-acc-text='someImage.png']");
Where you can add a custom accessibility selector or use the default one Storyline generates.
Testing that now in Storyline. As this had no result... i tried this.gsap.to(myImage, { duration: 2, x:"+=100"});
That had result, the image was moved 100 pixels to the right. So fixing the code then to this and it works.
https://360.articulate.com/review/content/746bc5bc-b929-4651-884a-7060081f7750/review
In the end this is the code to set a random position.var myImage = document.querySelector("[data-acc-text='introIMG']");
var screenHeight = window.innerHeight;
var screenWidth = window.innerWidth;
// Set a random position
var randomX = Math.floor(Math.random() * parseInt(screenWidth - 218));
var randomY = Math.floor(Math.random() * parseInt(screenHeight - 218));
gsap.to(myImage, { duration: 2, x:randomX,y:randomY});
My image is 218x218. If you want no animation and have the image set immediately to a position then use.
gsap.set(myImage, { x:randomX, y:randomY });
Kind regards,
Math