2 Problems: The first problem:
My gumball shows a random radial gradient color when I test gumball.html on the browser, which is what I want.
However when I test my aslides.html on the browser, the random radial gradient is not working. It is suppose to show a random radial gradient.
If you open: (1) aslides.html, 2) select thumbnail, 3) the lightbox opens with the animation, but the random radial gradient color is not showing up. I uploaded my file (lightboxTest)
The second problem:
I want the random color to change every time it loops. The first time the animation plays, the color changes twice. I keep changing the milliseconds, but it is not working. I uploaded my file (LoopTest).
The first problem:
You use an old version of your gumball in aslides.html.
In this old version, the script in onSceneActivated.js file doesn’t use a setInterval function to fill the gumball randomly after each 2 seconds as in your new version (the LoopTest project), so it just works once when loading the page.
The second problem:
Calling setInterval in an external JavaScript file (onSceneActivated.js) doesn’t sync with the timeline so this issue occurs.
To make them sync together, you should define only the function to fill the gumball in the external JavaScript file, and call this function in a trigger at the start of the timeline. The Scene Activate event handler should also be removed, too.
Please find the sample fixed: gumball_loop.saolapack (473.1 KB)
Thank you for your help. I really appreciate it. I was trying different javascript codes and I forgot to update the old version.
Last question, is there a way to scale the images without creating an animation?
For example: I want to overall decrease the image size so that it is the same size in the first and last frame.
Do you want to scale the entire animation?
If so, you should use px unit for the scene width/height in Properties pane, and select AutoFit option in Document pane.
Thank you again!! That’s exactly what I wanted to know.
I realized when I open my lightbox, the random color gradient does not show until after the first loop. However, if I test the html on the browser, it works.
Also, it is strange that I click on responsive layout and when I increase the size of the browser, the image does not scale up/down.
Maybe it’s not possible to change the gradient color of a hidden element in an iframe (lightbox).
You should change it when the ball is already visibile.
To do that, drag the timeline trigger at 0 to a new timestamp after the Display On keyframe of the ball, e.g. to 3.370s
The project was created with responsive layouts but the content was not designed properly for these layouts. However, you don’t need responsive layouts in this case, you can delete them all and use AutoFit for fixed scene size (with px unit) as mentioned in my previous answer.
Thank you for your help, I really appreciate it. It now works.
Before I tried your suggestion, I made the ball visible on 0. However, that did not work. However, when I moved the timeline trigger after the first keyframe of the ball, the color gradient works in the lightbox. So maybe, the ball’s keyframe is the factor.
I’ve found that the lightbox resizes itself when showing.
It makes the animation switch to another responsive layout and the ball is filled again with the solid color as setting in the editor.
So deleting all responsive layouts will resolve it, moving the trigger is not needed anymore. gumball_loop_no_responsive_layout.saolapack (471.5 KB)
So by resizing to another responsive layout, and with the breakpoints, the javascript does not load fast enough, which is why the ball is a solid color. Is that correct?
Since there is a timeline trigger on the first key, should I delete the event handler on the ball (runs javaScript)?
No, the script that fills the ball with a random gradient still run when loading, but after that the layout changes and everything is reset to the new layout.
That Run JavaScript action will not run in any case because you didn’t assign a function for it. You can delete it.